Clove
Designing an End-to-End Mobile Application.
Product Designer – UX and UI Designer
Figma
Photoshop
Canva
5 Weeks
Background
Food intolerances and allergies are becoming increasingly prevalent. Furthermore, a substantial portion of the population is plagued by intolerances or pursuing specific health objectives, such as weight management or adhering to specialized diets.
The challenge of finding suitable foods is exacerbated by the sheer variety of products available, making it a time-consuming and frustrating process for many.
With Clove, a product scanning app, users gain the power to effortlessly identify potentially harmful ingredients, discover suitable alternatives, and make informed decisions that align with their dietary needs, ensuring their well-being and peace of mind like never before.
Mission
- To understand the pain points for people with specific consumable and/or topical preferences
Guiding Questions
- Users may benefit from a product barcode scanning app that opens the door to finding products that align with their health goals.
- Users may benefit by avoiding allergy flares from consumables and topicals through alternative suggestions that align with their goals.
How Might We?
- How might we create a customizable application to assist users to find products that work with their lifestyle?
- How might we incorporate inclusive features to accommodate users of all ages and accessibility to be able to use this application?
- How might we suggest foods/products that align with the users goals?
Results
Eight participants were interviewed to better understand user backgrounds, needs, and struggles. These participants varied in ages (22-63 years old), with 50% male/female ratio.
Accessibility
63% of participants claimed they struggle to find, understand, or read ingredient labels on products.
Allergies
100% of participants stated they or a close family member has a food allergy.
Diet
100% of participants concluded they have currently or previously been on a specific diet.
New Products
100% of participants shared they prefer trying new products and would appreciate suggested products.
Competitive Research
Examining different Product Scanning apps and delineating their strengths and weaknesses is crucial for gaining a comprehensive understanding of comparable applications. This research illuminates the essential aspects required to maintain high-quality standards and aids in identifying useful features. I assessed three product scanning apps, presented below.
Fig
Strengths:
- Customizable
- Scan or search option, huge database
- Offers product suggestions and ability to “Save” products
Weaknesses:
- Paywall
- Sometimes suggests products not available near user
- Only available in U.S.A.
Yuka
Strengths:
- Customizable and color coded
- Food and personal care products
- “Impact on health” feature
Weaknesses:
- Scores products based on ingredients, the scare may not be relevent to the user
- Paywall and ads
Soosee
Strengths:
- Multiple languages (17)
- Multiple profiles on app
- Works offline
- Real-time scan, highlights ingredients in list
Weaknesses:
- No alternative options
- No “Save” option on profile
User Persona 1:
User Persona 2:
Design
Ideation and
Information Structure:
My next step was to visualize the navigation bar and propose where to place features. I created a site map that summarized where I would place different features within the app. Then, I created a user flow to ensure the feature placements would work well with the overall structure and flow.
Application Map
User Flow
Clove App Features
Scan and Search
Ability to scan product barcodes and to search for different products to find ingredient information.
Save Option
User can "save" products to their profile for easy reference. They can build their "favorites" list and categorize products.
Different Profiles
Multiple profiles on a single app allows users to find products for different members of their household.
Easy Onboarding
Ease of onboarding and changing allergens and diets creates a dynamic application for use's ever-changing lives.
Lo-Fidelity Wireframes
The next step was to create the lo-fidelity wireframes. Before settling on the final version, I sketched out and created wireframes of 2 possible designs. I was deciding between a modern, sleek design or a colorful, playful design.
To help with the decision, I consulted with some of my previous interviewees. With a resounding agreement, they preferred the colorful, playful design that housed more graphics than photographs. My next step was to fine-tune the design and create a brand tile.
Branding
I created the Clove tile to reflect the brand adjectives: Green, Playful, Confident, Fresh.
The next step was to gather participants in order to start the usability testing process.
Usability Test
I tested the high-fidelity prototype on eight participants.
I completed the tests via in-person and zoom interviews. Three of the participants saw this product for the first time, so I had additional explanations of the product prepared for them. I tested 2 user flows with the goal of 100% success rate with zero confusion. I wanted the user flows to be well-rounded, so that the users have a full understanding of the app and its capabilities.
Sign Up & Onboarding
Conditions:
- Sign up via email
- Diet : Gluten Free
- Allergy : Wheat
- Limit: Added Sugars
Saving a Product
Action:
- Scan and save a product to your favorites
Results of the Usability Testing:
Iterations
Throughout the design process, and after the usability test, I completed various rounds of changes to my original design.
Onboarding Color Scheme
I decided to make the onboarding screen a uniform green color, to eliminate the potential confusion of whether the onboarding is complete or not.
Color in Checklist
After consulting with testers, I decided alter the onboarding background color. I opted to NOT change the color to green after a user checks off an ingredient or diet. The background will stay orange.
Ingredients & Diets
After an ingredient or a diet is checked off in the onboarding flow, it will show on the bottom of the page in a green button. This will help summarize what is chosen beofre the user moves on.
Prototype Video
To make the prototype more realistic, I added a video to show how the product would be scanned, and what would occur after.
Final Prototype
Reflection
Key Takeaways
The main goal of this project was to create a mobile app idea and design the prototype. I started this project to help create a functional, usable app that would help people who struggle with allergies. There was a lot of room for creativity for this project, and I loved the challenge.
If I Had More Time...
With such a large time-constraint, it was difficult to complete all of the neccessary research that I envisioned. If I had more time and resources, I would want to explore the “travel” aspect of the scan app.
Along with different languages, I would want to incorporate a “translate feature” and ensure that the app had access to the ingredients of products around the world.
Stay tuned.
