UX/UI Design.
The Problem
Often households such as couples, families and the elderly forget that they are running out of certain groceries or that a member of their household has used up a certain item. While people are shopping they forget certain grocery items.
​
Opportunity
Make life easier. Less time spent grocery shopping by reducing the number
of times visiting a grocery store each week. Reduce a consumer's stress during the grocery shopping experience by shopping when store and travel traffic is light.
MyList iOS Application
Case Study
Created Using
Sketch, InVision, Miro, Trello, Adobe Illustrator & Photoshop.
User Experience Design Process
Competitor Analysis
Out of Milk
Focus
Simple, easy to use shopping list App.
Strengths
-
Adding items in the search field works with prediction function,
and also suggests similar items. -
Items are automatically categorised & colour coded.
-
Easy to add another person to share lists with.
-
Can check off items with one click.
-
Can keep shopping list screen awake.
-
To do list.
​
Weaknesses
-
Barcode scanner does not work in Australian market.
​
​
Our Groceries
Focus
Sharing a shopping list within your household.
​
Strengths
-
3 step sign-up process.
-
Barcode scanner works on Australian products.
-
Easy to delete items by swiping left.
-
Tap on items to check them off the list.
​
Weaknesses
-
Search function not strong, not many predictive suggestions.
-
Not very polished.
-
No colour coded categories.
​
​
Woolworths
Focus
Detailed and smart, online grocery shopping. Recipes.
​
Strengths
-
Adding items in the search field works with predictive
suggestion function. -
Include recent searches and popular searches.
-
Search results can be sorted by Relevance, Price, A to Z.
-
Barcode scanner that works.
-
Items and list can be sorted by Aisle, Price, Special, A to Z.
-
Grocery items are shown if they are in stock.
​
Weaknesses
-
The check box to tick-off the item on the grocery list is
very small, it’s hard for the user. -
No total cost of your groceries in your grocery list.
​
​
Coles
Focus
Clean easy to use, online grocery shopping. Fly Buys.
​
Strengths
-
Adding items in the search field works with a simple
suggestion function. -
Swipe right to delete an item.
-
App can integrate with Siri on iOS.
-
Shopping list can be shared by Message, Email, WhatsApp, Facebook etc.
-
Barcode scanner that works.
​
Weaknesses
-
There is no way you can filter your grocery item search results.
-
At the top right of the screen, part of the UI is light blue on
top of red which really hurts Users eyes. -
No total cost of your groceries in your grocery list.
-
No way you can sort your grocery list.
Card Sorting & Affinity Map
I conducted quantitative research through an online survey. From the 40 respondents of this survey, I was able to synthesise this information and gain a number of valuable insights.
​
Key Survey Results
​
-
40% of people surveyed have frequently forgot to buy groceries.
-
70% said they run out of certain groceries each week.
-
83% use a shopping list and 58% of these people share their list.
-
70% of people surveyed don't use an App to assist them.
​
After analysis of the survey results, interviews, affinity and empathy mapping I generated the below primary persona.
Introducing, Hannah Dawson, is a time-poor working professional who prefers to socialise on the weekends. She doesn't have time to visit many supermarkets to buy groceries.
Empathy Map
Customer Journey Map
All of the below wireframes were designed using Sketch and Adobe Illustrator.
Wireframes
During the testing phase, I gave my Users 12 tasks to run through
using a Low-Fidelity Prototype of the App:
-
Sign-up as a full User via Facebook.
-
Set your local store as Warriewood.
-
Add 500g of Tasty Cheese to Hannah's List.
-
Search for Tomato Sauce.
-
Filter search results so that Tomato Sauce is listed at the top.
-
Add Tomato Sauce to Hannahs List.
-
Sort List by quantity.
-
See how far and busy it is to drive to Woolworths Warriewood.
-
Set a reminder to buy milk on the 14th of January.
-
Scan a barcode and add the item to Hannah's List.
-
Synch Hannahs List.
-
Navigate to where the Healthy Eating Meter is.
Feedback Usability Test 1
-
Label icons so that they are more clear.
-
The User liked the reminder function and it was easy
-
to set a date for the Reminder.
-
In two User tests, when using the Scan feature,
the user clicked on the close button accidentally.
Feedback Usability Test 2
-
Good starting point, has so much potential.
-
Set my local store icon wasn’t clear enough and there was a bit of hesitation.
-
The Reminder function was the easiest to navigate around.
-
When the User wanted to Add an Item they first tried searching and missed the Add an Item button.
-
Thought that the Healthy Eating Meter was a nice feature.
​
​
Feedback Usability Test 3
-
I need more time to be familiar with this App.
-
Since I usually buy the same groceries from week to week, I like that you are able to save the list again and re-use it.
-
During the Usability Testing process, Users would often click anywhere rather than read and think what buttons they should press, this could be due to that they were in a hurry.
-
Users were not sure what was the best way to Add items to a list.
-
Add Item button at the bottom of the list was often overlooked.
-
Add a “Home” button so that the User can easily return to their current List.
Branding
Design Library
High-fidelity Prototype
​
Based on insights gained from User Testing during the final prototyping phase I implemented the following:
​
-
Improved navigation based on User Testing feedback.
​
-
User can return to Active List at anytime by clicking on the “MyList” logo at the top right.
​
-
Welcome Tour, highlights the functionality educating the User and enabling the User to learn the App in a shorter time frame.
​
-
Added a “Back” button in a uniform position, and removed the “Close” text button as it wasn’t needed with the introduction of the “MyList” home button in the top navigation area.
​
-
Colour coded the grocery items depending on which of the 5 main food groups they belong to.
​
-
Re-worded the top Search bar to make it more clear what it’s purpose is – to Search then Add Item.
