The product:
We are creating the Green for Less app to attract and retain customers in our online system. With the app, users can save up money as they maintain their special diet, affecting people who care about the world, the animals, and their health by paying with the app at their favorite restaurants and grocery stores to receive cashback. Apparently, nothing similar is in the market so we want to launch it to fill this gap.
PROJECT OVERVIEW
Project duration:
April 2021 to May 2021.
01
The problem:
People who chose a special diet find it difficult to vary their diet and it also can be expensive.�
The goal:
Create an app that helps people who chose a special diet to have monetary compensation while seeing how their choices are positively impacting the planet.�
PROJECT OVERVIEW
02
My role:
UX designer designing an app for Green for Less from conception to completion of the user journey.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
PROJECT OVERVIEW
03
Understanding
the user
I conducted interviews and created empathy maps to understand the users I’m �designing for and their needs. A primary user group identified through research �was working young adults who chose a special diet and find it difficult to vary their it
and also think it can be expensive.
With research we could find out that: not all vegetarians decided to make the change because they feel sorry for the animals, sometimes they are thinking about their health. Also, there is a stigma of it being inconvenient and expensive, but only for those who are outside, the insiders know it’s not expensive at all to buy vegetables, grains and leaves. But, if they want to buy things outside of that, like: tofu, mushrooms, veggies nuggets, then it gets expensive.
USER RESEARCH: SUMMARY
05
Expenses
Restaurants and items aimed at this type of diet tend to be more expensive
Find
It is not so easy to find restaurants specialized in this special diet
Time
Working adults are too busy to spend time on meal prep
1
2
3
USER RESEARCH: PAIN POINTS
06
Problem statement:
Mari is a busy working �adult who needs easy access to healthy food ordering options because they have no time to cook dinner for themself.
PERSONA: Mariana Rodrigues (Mari)
07
Mapping Mari’s user journey revealed how helpful it would be for users to have access to a dedicated Green for Less app.
USER JOURNEY MAP
08
Starting
the design
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
PAPER WIREFRAMES
10
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
We want to know which features really facilitate the life of the user and which are the ones that are not adding anything useful to the user, so that we won’t lose time focusing on the wrong feature.
The navigation bar is simple and easy to understand with icons and text to support it.
The search bar is to find with filter that compliments the user search
DIGITAL WIREFRAMES
11
Easy CTA buttons for the user navigate through the user journey with no great difficulty.
DIGITAL WIREFRAMES
12
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was finding a store nearby, so
the prototype could be used
in a usability study.
View the Green for Less �low-fidelity prototype
LOW-FIDELITY PROTOTYPE
13
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
The QR Code reading button is difficult to find for almost all users
1
Participants questioned where/how they could see the restaurant’s menu
2
Participants questioned how would
they know how much of cashback
would them receive
3
Round 1 findings
The line of Favorites should
move horizontally
1
People was frustrated with how the prototype was working when they
try to do a search
2
Round 2 findings
USABILITY STUDY: FINDINGS
14
Refining
the design
In the early designs it was assumed that the user was already familiar with the QR Code beds icon, but that was not the case and we changed the button to make it easier for the user to identify.
Before usability studies
After usability studies
MOCKUPS
16
The second usability study revealed frustration with the checkout flow. Users wanted more than just see where the restaurant or grocery store were. They wanted to do reservations and see the menus the place provide.
Before usability study 2
After usability study 2
MOCKUPS
17
KEY MOCKUPS
18
The final high-fidelity represented better the users needs. Showing a more clear button to pay, the cashback the person will receive and the choice to make a reservation.
View the Green For Less high-fidelity prototype
19
HIGH-FIDELITY PROTOTYPE
Provided access �to users who are vision impaired through adding alt text to images for screen readers.
Used icons to �help make �navigation easier.
We use colors with good contrast to aid readability.
1
2
3
ACCESSIBILITY CONSIDERATIONS
20
Going forward
Impact:
The app makes users feel like Green for Less really thinks about how to meet their needs.
“This app understood the pain that we vegetarians feel. We want to follow our diet without it costing our pockets too much. When I see the cashback coming in, it only encourages me to continue using the app!”�
What I learned:
While designing the Green for Less app,
I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
TAKEAWAYS
22
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
1
2
NEXT STEPS
23
Thank you for your time reviewing my work on the Green for Less app! If you’d
like to see more or get in touch, my contact information is provided below.
Email: bell.smf@gmail.com
Website: belmksdsgn.myportfolio.com/
LET’S CONNECT!
24
Thank you!