sous
During the project I managed to evaluate the market, do a quick user survey online, create a set of low fidelity wire frames, connect them into a prototype and build them out to a High fidelity beautiful UI design. In the last checkup round I also did an extensive QA audit focusing on consistency and color contrast with regards to accessibility.
Project Summary
Accessibility Check
The app has been evaluated for contrast to match the AA standards of WCAG. In some instances I have found that contrast can be improved.
One specific instance I would like to share is my main tool bar. I wanted my main CTA buttons to differentiate from the tool bar. By choosing white with an orange outline it did not give enough contrast on the frosted glass background. To fix the issue I created a vector shape with a dark brown chosen from the background image. Along with bumping my CTA buttons opacity to 90% from 85% helped with contrast
Initial Contrast :
CTA Bounding Box : FAIL
Revised Contrast :
CTA Bounding Box : PASS
High Fidelity Prototype
I connected my high fidelity designs into a clickable prototype. That will allow me to test the app on the first group of users.
Or Voice Command
Accepted
Click, Hold item (bounding box appears if multiple versions of item exist.) Drag to LIST
Use keyboard to search for items, Bounding Box
appears with item to add
Voice command with “SOUS” to search and add ITEMS to the list
I validated my prototype with 7 users. Each were given a subset of the prototype dedicated to the create list function, selection based on coupons, locating expired food and create a list from Top Rated Recipes. Users were given certain parameters that needed to be adhered too.
This was tested in person, where I introduced the app to the user and asked them questions. The questions were dedicated to food selections within certain bounding boxes, subcategories and locating food that is on the brink of expiration.
Prototype Validation
Study Results
5 out of 7 users were able to navigate the app, use the search function, locate specific coupons and find the expired food. After my 7 users were done I came to the conclusion that I should have found more users that are older (45 and up). The five users that navigated successfully were 19 to 38 years old. With the amount of time they use technology I feel that apps like this have become second nature. Without having a voice command prototype available I was not able to see if that function would work in real time.
Prototype Update Concept
Because of time constraints, I wasn’t able to run a second usability study on the updated prototype.
Alignment and Grid
After choosing the Bento Box configuration I then set up my layout grid by using 12 columns. Once the columns were set up I decided on using 12p distances between my bounding boxes.From previous mistakes I kept everything in even increments. For my center selection icons I had originally placed them in a long rectangular box. To help break them up visually I removed the box and made them bigger 76 x 76p for ease of selection.
12p
12p
28p distance between
bounding boxes for
readability
Icon bounding box for
easier tap 72 x 72p
High-Fidelity UI Designs
Bold
Main CTA button Color
Look and Feel
Once the initial flow was complete, I started by creating the main screens of the app. I started by defining the colors and fonts.
Font
Plus Jakarta Sans
Regular, Medium, Bold
Merriweather
AaBbCcDd
AaBbCcDd
Color Palette
Accent, Primary, Secondary, Tertiary, Background
Going into the project the main question was “Who” realistically could the idea pair up with? Amazon being one of the biggest companies in the world has Whole Foods as a national chain. In an ideal creation of this product I have the color pallet and typography already mapped out for me. I was aiming for a seamless creation based on current branding.
15 High-Fidelity UI designs were created
Went with an icon based
category selection to help
the user easily navigate
visually
After testing out multiple layouts, It eventually led me to a Bento Box configuration. Since I had the company I would partner with in mind, I could access their branding. The Bento Box configuration to me needed to have circular attributes that would tie into Whole Foods design pieces.
Low-Fidelity Wireframes
Once the flow diagram was established, I started creating the low-fidelity wire frames of the main flows.
Switched to one item stack across, added additional allergy information for each item
Changed to one large icon with a gradient background
Removed Logo and Date, brought Categories to the top and elongated the columns
Changed to 3 sections giving the user more ability to see food options on one screen
Flow Diagram
To outline the necessary functionality I created a simple flow diagram of the main tasks the user can do. One of the flows is shown below.
Repeat Until List
Is Complete
Verify List
Drag “Item” Onto
Created List
Drag “Item” Onto
Created List
Say “item Name”
Wrong “Item” Listed
Delete “Item”
Use “Search”
Function
Locate “Item”
Export List
Choose Contact
Choose Grocery
Location
Send
Send
Add to List
Voice Command
Successful
Voice Command
Successful
Conditions Not Met
Voice Command
Successful
Conditions Met
Tap & Hold “Item”
From Recipes Menu
Tap & Hold “Item”
from Coupons Menu
Say “item Name”
Say “Create List”
Say “Sous”
Time to start designing!
Once I went through all of my research data, it was time to sketch out the first flows and the initial low fidelity wire frames.
Personas
I created two personas based on the main two types of users for the app, the mother of the house hold and first time home buyer.
Goals
Know what items are currently in the refrigerator
Find coupons for food I prepare frequently
Be able to search possible recipes with the items in my possession.
Frustrations
Not knowing if I have all the necessary ingredients for a meal
Having to search for coupons in the paper or online when I don’t have time too
Mother of 3
Gloria Hillsdale
Falling back on the usual meal because of frequent buying patterns and knowledge of dish
As a mother of 3 kids I am mostly responsible for the creation of the family meals. I am a working professional along with loving wife. Time can be a crunch and ease of meal creation is always a must in my household. When having to cook for 5 people the amount of ingredients I have are essential for creation of desired meals. Gloria is looking for ease and access to meals based on what she is in possession of.
About Gloria
Age: 49
College: UNC
Location: Charlotte, NC
Goals
To have the ability to send a grocery list directly to my local store from my refrigerator
To have saved recipes that let me know if ingrediants are missing
To know if my food is close to expiration or expired
Frustrations
You have to search your refrigerator for what you are out of
You have to search recipes one by one, I want a list that is in one place
I like to cook but don’t remember if it was last Monday or Wednesday. I want to know where my food is on the expiration scale.
Kelly Parker
1st Time Home Owner
About Kelly
As a young professional and tech driven millennial Kelly has almost all of his day to day life connected. Growing up in the internet age he understands the ease of being connected and how it can make processes move faster by trimming time off his day. He is looking for any piece of SMART equipment that can help stream line is life by removing laborious routines.
Age: 33
College: UC Davis
Location: Hermosa Beach, CA
“As a mother of 3, 2 teens, it would be great to see what meals I could make with the items I have in the refrigerator without relying on the same ones I make constantly.”
“I am dialed in on all my tech connections for my day to day life. I really want to be able to see what I am out of in my refrigerator and then send a list directly to my local grocery ”
Initial Research Shows
Appliance companies are now making predominatly SMART versions of there products. Customers almost expect connectivity to there new purchases that seamlessly help there day to day experiences. There is an opening for a SMART refrigerator creator partnership with a major grocery chain. They could corner the market with online grocery purchasing from one’s home.
I conducted a quick survey of 31 people who were asked if they purchased a new smart refrigerator what would be the most important capabilities with a connected food app.
Recipe search option with ingredients in refrigerator
Ability to send grocery list directly to local store
Inputting a list of all your items
25 %
Food expiring notification
12 %
30 %
Descriptors of allergens within all food items
Notable comments from Survey
13 %
23 %
User Survey
What would be the ideal capabilities of a new smart refrigerator?
Is this still good? Did I make this last Tues or was is it Thurs? The constant battle.
Natalie
I want a list of recipes I can make with the ingredients I have in the fridge.
Denise
It would be awesome to see coupons pop up of food that I eat regularly.
Tracy
Competitive Analysis
I analyzed 3 popular apps in the grocery space - looking at there capabilities within purchasing, frequent orders and recipe creation. Breaking down the positive and negative aspects of all three I have identified there is a place for Sous in the smart refrigerator market.
The Good
All three apps let customers create orders for a grocery pick up. Frequent item purchase notification at pre check out populate.
Problems From comments
App 1
The Bad
Grocery store app lacks the capability to search by recipe that populates the ingredients (App 1, App 2, App3) Direct connection from refrigerator to Grocer does not exist in this space (App 1, App 2, App 3) Current list of in house inventory cannot correlate with recipe creation showing missing ingredients. ( App 1, App2, App 3)
App 2
App 3
I want to know if my food has expired without playing a dangerous guessing game.
Claire
My smart fridge should send my created grocery list directly to my store.
Robert
Why can’t I look for a recipe and then know if I have all the ingredients without searching?
Walker
Projected Sales of Smart Refrigerators
200k
150k
100K
50K
2024
2025
2026
2027
2028
2029
2030
94k
105.1k
117.6k
131.5k
147.2k
164.8k
184.4k
Market Research
The Claim
Refrigerators are in 99.2% of households in the US with 15 million purchased in 2024 alone. 21% of Americans own smart equipment and 3% of them own a smart refrigerator, that is 2.08 million Americans. The projected growth of refrigerators is 6% while smart refrigerator growth is projected at 11.9%. Every 30 days, 2 in 10,19% of people order groceries online. One of the outcomes of the COVID pandemic is the increase of people who cook, along with the desire for inter connectivity among devices.
The Problem
With the amount of appliance companies that produce refrigerators, only 2, are creating SMART ones. People all over the globe are constantly trying to stream line all processes in there day to day life. With over 248 million US users, Amazon has entered almost everyone's livelihood. Of the 248 million users, 98 million use Amazon once a month. The sole purpose of a SMART refrigerator should be food. How much longer is it safe to eat, what can I make with the ingredients I have, the ability to create grocery lists, and send them to my local store for pickup.With Amazon purchasing Whole Foods, a partnership should be created to propel smart refrigerators to the next level of consumer purchasing.
SOUS
An efficient way for customers to create grocery lists, monitor food inventory, have up to date food expiration's and current coupons from Whole Food’s. Users will be able to access saved and community favorite recipes along with coupons that are directly linked to customers saved recipes. Creating updates for guided creation and consumer purchasing. Grocery lists can be instantly sent to customers local Whole Foods location for timely pick up.
Durham, NC
Where
What
Native Stationary / Mobile App
Catergory
Utility and Food
Portfolio Project
Why
Designer, Researcher
Role
Oct 2024 - Nov 2024
When
Why I made this project
As a house hold we cook almost daily and go to the grocery store at least once a week. Leftovers that are placed in the refrigerator aren’t dated so questions of spoilage persist constantly. How long has this or that been in the fridge which make us raise and eye. We as a family do seem to cook the same meals, with discussions of trying to find new recipes. The goal was to create a smart refrigerator that was geared completely around food. Striped down to the core of a kitchen.
sous
