Wash+

My Role:

UX & Visual Designer

Project Type:

App Design

Deliverables:

User Research
Visual Identity
Visual Design
Wireframing
Prototyping & Testing

Year:
Year:

2023

The Problem

Car enthusiasts invest thousands into their vehicles yet often find it challenging to book trustworthy and professional detailing services that meet their expectations.

The Outcome

I designed a mobile app connecting car enthusiasts with professional detailers, helping them to easily compare and book comprehensive detailing services at a convenient time and place.

HIGHLIGHTS

A detailing app connecting car enthusiasts with professional detailers.

CONTEXT

What issues do car enthusiasts face when maintaining their vehicles?

COMPETITIVE ANALYSIS

How effective are existing car wash/detailing apps?

I downloaded a few of the top rated apps on the app store to evaluate. Existing apps were ok but not great. I found several problems during the user experience including payment issues, overload of information, confusing navigation and unappealing user interface design.

Image: Screenshots of popular car detailing / car wash apps from the App Store.

VISUAL IDENTITY

Developing a strong visual identity to appeal to my ideal users

From researching and gathering inspiration, to name generation, sketching, exploring colours and graphics. This stage of the process was crucial to unravelling a visual identity that appealed to my target audience.

Image: A moodboard of visual elements exploring the identity for the app's branding and visual design.

USER FLOW

I focused on designing the main user flow: signing up and booking a detailer

Image: A user flow indicating the process of signing up to the app and booking a detailer.

WIREFRAMES

Below I mapped out the user flow via mid-fidelity wireframes in Figma

Image: Wireframes showing some of the main screens of the user flow.

Image: Wireframes showing the complete user flow of booking a detailer.

TESTING AND ITERATIONS

Prototyping, Testing and Iterations

Once the mid-fidelity wireframes were complete, I created a prototype to test with potential users to help evaluate the effectiveness of my design decisions. Testing revealed areas for improvement across several key screens including button placement, removing breadcrumbs and highlighting influential information like reviews.

Image (left): Annotated wireframes critiquing the design.
Image (right): Testing the Figma prototype on a mobile device.

Slideshow: From mid-fidelity wireframes to hi-fidelity wireframes.

HI-FIDELITY WIREFRAMES

Following testing, I began designing the hi-fidelity wireframes

Image: Hi-fidelity wireframes of the final app design for Wash+.

Learnings &
what's next?

Results & Learnings

Results & Learnings

Positive feedback on final testing but still room to grow!

User feedback was positive on the visual design and functionality of the app. Yet, some users mentioned issues with pausing the reservation midway and returning. This would be something to look into next!

Find solutions if you get stuck

I used YouTube to help me understand best practices with complex component building techniques. This made my work flow more efficient and components more organised.

Don't rush the process

I missed out some vital screens during the sign up process which only came to light during testing. This could have been avoided had I spent more time ironing out the user flows, diving into more details.

Next project: