Rafiji app — UX/UI redesign case study
What is Rafiji?
Rafiji is a mobile application to serve online carwash services at step doors all over Qatar.
The business wanted to make the app grow steadily by adding further services, and the first phase was to redesign and add laundry services.
The fast and highest quality were two primary keys of Rafiji, so we as product designers should make it ease-of-use and trustier in the new version.
Business Needs
The order conversion rate was low and needed to increase. Also, the application design could not extensible.
User Research
Unfortunately, the initial app did not have any analytics data. The only thing was access to the database that we could only find the gender of users.
We commenced by interview and survey to obtain insights from users.
According to our hypothesis, people who use car wash may be different from people who use the laundry. So we prepared two types of survey questions, ten questions for car wash and six questions for laundry, and shared it with some people at related social networks groups and potential users to help us better know them.
In the survey, we had 25 valid answers, and in the interview, we had only two users plus one of our colleagues.
There is a brief of what we found:
User Persona
With the above insights, we created two user personas. (One for car wash, and another one for laundry)
Usability Test
Also, we got a usability test of the old application to know problems. We were lucky to have 5 participants in this section.
We faced with some issues which these were most problems:
- 😶🌫️ Car wash packages and prices were unclear
- 😵 Long ordering process
- 😩 Adding address is confusing
- 😕 The user can not see their active orders until they go to the orders page
The User Journey Map
We need to comprehend the feel and touchpoints throughout the experience from the user’s perspective, so mapping the user journey helps ensure no user drops out.
User Pain Points
According to the data obtained, we found user pain points that need special attention to make them better.
- Adding address
- Ordering Process
- Registration
Information Architecture (IA)
Optimize and organize the structure, helping users navigate them to find and process the information they need.
Flow Chart and User Flow
By depicting the whole process, we can identify how the user is navigating and see if they meet their needs.
Also, by creating the user flow, we know the steps a user takes to complete that task. It helps us make a clear way for the user to achieve its goal.
Low-Fidelity
Wireframing
Usability test of Lo-Fi
We conducted a session to take a usability test by 4 participants and shed light on whether we are in the right way!
We made minor changes then we went to the UI phase.
Design system
The primary benefit of a design system is saving time in iterations and changes by utilizing premade UI components and elements.
By doing this, we can use the same elements over and over. Also, keep the consistency whole of the product.
We always create the basics of a product in the design system then complete that step by step in the designing screens.
User Interface
The primary key of designing a user interface is consistency and keeping it simple, minimal, and ease of use
Home page
We keep the last two ongoing orders of the user on the home screen because the user can check the status of them instantly without confusion.
Car wash packages
This product has two different prices for two categories of car types, so we separated these with tabs to coordinate between car wash packages and laundry baskets.
We also designed the package cards in such a way that the user can easily identify the packages.
Create laundry basket
In the laundry service, we put a skip button to create the laundry basket so users can skip that. Also, by selecting an item, we add a link below the price to check and manage the baskets.
Adding address
The user selects the location, and then the address detail form is displayed with a filled address field, although editing is also possible.
For users that use the application for the first time, we get the address by creating the laundry basket or selecting a car wash package.
Checkout
Consistency is a primary key, so on the checkout page, we tried to make the minimum difference between the car wash and the laundry while keeping them simple.
Orders
We designed a simple filtering component at the top of this screen to filter orders.
Also added a button for orders that the user did not give a rating to get its rating.
What did we learn by doing this project?
We have not used the tonal palettes method before to define our color palette.
In this project, we used the method which used in Material Design. So we could better define extensible color palettes and create better harmony and branding throughout the product.
Thanks for reading!
You can check out the HQ presentation on Behance.
Stay connected with us:
Zinat Farahani — Product Designer
(Medium, Linkedin, Behance, Dribbble, Instagram)
Farshid Darvishi — Product Designer
(Linkedin, Behance, Dribbble, Instagram)
