top of page

2020 UI AUIDIT

[SAINSBURY'S SMARTSHOP]

UI audit 1.png
UI audit exisiting flows.png
UI audit AB test.png

I recently went to Sainsbury’s in Nine Elms on a store visit to compare and document the SmartShop handset and mobile journeys. I noticed UI and behavioural inconsistencies between the Android and iOS app and handset journeys. So, it was clear that we needed to review the end to end journeys for each flow.

TASK OBJECTIVES

  1. To ensure native patterns are up to date with Google Material Design and Apple Human Interface guidelines

  2. To distinguish when to use native dialog / alert pop ups VS Sainsbury’s design system (LUNA) modal pop ups

  3. To align the experience, UI, content and messaging between app and handset

  4. To complete an audit of all icons and illustrations we us, so we can:

    • Create a list of requirements for new, instructive illustrations

    • Defining when to use Luna icons / New Illustrations / Emojis​

  5. To highlight future AB test ideas

PROGRESS​

PHASE 1

The "New customer happy path"
Completed 29th and 30th Jan 2020

​

PHASE 2

“Existing customer happy path" eg Log in
Not started - Planned to work on 9th March

 

PHASE 3

The "Unhappy paths"

Not started - Planned to work on 23rd March

​

After each phase analysis, we will talk through the findings and proposed changes with the PO’s and work with them to prioritise work based on the business objectives and KPIs.

EXISTING FLOW ANALYSIS​

Going through the flow, we grouped the iOS, Android and handset existing design screens for each section of the journey. We noted down the current problem, suggested fixes, progress status and aim to updated with thumbnails of the new designs.

THEMES​

We found common themes from the existing flow analysis task 

  • Copy review

  • UI inconsistencies – Out of date Luna styles / Luna vs Native

  • Icons and Illustrations

  • AB test ideas

  • Accessibility pain points

ACCESSIBILITY​

Alongside the UI audit, I worked with our Accessibility specialist to identify improvements that could be made to ensure our app was accessible. 

TOP 5 TAKE AWAYS​

  1. A prioritised list of design tasks with POs

  2. UI consistency document

  3. AB testing plans

  4. Icon and illustration audit

  5. A plan for design / build updates

NEXT STEPS​

  1. Flows analysis for Phase 2 and 3

  2. Run through the wall findings with the POs

  3. Work on a plan of action with PO’s for prioritising tasks

  4. Design updates

  5. Build updates

bottom of page