I was a solo UX/UI designer conducting all research, ideating all solutions, creating all deliverables, and iterating upon all prototypes.
I used Figma and Miro to conduct user research and create deliverables. I also used Figma to generate medium and high-fidelity clickable prototypes.
I generated branding designs with Illustrator and Photoshop.
I conducted usability testing, as well as client and stakeholder communications, using Zoom, Slack and Maze.
I organized, analyzed and developed my data and deliverables using Notion and Google Suite.
Users need to quickly, efficiently, and easily find a range of resources and services from community mutual aid groups all in one place. There currently is no central hub for community services. This service acquisition needs to be accessible to any and all users, and must allow for anonymity to maintain privacy.
An accessibility-first, community-centered app. A centralized hub based around a single dashboard that allows for multiple methods of discovering services:
Search bar for specific needs and services. Browsing for services via categories and sub-categories. "Here to Help" feature for service providers to post available features.
Map function to visually show nearby services.
Calendar function for finding available services on specific dates.
Settings function that allows for manually adjusting accessibility settings.
A wide range of individuals who are disadvantaged within communities; From houseless individuals to housed families in financial need, etc.
Bill E. is houseless during the global Covid-19 pandemic. Every day is a challenge for him and his primary needs are to find food and shelter in safe places each day. He has a smartphone with pre-paid minutes, but is not always able to afford more minutes. Bill finds Portland’s local mutual aid groups to be extremely helpful, but doesn’t always know where their services are located as things change day-to-day. He is looking for an app that can help him locate help and safe places quickly without needing to sign in, as he often borrows others’ phones to do quick research.
• Finding food for the day
• Finding temporary to long-term shelter
• Locating mutual aid group services
• His phone tends to be out of data or out of battery
• There simply isn’t a good app for finding mutual aid support
• Mutual aid groups tend to move around
• He is not very familiar with typical app mental models
Emma C. works from home as a single mom. She has been negatively impacted by the pandemic/recession, and due to current circumstances is struggling with her credit score and balancing her credit cards. She works hard to take care of her baby, but tends to become very stressed by her own limited resources and lack of government help. Emma wants to find an app that can help her quickly locate supplies like baby food and hygiene products while she deals with her busy days. She also struggles with her accumulating bills and debt. Emma has sought help from mutual aid groups before but struggles to keep up with where and when to find them.
• Feeding her family and herself
• Maintaining hygiene products for her family
• Keeping up with her bills
• She works hard and cares for her kid, so she doesn’t have time to always research helpful resources
• There simply isn’t a good app for finding mutual aid support
• Mutual aid groups tend to move around
• She is tech savvy but doesn’t want to deal with complicated forms
Discover. Define. Develop. Deliver.
I used the double diamond design process to research and ideate potential solutions which allowed me to conduct iterative prototyping.
Conducted a How Might We qualitative evaluation exercise to define and refine project scope.
1. How might we make it accessible
2. How might we allow for any user to easily find services
3. How might we keep it simple
4. How might we include all necessary / needed services
Gathered quantitative data by conducting a survey of 21 potential users.
When asked how best users would like to be able to find services in the community:
66.7% of users said they would like to have service categories.
66.7% of users said they would like a Google Maps-style Pinch-zoom map of services.
61.9% of users said they would like to see a schedule of upcoming services opportunities on specific dates.
42.9% of users said they would like to use a prominent search bar function.
When asked which they would prefer more:
66.7% of users said they would like to stay anonymous when using app.
33.3% of users said they would want to create a user profile.
When asked which makes more sense to them:
100% of users said they would like a simple, straight-to-the-point design.
0% of users said they would like a design that has lots of features and different ways to use it.
When asked how they would prioritize a list of services:
“By severity/emergency. Abuse, medical, temp housing over construction, hygiene. But that also depends on the individual situation.”
“I think any services aiming to provide support for unhoused folks should be prioritized first. This could be food services, medical, mental health, or jail support services.”“I would do alphabetical in order to show there is not necessarily one that is more important than the other.”
“Abuse support.”
“Hard to say - depends on individual need. Maybe by a metric of most needed or used.”
Conducted a competitive SWOT analysis to gain qualitative data comparing MutualGo to Mutual Aid (a different app of the same name).
MUTUALGO
Has different channels for looking for services.
UI is confusing; no clear signs of UX design.
Shows need for a mutual aid app.
Requires email verification.
MUTUAL AID
Beautiful, UX’d user interface.
Offers/requests function at center of design.
Allows for switching to different communities based on location.
User profile purpose unclear.
Could be used by any mutual aid group.
Developed a qualitative empathy map in order to put myself in the users’ shoes and further understand their pain points.
PAIN
Mutual aid apps don’t exist with user bases yet.
Many users are new to smartphones.Many different services translated to one process.
It’s difficult to stay anonymous while seeking help.
GAIN
Opportunity where little competition exists.
Creating home page with all architecture accessible.
Creating multiple ways/flows with which to seek services.
Creating Google/Craigslist-style user anonymity.
Created a user journey map to identify process of users’ path as well as pain points and opportunities.
Onboarding, Searching, Browsing, Mapping, and Scheduling are the primary user phases. Users need to be engaged and easily navigating these phases in order to maintain their core intent to quickly locate, understand, and request services.
Developed user stories to further define the scope and narrow in on specfic use cases.
1. As a new user, I want to find services so that I can get help from the community.
2. As a new user, I want a search bar so that I can find services easily.
3. As a new user, I want to see service categories so that I can refine my search.
3. As a new user, I want to use an interactive map so that I can locate services easily.
I began defining the user paths as they flow through the UI itself by generating user flows.
Developed a site map in order to lay out the information architecture clearly for development.
I used my whiteboard at my desk to ideate and sketch out different possible UI screens.
This image is an example of what that process looks like in my workspace.
Here, I began digitally designing and iterating within Figma to generate this low-fidelity prototype for testing.
These images show the wireframe mock-ups of the app’s essential needs based on the user flows and user stories. The dashboard landing page is designed to allow for the user to easily grasp which options they have in order to find the services they need. Browsing categories are ranked based on user survey research. I created a map concept as well to be refined in the visual design phase.
The service calendar allows for the user to find which services are available on specific days. The other two images show service subcategories and an example of final results in a scenario where the user is looking for mental health hotlines in their area.
In this phase, I developed the visual design to bring out the design's personality so as to further enhance its functionality and accessibility.
This mood board shows my visual thinking and inspiration as I developed the UI branding. I looked at Google’s UI’s to study its search-based mental models. I studied Craigslist in order to understand how it directs users to specific services via anonymous, city-based content-management. I took inspiration from Twitter’s dark mode branding when ideating my visual design. The mental model of the Red Cross logo directly influenced my logo design. I also of course took inspiration from my own previous UI and information architecture design, particularly focusing on my navigation app Navibus’s systems.
I developed this icon and logo based on the culmination of my brand study. The gradient and opacity are consistent with the design similarity of the UI buttons, links and branding.
This is the final color palette for the app's high-fidelity design. These colors meet AA and AAA standards with a color contrast checker for accessibility.
I chose to build the app using iOS San Francisco fonts to utilize their familiar mental models and patterning in order to help the user feel immediately comfortable.
This is a visual of my "digital sketching" process. Here, I refined the visual design as well as content management. When I say accessibility-first design, this is what I mean: Start with very accessible features like large buttons and high-contrast elements, then begin integrating contemporary design trends. I was able to use this process to generate a final design that has a balance between linguistic and iconographic accessibility.
This design process culminated in a user-centered, streamlined, and accessible high-fidelity navigation prototype.
I added an onboarding experience including the new logo that asks for the user’s current location. The dashboard landing page uses linguistic and visual symbols with multiple flows to guide users to their needs quickly and efficiently.
As you can see, I was able to integrate the branding colors throughout the prototype. I chose to design the app in a "dark mode," as I believe this trendy style of design is easier on users' eyes and thus more accessible. And it looks cool!
I conducted a series of usability testing through Maze, Zoom, and in person.
These tests aimed to find the successes and problem points of the user flow.
This test shows that most users were easily able to navigate to a specific service when traversing the app’s information architecture. It affirms the content management and serves as a benchmark for future comparative testing.
This test shows that 30% of users were not able to navigate back to the dashboard home screen by using the “Home” button. One tester used the back buttons to revert back through multiple pages, and two others tapped the settings gear icon and went back from there. I have concluded this may be due to my use of an older mental model, which is to use the work “Home” as a button. In order to fix this, I decided to replace that with a more contemporary mental model of a house silhouette icon. See: Facebook, Instagram, Figma, etc. for examples.
Mostly positive responses generating a resounding interest in the application itself. Biggest takeaway for now is the mental model of navigating back to the home screen being broken for some users. It is also important to acknowledge that most of the users were able to easily navigate the app and that is not only important but also a significant success.
Recommend a prototype redesign that involves working to further refine and iterate upon the accessibility-first, simplistic design. A heuristic evaluation on the app’s mental models would be useful in further defining its human-centered usability. Next step immediately is to replace the “home” button with a house icon to align with contemporary mental models. Another change is to add a language change option in the settings page for accessibility.
The image on the right shows the subtle yet important change to the home button icon based on user testing results. It also shows the addition of changing the user language for further accessibility.
The primary call-to-action buttons are all located in the lower half of the screen. This allows for ease of use for those who are unable to move their thumbs quickly.
The features are simplistic with straight-to-the-point design intent. Large text with clear and actionable items eases the cognitive load.
Users have the ability to change their font size and language to cater to their own specific needs.
The design utilizes Apple's popular left-heading design as well as their SF Fonts family. The buttons and general UI assets are based on contemporary design trends that reflect current mental models for user familiarity.
Users need to quickly, efficiently, and easily find a range of resources and services from community mutual aid groups all in one place.
A centralized hub based around a single dashboard that allows for multiple methods of discovering services.
Based on the research and user testing, this concept can move forward for further iterative prototyping and testing.
This case study delivers a robust solution based on cumulative human-centered qualitative and quantitative data through the double diamond design process. With user intent and accessibility always at the forefront of every decision, this product performs efficiently and effectively in the hands of those who need it most.
In working through this process, I gained further appreciation for accessibility-first design, and developed my skills while empathizing with the most vulnerable potential app users in our society. If more designers, and people in general, would practice this sort of critical thinking challenge, the world would become a better place faster than one might realize.
Thank you for viewing my case study based on accessibility-first design under the umbrella of human-centered design. If you have any questions please feel free to reach out through my contact page or LinkedIn.
Cheers,
Wesley
