Overview

CHALLENGE

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

ROLE

Collaborated with UX/UI, tech and product teams at DIVVY and Woolworths to develop the UX/UI design and participated in usability testing through to product launch.

Solving the Problem

PROBLEM

From March to June 2020, NSW and other Australian states, experienced a stage 2 "lockdown" which involved confining people to their homes, limiting opening hours for people to shop to reduce human contact and the spread of the corona virus. This resulted in increased stress and panic buying from shoppers.

SOLUTION

Provide a tool to help customers better plan their shopping trip so they can stay safe, save time, remain "socially distanced" (1.5m distance rule), while shopping, to reduce stress and feel empowered to make informed decisions before they leave their homes to shop.

Finding a Solution

Above: Iteration 1 – Search screen with white labelled "Australia" brand placeholder

ITERATION 1 – FEATURES

To help customers understand the "busy-ness" of each store so they can shop "socially distanced", these features were added:

• Search – by suburb
• Sort – Search results by Least crowds and Distance
• Top nav – Important information, How we can help, Donate
• Card list – Store queue, Wait times, other retailers, opening hours
• Card detail – Store image, call store, map directions
• Map – Pin locator per store
• Subscribe – Receive COVID-19 updates via email
• Footer – About, Contact, FAQ, T&Cs, Privacy, Social media

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 government announcement emails were sent, they would be out of date. Customers needed real-time data to make safe and informed decisions before they leave their homes to shop in person.

---

Above: Iteration 2 – Search screen with Safe Shopper branding

ITERATION 2 – FEATURES

Based 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:

• Card list – Add a key to explain the store queue colours and wait times
• Card detail – Remove call store to reduce customer support teams being inundated with enquiries 
• Map – Colour code the map pins for each retailer and add a key to help customers find their desired store easier
• Subscribe – Remove this and include a link to a COVID-19 landing page via Important Information in the top nav, allowing customers to check this page for regular updates

Stakeholder Feedback

To test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By choosing one retailer and now building the tool within the Woolworths website meant teams could focus their testing and collate customer feedback for the single site to gather more accurate data.

---

Above: Iteration 3 – Search screen with Woolworths Q-Tracker branding

ITERATION 3 – FEATURES

As Woolworths was now the main retailer for launch, the below iterations were made based on internal and external feedback:

• Top menu – Remove this and build it as an iframe within the Woolworths website to allow customers to access other shopping information
• Branding – Apply Woolworths branding to create a seamless brand experience
• Card list – Add Pick Up, Delivery buttons as primary CTAs (calls to action) to assist with contactless shopping
• Add Updated 5 min ago to reflect real-time information
• ​Map – Remove key and other retailer's pins
• Footer – Remove partnerships and other urls

Developing a Brand Name

SAFE SHOPPER LOGO

Based 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 LOGO

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

Final Solution

Q-TRACKER

Working closely with the DIVVY and Woolworths teams, the Q-Tracker tool was designed and built in 8 weeks. Continuous updates based on changing covid rules, usability testing and research meant we had to make changes every week. The Q-Tracker tool is live on the Woolworths Online website.

q-tracker

Outcome + Results

RESULTS

Q-Tracker launched in June 2020 via the Woolworths website and has attracted more than 100,000 users as of August 2020. 

INSIGHTS

Working 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 to make realtime changes to the site.

RECOMMENDATIONS

Continue to collate feedback via the Feedback form and review data based on which features customers find most useful to help them shop safely. For regular users, I'd recommend a 'Favourite Store' option that will auto-display real-time data when they visit the site and push notifications to alert them of quiet shopping periods.

Like my work?

Get in touch