Overview
CHALLENGEDevelop a booking tool that helps customers shop safely as a rapid response to COVID-19, deploy in one week and iterate the product as and when government rules change.
|
ROLECollaborated with UX/UI, tech and product teams across DIVVY and Woolworths to develop the UX/UI design and participated in usability testing through to deployment.
|
Solving the Problem
PROBLEMFrom March to June 2020, NSW and other states, experienced a stage 2 "lockdown" which involved confining people to their homes, limiting opening hours to shop to reduce human contact and the spread of the corona virus. This resulted in increased stress and panic buying from shoppers.
|
SOLUTIONProvide a tool to help customers better plan their shopping trip so they can stay safe, save time, remain "socially distanced" while shopping, reduce stress and feel empowered to make informed decisions before leaving their homes to shop.
|
Finding a Solution
Above: Iteration 1 – Search screen with white labelled "Australia" brand placeholder
|
ITERATION 1 – FEATURESTo help customers understand the "busy-ness" of each store so they can shop "socially distanced", these features were added:
|
Customer Feedback Customers needed more information about Wait times and were confused by Store queues ie. Checkout queue or outdoor store queue? A single, grey colour for the map pins made it hard to quickly scan different retailers. Rapidly changing COVID-19 updates meant as soon as emails were sent, they would be out of date.
|
Above: Iteration 2 – Search screen with Safe Shopper branding
|
ITERATION 2 – FEATURESBased on customer and client feedback, I mocked a version to include potential retailers in future phases and how this may look like. The below iterations were made for concept purposes:
|
Stakeholder FeedbackTo test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By narrowing the focus and now building the tool within the Woolworths website meant teams could focus testing and collate customer feedback for the single site and gather more accurate data.
|
Above: Iteration 2 – Search screen with Safe Shopper branding
|
ITERATION 3 – FEATURESAs Woolworths was now the focus for launch, the below iterations were made based on internal and external feedback:
|
Key Deliverables
Developing a Brand Name
SAFE SHOPPER LOGOBased on stakeholder feedback, Safe Shopper was developed as the proposed brand name to convey "safe shopping". I applied the new brand colours across all UI screens for desktop and mobile, then briefed the front end dev to apply the CSS.
|
Q-TRACKER LOGOFurther feedback from customer focus groups resulted in the product name changing from Safe Shopper to Q-Tracker to provide longevity after COVID-19 has ended, as Safe Shopper was originally chosen as it related to "social distancing" and shopping safely during COVID-19.
|
UI Design
|
Above: Justbooked homepage UI design
|
INTERACTIVE PROTOTYPETo ensure a seamless experience between the Q-Tracker tool and the website, I applied all Woolworths branding. I mocked various flows and led a walk through with key stakeholders to ensure stakeholder buy-in and led a developer handover so all teams could understand the functionality and the experience I designed at each iteration stage. Click on the tiles to view.
|
Outcome + Results
RESULTSQ-Tracker launched in June 2020 via the Woolworths website and has attracted more than 100,000 users as of August 2020.
|
INSIGHTSWorking in a small, core project team allowed us to validate client and customer feedback and iterate rapidly. Awareness and acceptance that COVID-19 rules were constantly changing kept us flexible and able to adapt to customer needs and government laws.
|
RECOMMENDATIONSContinue to collate feedback via the Feedback form and review data on which features customers find most useful to help them shop safely. For regular users, I'd recommend a 'Favourite Store' option to save time entering a new search every time they visit the site.
|