Clove
Designing an End-to-End Mobile Application.
Overview
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.
I designed an app to relieve the pressure to find suitable foods and products for your diet.
My Role → UX / UI Designer
Tools → Figma, Photoshop, Canva
Scope → 5 weeks
The Challenge
With an idea and a vision, the product lacked branding and a mobile application.
How We Found A Solution
User Research
I began the process by defining the mission: to understand the pain points for people with specific consumable and/or topical preferences. I determined to focus on these guiding statements:
- 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.
User Research Findings
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.
63% of participants claimed they struggle to find, understand, or read ingredient labels on products.
100% of participants stated they or a close family member has a food allergy.
100% of participants concluded they have currently or previously been on a specific diet.
100% of participants shared they prefer trying new products and would appreciate suggested products.
User Personas
Below are the user personas I built based on information received from the interviews and user research.
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.
The Takeaways:
- Real-time scan to be helpful on-the-go.
- Customizable to accommodate for all types of users.
- Save products to your profile, and offer suggestions based on personal criteria.
How Might We...
- How might we create a customizable application to assist users to find products that work with their lifestyle?
- How might we suggest foods/products that align with the users goals?
UI Design and Branding
I created the Clove tile to reflect the brand adjectives: Green, Playful, Confident, Fresh.
Information Architecture
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.
Clove App Features
After completing the research and site map, I wanted to include the must-have features for the new case study section:
Ability to scan product barcodes and to search for different products to find ingredient information.
User can "save" products to their profile for easy reference. They can build their "favorites" list and categorize products.
Multiple profiles on a single app allows users to find products for different members of their household.
Ease of onboarding and changing allergens and diets creates a dynamic application for use's ever-changing lives.
Wireframes
First, I sketched out how I envisioned the app. Below, you are able to see the Scanning Page, Search Page, Profile Page, and Product Information Page. I included the navigation bar, search function, scanning camera, and some additional features, like the scan history and change language buttons.
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, seen below on the right.
Prototype
I completed the prototype in Figma, focusing on the onboarding flow and the scanning action.
I prototyped in Figma.
Usability Testing
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.
The Method:
Zoom & In-Person
The Participants:
n = 8 : Ages = 25-65 years old.
The Task:
1. Sign Up and Onboarding
Conditions:
- Sign up via email
- Diet : Gluten Free
- Allergy : Wheat
- Limit: Added Sugars
2. 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.
1.
I decided to make the onboarding screen a uniform green color, to eliminate the potential confusion of whether the onboarding is complete or not.
2.
After consulting with testers, I decided to 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.
3.
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 before the user moves on.
4.
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
Impact
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.
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.
