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

SOLUTION

Due to COVID-19 government laws being put in place, including opening hours being restricted through "Community hours" (allowing the elderly and essential workers to shop earlier than main trading hours) and potential lockdown laws to reduce the spread of infection, this resulted in increased stress and panic buying from shoppers.

Provide a tool to help customers better plan their shopping trip so they can stay safe, save time, "socially distance", reduce stress and feel empowered to make informed decisions before leaving their homes to shop.

Finding a Solution

Above: Iteration 1 – white labelled "Australian" brand

CONCEPT 1 – WHITE LABEL

Branding

Based on the existing Justbooked website, as no brand had been developed yet, I white labelled all UI screens. The first concept was an "Australian" brand with the objective to service all major retailers with visual references to the Woolworths branding by using green colours from their brand guidelines and neutral greys in a clean look and feel.

Functionality

By entering your postcode, customers can find their nearest store and sort by "least crowds" and shortest "distance." They can choose from different retailers

Customer Feedback

Customers needed more information about "wait times" and didn't understand what the red, amber and green colours represented. A single, grey colour for the map pins made it hard to quickly differentiate between the different retailers on the map. Rapidly changing COVID-19 updates made it too difficult to provide customers with a up-to date information.

---

Above: Iteration 2 – co-brand Woolworths with other major retailers

CONCEPT 2 – SAFE SHOPPER

Branding

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.

Functionality

Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. ​Insert copy here. Insert copy here. Insert copy here. Insert copy here. ​Insert copy here. Insert copy here. Insert copy here. Insert copy here. ​​

Customer Feedback

Customers needed more information about "wait times" and didn't understand what the red, amber and green colours represented. A single, grey colour for the map pins made it hard to quickly differentiate between the different retailers on the map. Rapidly changing COVID-19 updates made it too difficult to provide customers with a up-to date information.

---

Above: Iteration 3 – full Woolworths branding

CONCEPT 3 – Q-TRACKER

Branding

Based on further feedback from customer focus groups, the product name changed again as it need to remain generic and not be specifically be linked to 'safe shopping' in relation to COVID-19 rules. Q-Tracker was developed – a straightforward name that clearly explains the service it provides.

Functionality

Based on further feedback from customer focus groups, the product name changed again as it need to remain generic and not be specifically be linked to 'safe shopping' in relation to COVID-19 rules. Q-Tracker was developed – a straightforward name that clearly explains the service it provides.

Result

The brand needs to convey "safe shopping", include major retailers in the store search, including store images to help customers find the store entrance easily.

Feedback 1

Add customer feedback between each iteration.

Key Deliverables

Above: Desktop wireframes of the homepage – iteration 4 of 4

WIREFRAMES

Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. Insert copy here. ​

Developing a Brand Name

SAFE SHOPPER LOGO

The link icon conveys connecting users with the best parking deals. 'Justbooked' is straightforward and describes the service.

Q-TRACKER LOGO

Vector logos, shapes and illustrated scenes define the playful look and feel of the Justbooked brand.

Q-TRACKER LOGO

Creative direction of all social media templates to use bold colours, a distinct vector style to cut through user's news feeds and competitor's corporate blue and red branding.

VECTORS + COLOURS

Creative direction of all marketing collateral to maintain brand consistency across offline and offline communications.

UI Design

Above: Justbooked homepage UI design

INTERACTIVE PROTOTYPE

Once the Start and End Time had been removed from the wireframes, I mocked the UI design as an interactive prototype and led a final stakeholder walkthrough. I did a dev handover per user flow so the devs could apply the CSS at the same time I reskinned each flow and continued this process til all UI screens were done.

Prototype

Tip: Install Figma to view prototype

Next Steps

INSIGHTS

Based on validating client and customer feedback within quick turnaround times, both teams were able to iterate rapidly.

CHALLENGES

Due to the ongoing changes imposed by COVID-19 laws, the MVP had to adapt to these laws and on the minute changes to ensure the product remained viable.

RECOMMENDATIONS

Continue to iterate based on feedback 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 shop.

Like my work?

Get in touch