Project Overview
The product:
A Responsive Website that will address food insecurity by helping clients directly, within their own community, to purchase groceries for a reduced fee based on their income.
Project duration:
April 2023 – June 2023
The problem:
As food prices rise, families and individuals are experiencing unprecedented financial stress. This is due to inflation, their wages, and other unforeseen circumstances. It is making it harder for low-income earners to make ends meet, and to buy healthy food, while reducing food waste.
The goal:
Identifying the challenges to help users gain access to affordable food, and find it quickly and intuitively through an app, all while reducing the stigma attached to getting help when people need it.
My role:
Lead UX Designer, UX Researcher, and Visual Designer.
Responsibilities:
User Research, Paper/Digital Wireframing, Prototyping, Conducting Usability Studies, Accounting for Accessibility, Information Architecture, Responsive and Visual Design.
Understanding the user
● User research
● Personas
● Problem statements
● Competitive audit
● Ideation
User research: summary
Sometimes there can be challenges, or barriers, gaining access to food and other resources when people really need it.
I want to identify the challenges and pain-points to help users gain access to affordable food, quickly and intuitively through an app, while reducing the stigma attached to accessing help. I wanted to understand and address the pain points and frustrations users commonly have when using similar products, as well as understanding common user behaviours.
Persona 1: James
Problem statement:
James is a Deli Clerk with two children who needs a way to reduce the cost of groceries, because he needs to be able to afford other essentials for his small family.
Persona 2: Martha
Problem statement:
Martha is a retired teacher on a fixed income who needs help cutting costs of food because she needs to stretch her budget for other necessities.
Competitive audit
After conducting a Competitive Audit and analyzing existing competitors in the market, I was able to find out what differentiated our app/business model from the competition, and address gaps that we could close.
Ideation
I used an exercise called “Crazy Eights” to come up with many design ideas quickly. My focus was on creating an easy user flow to help guide the user through the product intuitively.
Starting the design
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Digital wireframes
I made use of icons, text and alt-text, to make navigation clearer, and to make better use of screen readers for assistive technologies.
At the initial digital wireframe stage, I made sure the research findings were used to create all the initial screens.
Low-fidelity prototype
I used the latest research data after it was synthesized, and changed the prototype to reflect all of the usability research data in a coherent user flow.
Click here to see prototype.
Usability study: parameters
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
Canada, remote
Length:
30 - 45 minutes
Usability study: findings
The first study consisted of wireframe mock-ups to help guide the user through the user flow, and then research was conducted using low fidelity mock-ups to find any pain points.
1. Accessibility
The use of icons and text will make navigation clearer, as well as make better use of screen readers.
2. Ease of Use
The product needs to be easy to use.
3. Suggested Changes
Some users wanted a more robust shopping system.
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
After conducting the first usability study, some users expressed they wanted a clearer and easier user flow. Using colour on the buttons and sufficient white space, I could create an easier experience.
Other changes made included using a more robust shopping cart system. It was imperative that it was easy to see what was available, and to make sure it was extremely easy to purchase items from the cart.
High-fidelity prototype
In my final high-fidelity prototype, I presented a much cleaner user flow allowing users to find what they need, much quicker and more intuitively.
Click here to see prototype.
Accessibility considerations
1. I used alt-text and icons for the use of screen readers to make the web/app accessible to all of our users.
2. Screen readers and other assistive devices often make alternative resources less necessary. I made sure the app worked with technologies already built into mobile devices.
3. High-contrast screens were also used to help make the app more accessible. The use of icons, colour and gestures were top of mind to assist our users.
Responsive Design
● Information architecture
● Responsive design
Sitemap
Accessibility and the shopping cart system were the main pain-points to address when creating the user flow. I had the user top of mind to create the best possible user experience possible, as well as make the best information architecture decisions possible.
Responsive designs
I designed three different screen sizes for my Responsive Website. I created a Desktop, Tablet and Mobile version. Every size reflected the same user flow to understand and address the pain points from my Usability Study.
Going forward
● Takeaways
● Next steps
Takeaways
Impact:
The app will help to address food insecurity by helping clients directly within their own communities for a reduced fee based on their income.
What I learned:
I learned new ways to conduct various usability studies, synthesize the data, ideate from real world findings, while taking into account biases and accessibility concerns.
Next steps
1. Continue to add new features to the app, conduct new usability studies to determine any pain points, and receive user feedback to improve the product further.
2. After synthesizing the new user data, I will look for more ways to implement and improve the app.
Let’s connect!
Thank you for your time reviewing FoodDistro.
Please email me at (artguy6@gmail.com) or contact me directly!
