305 Superfoods
305 Superfoods is a mobile e commerce app.
Project Overview
As superfoods grow in popularity and more people want to learn more about these types of food and include them in their daily meals, we wanted to make an app that will bring superfoods closer to the users.
This app is not just an e-commerce platform; with this app, users will be able to educate themselves about the superfoods - to understand the benefits of the specific type of superfoods to their health and the origins of superfoods.
This app is not just an e-commerce platform; with this app, users will be able to educate themselves about the superfoods - to understand the benefits of the specific type of superfoods to their health and the origins of superfoods.
My Role
UX/UI Designer
Team
2 UX/UI Designers, 4 Developers
Timeframe
3 weeks sprint
Tools
Adobe XD, Sketch, Miro
Framework
Our framework is based on Lean UX , Design thinking (IBM). For each phase we planned set of tasks to guide us from defining the right problem to creating the right solution while advocating for user’s needs.
RESEARCH
During this phase, our goal was to learn and understand the superfood market. We looked at existing super food-related websites—anything from e-commerce, superfood-inspired recipes, superfood overview websites, and apps. In this phase, our goal was to learn, analyze, and get inspired.
Competitive Audit & Best in Class
We looked at around 20 websites and apps in and out of our category. Some of those apps and websites are....
Terrasoul, as one of the best in class websites, helped us understand different ways of categorizing superfoods to make the filtering and searching experience as easy as possible.
Yoursuper.com highlighted the importance of the brand and the story behind it. They are insisting on showing the origin and sustainability of the production cycle of their products.
Social Listening
We visited Facebook, Instagram pages, and reviews of the brands we analyzed. This is what we learned:
#vegan
#clean
#nonGMO
#sustainable
Users highly value product transparency: where is it from, is it: certified organic, gluten-free, dairy-free, vegan, clean, plant based, etc.
"Work of art!"
"They look fantastic!"
Users really appreciate beautiful imagery of the food made with superfood products. Professional images will help in shaping the brand style, inspire the potential buyers and ultimately boost the sale.
1 on 1 Interviews
We talked with several volunteers, and most of them said that they want to improve their eating habits and incorporate superfoods into their daily diet. Participants who said they are already using superfoods told us they are buying superfoods on several different places (in person) or order them from Amazon (online).
Data Points
We found some interesting data points on super food market. Both global and the US.
Growing consumer interest in a healthy diet and wellness benefits has led to a thriving food & beverage industry in the recent past and this trend is expected to continue over the forecast period. This, in turn, is projected to propel the demand for superfoods in the coming years.
ANALYZE
After collecting the necessary data, we started sketching user flow. First with pen and paper, then using Adobe XD. After creating user flow, we design a site map and information architecture (IA).
User Flow
"User flows help determine how many screens are needed, what order they should appear in, and what components need to be present." (UX Collective, A UX designer’s guide to user flows, July 13, 2020)
We created a user flow that starts when a user finds the product he/she wants to purchase, and then he/she needs to do to make that happens. We were trying to make this process as easy as possible and with fewer steps.
Information Architecture
Next, we created IA that helped organize our thought into structured page organization.
Site Map
Explain why we created SM
DESIGN
When we had all the necessary information, users flow, IA, Site map, we started designing the app. First, we began drawing sketches on paper.
Hand Drawn Sketches
Are great way to present and test many early ideas, saving time and money. They are also valuable guide to move into the Wireframes.
Wireframes
Lorem ipsum
Moodboard
We created the moodboard to help us visually define our brand, and to get inspiration for next steps.
Evolution of Product Detail Page
We c.
Final Iterations of the Home Page
We c.
DELIVER
Next steps....