UX/UI Design.

Title-Page_LR.jpg

The Problem

XXX.

Opportunity

XXX.

Launrdy Lizard iOS Application
 Case Study 

Created Using

Figma, Miro, Trello, Adobe Illustrator & Photoshop.

Competitor Analysis


Laundry Point

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.

 

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.

Card Sorting.jpg
Qual_1B.jpg
Qual_2.jpg

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.

Proto Persona.jpg
 
 
 

Empathy Map

Customer Journey Map_LR.jpg

Customer Journey Map

 
MyList-Wireframes1_LR.jpg

All of the below wireframes were designed using Sketch and Adobe Illustrator.

MyList-Wireframes3_LR.jpg
MyList-Wireframes2_LR.jpg

Wireframes

 

During the testing phase, I gave my Users 12 tasks to run through
using a Low-Fidelity Prototype of the App:

 

  1. Sign-up as a full User via Facebook.

  2. Set your local store as Warriewood.

  3. Add 500g of Tasty Cheese to Hannah's List.

  4. Search for Tomato Sauce.

  5. Filter search results so that Tomato Sauce is listed at the top.

  6. Add Tomato Sauce to Hannahs List.

  7. Sort List by quantity.

  8. See how far and busy it is to drive to Woolworths Warriewood.

  9. Set a reminder to buy milk on the 14th of January.

  10. Scan a barcode and add the item to Hannah's List.

  11. Synch Hannahs List.

  12. 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

 
Branding_LR.jpg

Design Library

Pattern Library_LR.jpg
 
 

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.