Back to projects
mobile app - back-office

iZclean

A mobile app that allows users to have their vehicles washed anywhere, at anytime.

CASE STUDY

6 min read

a 3d iphone mockup of a iZclean app screen

I. Context & Problem statement

General informations

For this project, i worked with Studiolabs, a digital studio, that entrusted me to have the role of UX/UI Designer. I was excited to work for iZclean because it was a great challenge to create a product for 3 kinds of specific users (clients, washers and administrators). Moreover, the experience with the product was a mix between digital and real life, so we had to define clear insights and progress step by step, to guarantee the success of the project !

image showing some two-wheeled vehicles parked in a street

The company

iZclean is a service connecting people who wants to have their two-wheleed vehicle washed, with people ready to perform those washes (called washer in the app).  For the moment, the service is only available in some Paris arrondissements. The goal is to test the market and the service itself before launching it in other french cities.  

The brief

iZclean wanted to have a mobile app to develop their service. The project was to offer a customized user experience for each user type, based on their expectations, motivations and pain points. For this project, we already have some insights thanks to the client. Indeed, he already launch the service on his website, which was functional since several months. This allow us to have data about the users and the concept. Moreover, it was pleasant to work with iZclean because the founder of the project was very invested and he understood the value of UX, which is not always the case when we work with clients.

The challenges

This project was really complex in terms of UX. As they are 3 kind of users for this product, each of these involves specific problematics, such as :

  • as a user, how can i feel reassured by entrusted a stranger to wash my vehicle ?
  • as a washer, what benefits i can get when i‚Äôm working for iZclean ?
  • as an administrator how can i manage clients, washers and my business easily and efficiently ?

II. Solution

Task flows

As the project was complex and implied several actors, the functional analysis made by the product manager and the client was extremely useful. It allows us to have a global view of the different features we had to design. In addition to this, we created 2 taskflows to highlight the two main features of the product.

graphic showing a task flow made for iZclean
Userflow for the user, showing the booking process for a service
graphic showing a task flow made for iZclean
Userflow for the WASHER, showing HOW HE CAN PERFORM A SERVICE

Functional Analysis & Wireframes

Thanks to these user flows and the functional analysis, we were ready to create the wireframes. The different features were divided into stories, each of them corresponding to an action the user can make in the app. For this project, those stories add to cover all the possible actions for the User, the Washer and the Admin.

This segmentation in ¬ę stories ¬Ľ allows :

  • a coherence between the functional analysis and the screens created
  • a better repartition of the work between the designers
  • an easy way to control the work done for the product manager
  • every team member to have a concrete view of the project progress
graphic showing the functional analysis process for iZclean
Graphic showing how the functional analysis is used to define the wireframes we have to design for the product.

The wireframes were a key issue of the project because it allows us to ensure that the various scenarios were intuitive and complete. Indeed, as the product contain a lot of different functionalities, it was easy to get lost or to forgot some points. Once again, thanks to the team and the client, we worked hard to create the better experience possible for each user type. At the end of this phase, we had created nearly 300 screens for the users, washers and administrators !

image showing some wireframes designed for the iZclean app

Graphic charter & UI Explorations

Once the wireframes were validated, we had to focus on the visual aspect of iZclean. Our first mission was to define a brand identity for the product. As the company was pretty young, it was important for us to develop graphic guidelines to have a global coherence between all the different supports. To do it, the lead designer and i, worked on some graphic charter suggestions and some UI styles, by taking into account the client's recommendations.

Wireframes screens used for the exploration

  • User - order confirmation screen
  • Washer - start the wash confirmation screen
wireframe screen used for the design exploration for iZclean
wireframe screen used for the design exploration for iZclean

Exploration n¬į1

image showing a graphic charter exploration for iZclean project
ui screen showing a design exploration for iZclean
ui screen showing a design exploration for iZclean

Exploration n¬į2

image showing a graphic charter exploration for iZclean project
ui screen showing a design exploration for iZclean
ui screen showing a design exploration for iZclean

Design System

After showing these explorations to the client, ¬†we finally choose the Exploration n¬į2. Following that, the Lead Designer has develop the foundations of the design system that we would use for the rest of the UI. Text styles, color palette and components were complete and very easy to use, indeed the Design system was extremely well set up so it was a real pleasure to use it ! We also develop it throughout the project by adding some more complex components corresponding to the needs of the interface.

image showing some components of the design system made for iZclean
preview of some of the design system's components

UI Design

The design system allowed us to build coherent and eye-catching interfaces. Our workflow was also faster than usual : as the wireframes were already pretty-detailed, we basically just had to replace the components of the Wireframes Design System we used, with the iZclean Design System ! All along the UI, we had iterate a lot with the product manager and the client to guarantee the quality of the interfaces designed.

Here is a selection of screens created for the user app :
  • Identification
  • Menu
  • Home
ui screen of the user app of iZclean project, showing the menu screen
ui screen of the user app of iZclean project, showing the homepage screen
  • Vehicle choice
  • Location selection
  • Service selection
ui screen of the user app of iZclean project, showing the vehicle selection screen
ui screen of the user app of iZclean project, showing the adress selection screen
ui screen of the user app of iZclean project, showing the payment and service selection screen
  • Wash follow-up
  • Rate a wash
  • Help topics
ui screen of the user app of iZclean project, showing the wash follow-up screen
ui screen of the user app of iZclean project, showing the summary of a wash
ui screen of the user app of iZclean project, showing the help topics
Here is a selection of screens created for the WASHER app :
  • Home - offline
  • Home - online
  • Alert for a new wash
ui screen of the washer app of iZclean project, showing the homepage when the user in offline
ui screen of the washer app of iZclean project, showing the home screen when the user is online
ui screen of the washer app of iZclean project, showing an alert for a new wash
  • Start the wash
  • Wash in progress
  • Service history
ui screen of the washer app of iZclean project, showing the beginning of a wash
ui screen of the washer app of iZclean project, showing a wash in progress
ui screen of the washer app of iZclean project, showing the history of the washes made
  • Summary of the activity
  • Profile
  • Settings
ui screen of the washer app of iZclean project, showing the summary of the activity
ui screen of the washer app of iZclean project, showing the user's profile
ui screen of the washer app of iZclean project, showing the app settings

III. Synthesis

Next steps

As i’m writing this, the UX & UI phases are done. But due to budget and timing issues, the development phase has been pushed back to later this year. But, as soon as the product is released, we will gather some users feedbacks to make improvements. In addition, we already highlight some features that could be implemented in V2, such as the Washer onboarding for example.

Learnings

iZclean has been the most formative project for me. Indeed, we had to build a complex product for several user type. To do this, i realized that iterations were the key to success. Our workflow was based on a lot of exchange between us, the product manager and the client. So we have progressed step by step to make sure that the product would answer the users needs and expectations. Thanks to this project, i could also take part in the elaboration and the development of a complex design system. I realized how important it is to have an efficient one to enhance the designers's workflows

Huge thanks to Studiolabs and iZclean for their trust !
&
Thanks for reading ūüĎć

Next projects

mobile app - back-office

Molitor

Allowing the guests of the famous parisian hotel to manage their entire stay with a mobile app.

a 3d iphone mockup of a Molitor app screen
mobile app - UX/UI Redesign

Blablafoot

Blablafoot is an application allowing users to take part into debates around subjects related to Football.

a 3d iphone mockup of a Blablafoot app screen