The Hive
Responsive website and mobile app for the social good.
Role: UX designer leading the creation and development of ACA's Hive app and website design.
Responsibilities: Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs and responsive design.
​
Company Overview: The Academy’s Hive is a community board for the ACA community to connect their needs and resources with each other. The typical user is between 10 and 70 years old; most users are students, teachers, and parents. According to a fifteen-year longitudinal curriculum and instruction study, “the effects of parent and community involvement is considered to have a strong influence on academic achievement {d = 0.50}. [Ranked 51 out of 150],” (Hattie, 2012, p.267). In other words, high parent and community involvement had a stronger effect on student overall achievement than assigning daily homework, class size, and use of technology in the classroom. The Hive app and website make it easier for the school to promote higher parent and community involvement.
​
.png)
The Goal
Design an app and responsive website to be user-friendly by providing clear navigation and offering a fast volunteer and donation request process.
The Challenge
The Academy wants all our students’ family members to feel comfortable, valued, and like they belong at school. We believe that if we give families the opportunity, then they will be involved.
UNDERSTANDING THE USER
I conducted user interviews, which I then turned into an empathy map to better understand the target user and their needs. I discovered that many community members would like to be involved but need more options for time and activities to participate in that best work with their busy schedules.
Competitive Audit
1
Abandoned websites
Community board website designs are often buried in the architecture of the main site, which results in confusing navigation.
2
Clunky process
Lacks clarity on who can post a community need and how to make a post.
3
Clarity
Online community board websites don’t provide clarity on whether or not a post is still active.
STARTING THE DESIGN
I did a quick ideation exercise to develop ideas for addressing gaps identified in the competitive audit. My focus was specifically on the clarity of intended users.
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. I aimed to make static information architecture decisions to improve website navigation. The structure I chose was designed to make things simple and easy.
Next, I sketched paper wireframes for each screen, keeping the user's pain points about navigation, browsing, and posting a request flow in mind. The home screen paper wireframe variations focus on optimizing the browsing experience for users.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the homepage was a key part of my strategy.
To create a low-fidelity prototype, I connected all the screens involved in the primary user flow of creating a post. At this point, I received feedback on my designs from the ACA community members about things like the placement of buttons and page organization. I made sure to listen to their feedback, and I complemented several suggestions in places that addressed user pain points. View ACA's Hive website low-fidelity prototype.
Findings from the unmoderated usability study
1
Creating a post
Users wanted a way to be able to customize the estimated hours instead of deciding on a range of hours when creating a post.
2
Archive features
Users wanted to be able to view past posts that were created.
3
Sharing features
Users wanted the option to share their post with possible community members that would be interested in it.
REFINING THE DESIGN
Based on the insights from the usability study, I made changes to improve the site’s creating a post flow. One of the changes I made was adding drop-down options instead of bubble-in options to allow users to be more specific about the type of request.
Before usability study
After usability study
To make sharing posts easier for users, I added a paper airplane icon located on the bottom right of each post to allow users to share their posts to other community members.
Before usability study
After usability study
Mockups
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by ACA community members. View ACA's Hive high-fidelity prototype.
Accessibility considerations
1
I used headings with different sized text for clear visual hierarchy.
2
I used landmarks to help users navigate the site, including users who rely on assistive technologies.
3
I designed the site with alt text available on each page for smooth screen reader access
RESPONSIVE DESIGN
After creating the web design for ACA’s Hive, I drafted the initial mobile designs for ACA’s Hive App. These designs focused on delivering personalized guidance to users to help them better connect their needs and resources.
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of creating a post to request a need or provide a resource. View ACA’s Hive Mobile App low-fidelity prototype.
Based on insights from the usability studies, I applied design changes like allowing users to customize the estimated hours instead of deciding on a range of hours when creating a post.
Before usability study
After usability study
Additional design changes included adding an option for users to share their posts with possible community members who would be interested in it.
Mockups
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study. View ACA’s Hive Mobile App high-fidelity prototype.
Because users may access the site from a variety of devices, I have included considerations for additional screen sizes in my digital designs based on my earlier wireframes. View ACA’s Hive Ipad App low-fidelity prototype
GOING FORWARD
Our target users shared that the design was intuitive, more engaging with the images, and demonstrated a clear visual hierarchy. I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
NEXT STEPS
1
Conduct follow-up usability testing on the app and new website.
2
Design in app incentives and rewards to users for everytime they share a post that is not their post.
.png)
.png)
.png)
.png)