Homepage  |  Blog

Mistwash


Role
Product Designer (Freelance)
Category
Car washing service
Platform
Mobile (React)
Timeframe
2019


About
Mistwash, a startup from Dubai wants to change how you clean your car. They aim to be one of the most efficient mobile car wash providers in the region to offer a superior new technology with top notch quality: an automobile steam-cleaning system.

My role
As a Product Designer I took the responsabilty to create and revamp the user experience on mobile devices. Our mission was to build a react web application that works seamlessly on different screen sizes, serving both iOS and Android users.
Team
Dev, UX

Focus areas
  • Analysing
  • Wireframing
  • High-density design creation
  • Dev handover

Software
  • Pen & Paper
  • Sketch
  • Zeplin
  • Trello
  • Slack
  • Balsamiq



Problem


Customers
The main problem for customers was the (1) inconvenient and manual way to book a car wash from their mobile device and (2) keep track of the progress.

Until now, booking a car wash was processed over the phone by the CEO himself or by creating an user account which took time and effort on the mobile version of the website.
Business
From a business point of view, the main problem was the inability to scale the service and respond to market demand. The CEO distributed the incoming requests across his team himself by relying on inconvienent tools such as excel sheets. Also payment was processed manually through cash payment or a credit card reading device.


Research & Empathize


I usually begin my process by exhausting all existing knowledge resources (quantitative and qualitative data) and create a context to the problem space.

With this project there was limited to almost no access to data. 

  • No direct channel to speak to customers
  • No quantitative data
  • No possibility to do field studies (client in Dubai)
  • No other research-ish data

I had to rely on guidelines and specifications coming from the business owner and my partner who was in direct contact with the CEO and made onsite visits.


App scope


To solve both user and business problems we suggested to build two seperate web apps. (1) One customer facing (Order car wash, payment, status) and (2) one team facing (Order overview, status update, customer details, order dashboard).


Concepts

Since we also agreed to a tight deadline we started with mockups in Balsamiq to (a) define and get an overview of the functionality at every step of the user journey and (b) to receive feedback and consent from our stakeholder (CEO).



Screens & Functions

Customer web app
- Splashscreen
- Homescreen
- Car wash selection
- Customer details form
- Phone no. verification
- Payment
- Confirmation
Team web app
- Splashscreen
- Authenticate (Team signup)
- Phone no. verification
- Dashboard (Jobs listview)
- Job details



Designs

Designing a PWA has to comply with performance requirements and mobile web specific conditions. To make sure the experience stays slick and gets the highest scores in Lighthouse, we used Google Web Fonts and Material UI, a React components library that implement Google Material Design.

For a convenient user experience and in order to increase effectiveness of the car washing team members we planned to integrate Mobile Web features such as:

  • Installable Web Apps
  • Offline support
  • Mobile Web Payment integration
  • Phone Authentication
  • SMS support for Washing status
Some specific UX decisions I made for mobile web usability:

  • A sticky navbar (also Appbar) for navigation
  • Always visible CTA on the bottom for continuity
  • Populated form fields, autocomplete and autosuggest functionality (e.g. verification code from Messages)
  • Progress bar
  • Repeat selection and costs on payment page




Final Designs - Customer app



Final Designs - Team app




Current status


The apps are still in development and are expected to be live soon.

Looking back...


...on what could be improved I highlighted one particular topic at the beginning of this case study. One of the main points is having access to different kind of data sources to gather information (qualitative & quantitative). Being able to conduct ethnographic field studies, observe users in their natural environment creates a deep understanding of their needs, pain points and problems. This is one of my favorite activities in the exploration phase.



Thank you!



Say Hello!


You need support with a project of yours or just want to have a chat? Don’t hesitate to message me! Let’s grab a coffee together, let’s talk business...or about technical innovations, startups, design and human psychology.


Hit me up!


LinkedIn   |   Twitter   |   Medium   |   Xing
Copyright © 2019 Yusuf Algan

Mark