Modernised a multi-platform online marketplace, connecting 7M Australians to buy and sell locally.
Online classifieds marketplace
connecting 1 in 3 Australians
to buy and sell locally.
PART ONE
PROJECT OVERVIEW
Gumtree is an online classifieds marketplace, connecting 1 in 3 Australians (7 million) to buy and sell locally. The community has 2.5 million active listings across hundreds of categories. Our mission is to build a sustainable culture where people share more and waste less.
Cars & Vehicles is one of the largest categories, with 500,000 active listings and 30,000 new car ads each week.
Client
Gumtree
Role
UX Researcher
UX (Interaction) Designer
UI (Visual) Designer
Responsibilities
User research
Competitive audits
Ideation workshops
User flows & info architecture
Low fidelity wireframing
Prototyping
High fidelity UI mockups
Critique presentations
Usability testing
Design systems
Accessibility
PROJECT OVERVIEW
Redefine the SYI flow to improve the experience of selling a car online. Provide an easy, efficient and frictionless way for sellers to get the best possible value for their car.
Business objective: increase conversion rate and decrease drop-off rate.
01
Minimise the input required for an ad
02
Guide inexperienced sellers through the process
03
Modernise UI design across apps and website
04
Ensure cross-platform consistency
PROJECT OVERVIEW
I approached this design challenge with two different types of thinking:
.png)
PART TWO
UNDERSTANDING THE USER
I conducted generative research with Gumtree users to better understand their needs and pain points in the existing flow.
Study type
Moderated usability study
Location
Australia wide | Remote
Participants
5 people
Length
60 minutes each
UNDERSTANDING THE USER
User testing results were synthesised into actionable insights. This ensured that all design decisions were human centered and based on real quantitative/qualitative user data.
View more insights on Miro.
I wish there wasn’t a max limit of 10 photos. Buyers want to see all the different angles, details and imperfections on a vehicle.
Frustrated car enthusiast
I’ve never sold a car before so I don’t know what some of these fields mean. I would need to ask my husband about it.
Inexperienced car seller
Why is everything on this page blue instead of green? It’s not very on-brand for Gumtree.. I feel like I’m on [competitor].
Confused dualist user
4/5 users had a positive impression of the car rego tool.
“I think it’s great how you can enter your car rego and have most details pre-filled”
“I prefer having the license plate entry at the top, so it can prefill as many values as possible”
5/5 users want to post more than 10 photos when selling a car.
“I create my own split image photos so I can show more pics without paying extra”
“I want at least one image of each body panel, interior, engine, etc ... which is way more than 10 photos.”
4/5 users prefer having the description box at the end.
“I want to answer all the other questions first so I don’t have to repeat myself twice”
“I think a prompt would be helpful for people who know know much about the car they’re selling”
.png)
UNDERSTANDING THE USER
Mapping the path taken by a typical user to complete their task from start to finish helped me anticipate user needs at each step as they interact with my product.
UNDERSTANDING THE USER
Fictional personas were built using data gathered from user research interviews. Their goals and characteristics represent the needs of a larger group of users. This helped me build empathy, identify patterns of behaviour, stress-test designs and humanise user groups.
Problem statement 01
Natalie is a car novice who needs a simple way to advertise her car online because they don’t know much about cars and have never sold one before.
Problem statement 02
Matthew is a car enthusiast who needs to sell his current car for a good price because the funds will go towards their new car.
.png)
.png)
UNDERSTANDING THE USER
I created a journey map to analyse the touchpoints between the user and the product. This helped me empathise with the user, highlight frustrations and improvement opportunities.
.png)
PART THREE
STARTING THE DESIGN
The main goal of this session is to create safe space to spark innovation and draw out creativity across everyone in the cross-functional team.
.png)
STARTING THE DESIGN
I reviewed the foundational UX laws - a series of best practices for building user interfaces. Using psychology in design helped shed light on user expectations, improving the overall user experience.
Fitt’s Law
Large buttons placed in the thumb zone ensure users can quickly, easily and accurately access major functions
Hick’s Law
Highlight compulsory fields to avoid overwhelming users, and place optional fields in separate location
Jakob’s Law
Use familiar UI patterns for input fields such as dropdowns, error states, etc to leverage existing mental models
Von Restorff Effect
The distinct Gumtree brand colour (green) guides users through each step of the core task flow
Zeigarnik Effect
Stepper bars at the top provide a clear indication of progress to motivate users to complete tasks
Gestalt Principles
STARTING THE DESIGN
I organised all content from the Sell Your Item flow into a sitemap. This provided a clear structure and source of truth to ensure a consistent experience across all platforms and devices.
.png)
STARTING THE DESIGN
I created wireframes in Figma to define the core user flow, outline the basic structure of the app and organise content blocks in a logical way.
.png)
STARTING THE DESIGN
I presented draft designs to my cross-functional team for feedback. By inviting others to have a voice in the design process, I can incorporate their unique specialist knowledge and catch mistakes early.
.png)
STARTING THE DESIGN
I conducted a usability study to assess how easy it was for users to complete core tasks in the design. Study results were analysed and insights were used to iterate on the designs.
Study type
Unmoderated usability study
Location
Australia wide | Remote
Participants
5 people
Length
30 minutes each
.png)
STARTING THE DESIGN
Research data and observations from the usability study were organised into related groups. An affinity diagram helped identify common themes and patterns to form actionable insights.
STARTING THE DESIGN
Users thought the optional car details accordion made the form too long. Their preference is to branch out to a second (optional) screen, then return to the main screen when finished.
Users noticed that the Gumtree Cars UI (buttons, icons, links) was blue instead of the standard Gumtree green. One user said that she felt like she was on the [competitor]’s website.
Users thought it was a hassle and repetitive to input their contact information for every ad. It was suggested that contact details should be linked to their Gumtree account and prefilled each time.
PART FOUR
.png)
PROJECT OVERVIEW
Static, high-fidelity mockups were produced in Figma using foundational elements of visual design such as typography, colour and iconography. These resemble the look and feel of the final product.
.png)
Quickstart the ad with prefilled car details from external data sources to save time.
.png)
.png)
Visually confirm the details before the data is populated. If the lookup fails, there’s always a manual workaround
.png)
A single form contains all the details needed for a successful ad. Tips and tricks help the users along their way.
.png)
Detail oriented users can give their ad an edge by filling out the optional fields.
.png)
.png)
PROJECT OVERVIEW
Creating desktop mockups was an effective way to explore the brand’s visual identity through colour, typography and imagery on a large screen.
Visually confirm the details before the data is populated. If the lookup fails, there’s always a manual workaround
.png)
A single form contains all the details needed for a successful ad. Tips and tricks help the users along their way.
.png)
Detail oriented users can give their ad an edge by filling out the optional fields.
.png)
.png)
FINALISING THE DESIGN
Specifications such as brand guidelines, visual styles and user interface elements were established. This ensures consistency, reinforces brand identity and increases efficiency throughout the design process.
.png)
FINALISING THE DESIGN
Products and features that are created for people with disabilities often end up helping everyone. Designing for accessibility helped me consider all users’ journeys, keeping their permanent, temporary or situational disabilities in mind.
Colour contrast
Current buttons on the Gumtree website and apps do not pass the contrast requirement. My designs use a darker shade of the brand colour green, to ensure it follows the WCAG.
Landmarks
Navigation bars, search boxes, and footers are used to map out regions of the interface. Landmarks are used by assistive technology to provide cues for navigation, allowing users to efficiently move around the site.
Responsive design
Users may access the website from a variety of devices with different sizes. When users zoom in or increase the font size, the rest of the page will automatically resize or rearrange elements to fit.
PART FIVE
GOING FORWARD
I took sole ownership and designed an end-to-end motors seller experience for Gumtree Cars. Collaborating with a cross-functional team ensured customer needs, technical constraints and business objectives were met.
.png)
