ANODA Discuss your product

Car wash subscriptions, made for the bay

Pulse’s app lets drivers buy a wash, start a self-serve bay and manage a Wash Club membership.We designed it from zero.

Pulse home: Add Vehicle and Self-Serve, and a car card with its favourite wash, plate 8CPP419, its Wash Club plan and a Wash button; The car’s page: photo and plate, favourite wash, the Wash Club plan with its expiry date, wash history, vouchers and the Wash My Car slider
Every car
by its plate several cars and extra drivers on one account
84
screens one design for iOS and Android
Wash Club
you can pause frequency, plan type, pause and cancel, all dated

Pulse is the cloud platform car-wash owners run their sites on: memberships, vouchers, loyalty, kiosks and self-serve bays. Its maker, Direct Internet Australia, had the operator side covered; the people washing their cars had no app of their own. We designed that mobile app from zero, one cross-platform design in the existing Pulse colours, from competitor research to a Zeplin handoff.

What a driver does with a car-wash app

From the first car on the account to the membership that pays for the next wash:

  1. Start

    • Sign up and verify
    • Add a car by its plate
    • Choose a plan

  2. My car

    • The car’s own page
    • Favourite wash
    • Extra drivers

  3. Wash

    • Find a site
    • Equipment and wash
    • Pay or use the plan

  4. Self-serve

    • The bay’s code
    • Paid minutes
    • More time

  5. Wash Club

    • Frequency
    • Plan type
    • Pause or cancel

  6. Account

    • Wash history
    • Vouchers and referrals
    • Wallet and profile
Speed Certainty
A couple of taps at the bay, and still always clear which car, which site and what it costs.
One account Many cars
Each car keeps its own plan, favourite wash and drivers, under one login and one wallet.
Recurring billing Freedom to leave
Pause and cancel are easy to find, and each says when it takes effect.

One car, and everything it’s entitled to

Found
With several cars on one account, a driver needed to see at a glance what this car has: its plan, its favourite wash, its history and its vouchers.
Decided
A page per car: the photo and plate on top, then the favourite wash, the Wash Club plan with its expiry date, history and vouchers, and a Wash My Car slider fixed at the bottom.
For the user
At the bay, the driver checks the plate in the photo and slides to wash, with no chance of paying for the other car.
The car’s page: photo with plate 8CPP419, No Favourite Wash, the Unlimited Express Wash plan expiring July 25, 2024, Wash History, three vouchers and the Wash My Car slider
After: a car with an active Wash Club plan

  1. Which car

    Its photo and plate, the first thing checked before paying.

  2. Its favourite

    The wash it usually gets, set once and bought again in a tap.

  3. Its plan

    The Wash Club plan on this car and when it runs out.

  4. What it has

    Its wash history and the vouchers it can use.

  5. The wash

    A slider, not a button: hard to trigger by accident with wet hands.

How the work progressed

Three milestones, each approved before the next: research and flows, then wireframes and a visual direction, then the UI and everything the developers needed.

  1. Discovery

    What drivers already put up with in car-wash apps

    Artifact Competitor research on Washify and IMO Car Wash, area by area, with what Pulse should do differently

    Competitor research board: Washify and IMO Car Wash compared on sign-up and overall features, with pros, cons, annotated screenshots and a summary column of what to apply

  2. User Flow

    Every path a driver takes, with its errors, before any screen was drawn

    Artifact User flows for sign-up, the car, washes, Wash Club, self-serve, referrals and the profile

    Part of the home user flow: the home page, offers, adding a vehicle with its two errors, the car’s page and the start of Wash My Car, with each screen’s content in dashed boxes

  3. Wireframes

    What each screen holds, in grey, before colour

    Artifact Mobile wireframes for every flow

    Eight grey wireframes of Change Password: empty, the missing-data error, typing, a wrong password, a weak password, a wrong format and passwords that don’t match

  4. Moodboards

    How a car-wash app can look clean without looking cold

    Artifact A moodboard, then three styles on the same key screens; the client chose the third

    Two moodboards: white background with grey cards and middle rounding, and white with grey cards, heavy rounding and slide buttons, each over reference screens

  5. UI & Design System

    Every screen and state, built from one set of parts

    Artifact The final UI, a UI kit and a component library

    UI kit, buttons: the Wash My Car slider in its default, selected and disabled states, and text, tertiary and secondary buttons in their states

  6. Delivery

    What the client’s developers needed to build it without guessing

    Artifact A screen map, a clickable prototype and a Zeplin export

Every branch mapped before a screen was drawn

Found
A wash depends on things the app doesn’t control: a code typed from a machine, a payment, a membership that may or may not cover it.
Decided
Each flow was mapped end to end with its failures first: a wrong code, no time chosen, a change that waits for the next payment. Then everything hung off one menu.

  1. Starting a self-serve bay

    The four-digit code with its two errors, the minutes and their price, payment and the success screen; adding time follows the same path.

    Open the full map
    Self-serve user flow: enter the four-digit code with its two error states, then choose the time with its prices, payment and the success screen

  2. Managing Wash Club

    Joining, then changing the plan or its frequency and pausing to a date, each with its confirmation, a system error and the success message.

    Open the full map
    Wash Club user flow: joining if the driver isn’t a member, or managing the plan: change it, change the payment frequency or pause it, each with a confirmation, a system error and a success message
The side menu: Home selected, Profile, Activate Self-Serve, Wash History, Refer a friend, and Company Information at the bottom

One side menu for the rest

Home, profile, self-serve, wash history and referrals, with the company’s information at the bottom; the client chose it together with the third style.

  • Information architecture
  • User flows with every error
  • Mobile wireframes
  • A clickable prototype

Six jobs the app does

From the first car on the account to the membership that pays for the next wash.

A car, added by its plate

Found
Typing a plate on a phone at the bay is slow and easy to get wrong, and a wrong plate means a wash for the wrong car.
Decided
A photo of the car fills in the plate; the driver checks it, retakes it or types it by hand, and a wrong format is caught before it’s saved.
Add Licence Plate: the camera framing a plate, with Enter Licence Plate Manually
Licence Plate 8CPP419 filled in from the photo, with Retake and Save
Licence Plate field with 123 and the error Wrong format. Please try again.

The right wash at the right site

Found
Sites, equipment, wash tiers and add-ons: the driver had to know where and what before paying, not after.
Decided
Sites on a map and in a list by distance, the equipment first, then the wash with its price and add-ons, and a booked wash that can still be changed or cancelled.
Wash My Car: a map with site pins and a list of three sites with their distances
Wash My Car at one site: Tunnel or In-Bay Automatic, Basic Wash $5 selected, Ultimate Wash $10, add-ons and the slider with the total
Upcoming Wash: the site, In-Bay Automatic, Basic Wash selected, with Cancel, Save and a delete icon

A self-serve bay started from the phone

Found
At a self-serve bay the driver has a code on the machine, a timer that costs money, and nobody to ask when it fails.
Decided
Four boxes for the bay’s code, an error that says the code wasn’t found, the minutes with their prices, then the running bay with its time left and Add Time.
Activate Self-Serve: the four-digit code 1 2 3 4 entered, with Submit
Activate Self-Serve with the code boxes in red and the error We could not find such a code in the system
Bay 2 · Jet Wash: time options from 5 to 30 minutes with prices, 10 minutes for $10 selected
Activate Self-Serve with Bay 2 · Jet Wash running, a progress bar at 4 minutes and Add Time

A membership without surprise charges

Found
Recurring billing is where trust breaks: a change that bills twice or a cancel button no one can find turns into a support call.
Decided
The annual price next to the monthly one, every change confirmed with when it takes effect, a pause to a chosen date, and cancel one tap away with a way back.
Join Wash Club, Annually selected with -10%: Unlimited Express Wash $31.50 instead of $35 and Unlimited Express Wash & Vac $54 instead of $60 a month, with what each includes
Change Frequency dialog: This will become active when the next payment is due, with Cancel and Change
Pause Subscription with a calendar sheet, August 15, 2024 selected
Cancel Subscription dialog: cancelled plans that haven’t expired can be un-cancelled, with No, keep and Cancel

Several cars, several drivers

Found
A family car, a work car and a partner who drives both: every wash had to be tied to the right car and the right person.
Decided
Extra drivers added per car, a photo so each car is recognisable, a wash history across all cars with the plate on every entry, and vouchers with their terms.
Add Additional Driver: Liam Cooper and an Australian mobile number, with Save
Add photo: a photo of a white SUV with Retake and Save
Wash History: an upcoming wash and past washes with their site, date, price and licence plate, and Download Invoice (PDF)
Voucher details: 50% Off Ultimate Wash, promo code, expiry date, description, terms and a barcode

An account that stays out of the way

Found
Profile, cards and referrals are rarely opened, so they have to make sense the first time.
Decided
A short profile menu, a wallet with the main card marked, and a referral form with a link to copy.
Profile: Jane Cooper and Account Settings, My Wallet, Preferences and Terms & Conditions
My Wallet: a Mastercard Debit ending 3504 marked Main, with Add Card
Refer a Friend: name, email and plate filled in, Refer a Friend, and a referral link to copy

One kit for every purchase and every failure

Found
A wash, a bay’s minutes and a membership are three purchases; if each paid differently, drivers would hesitate at the one moment they shouldn’t.
Decided
One payment sheet wherever a driver pays, and a system screen for each failure the app can name, every one with a next step.

The same payment sheet wherever a driver pays

Apple Pay or a card, in the same place and order.

  • Payment Method sheet over the wash choice: Continue with ApplePay and Continue with card
    Buying a wash: After the wash and its add-ons.
  • The same Payment Method sheet over the self-serve time choice
    Self-serve minutes: After the time for the bay.

Drawn for the moments that go wrong

No signal, a server error or an outdated app: each screen says what happened and offers the next step.

  • Internet connection lost: Please check your internet connection, with Try Again
    No connection
  • Oops… Something went wrong. Please try again, with Try Again
    Something went wrong
  • Update sheet: New Update ver 1.0.1 with what’s new, Maybe Later and Update
    An update

What the developers received

The client’s team got a screen map, a clickable prototype, a UI kit and a Zeplin export at the end of the third milestone.

Screen map
Every screen and state in order, grouped by flow, with notes on the errors.
Clickable prototype
The main flows, clickable end to end.
UI kit
Colours, type, inputs, cards, pop-ups, navigation, icons and illustrations.
Zeplin export
Specs and assets, handed over in groups.

Flows in the handoff

  1. Moodboard and three UI style directions
  2. Wireframes: every branch of the driver app
  3. App UI: cars, washes, self-serve bays, Wash Club and account
  4. Screen map: every screen and state, grouped by flow
  5. Clickable prototype of the main flows
  6. UI kit: colours, type, components, icons and illustrations
Screen map of the company information section: the site map and list, a self-serve page, search with nothing found, and the contact form with its errors, linked by arrows with notes
Screen map: the company information section, from the site map to the contact form and its errors.
Three UI styles on the same four screens: green and black accents in Poppins, black accents in Urbanist, and more green with a floating button in Poppins
UI styles: three directions on the same key screens; the client chose the third.

Where the product ended up

A driver app designed from zero for Pulse’s car-wash platform: cars added by their plate, washes bought for the right car at the right site, self-serve bays started and extended from the phone, and a Wash Club membership people can change, pause or cancel on their own.

The client’s team took it into development.

screens in one design for iOS and Android
84
experts on the team
3
visual directions on the key screens
3

In the client's words

The design brings subscription management and the proposed wash visit into one mobile journey. We appreciated the attention to what a customer needs to see before, during and after a visit, with account controls kept in the same visual language.

Scott Familton Pulse

5.0

When a wash fails, will your customer know why?

At the bay, a declined card, a lost signal and a stuck machine all look like your brand’s fault. Pulse names the car and the site before every purchase and gives a wrong code, a lost connection and a server error their own screens. Send us your on-site flow; we’ll show you where it leaves people guessing.

Discuss your product Explore more case studies

What we brought to Pulse

The product

The work