ERMI ISAIS
  • WORK
    • Justbooked
    • Skye Mastercard
  • ABOUT
  • WRITING
  • LINKEDIN
Website

Q-Tracker

A real-time booking tool built during COVID-19 to help customers plan ahead before they leave their homes to avoid busy shopping periods and shop safely.
Q-Tracker

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 across DIVVY and Woolworths to develop the UX/UI design and participated in usability testing through to deployment.

Solving the Problem

PROBLEM

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

SOLUTION

Provide 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

Concept 1 screen
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 emails were sent, they would be out of date.

Concept 2 screen
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 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.

Concept 2 screen
Above: Iteration 2 – Search screen with Safe Shopper branding

ITERATION 3 – FEATURES

As Woolworths was now the focus for launch, the below iterations were made based on internal and external feedback:
  • Top nav – Remove this and build the tool as an iframe within the Woolworths website, allowing customers to access other shopping information
  • Branding – Apply Woolworths branding to create a seamless experience
  • Card list – Add Pick Up, Delivery buttons to help 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

Key Deliverables

Developing a Brand Name

Vector

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

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.

UI Design

Above: Justbooked homepage UI design

INTERACTIVE PROTOTYPE

To 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.
Prototype
Tip: Install Figma to view prototype

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.

RECOMMENDATIONS

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

Like my work?

Get in touch
CONNECT WITH ME
© COPYRIGHT 2017. ALL RIGHTS RESERVED.
  • WORK
    • Justbooked
    • Skye Mastercard
  • ABOUT
  • WRITING
  • LINKEDIN