UI/UX Case Study — Maxim App Revamp
Disclaimer: This is a group project between UI/UX Design & Research that is conducted during UI/UX Design Bootcamp at MySkill.id
Project Overview
Company
Maxim is an innovative application designed to simplify and optimize the process of requesting transportation services within the city. This application offers a fast and safe solution for those who are looking for a means of transportation anytime and anywhere.
Maxim is an online motorcycle taxi company from Russia with the characteristic yellow jacket worn by its driver partners. And even now Maxim is available in several countries, one of which is Indonesia. Maxim’s online motorcycle taxi service can also be enjoyed in approximately 47 cities in the country. “Our mission is to continuously increase interaction among users and help as many people to travel to their respective destinations.”
Project Duration
1 Month (April 10th — May 20th, 2023)
Objective
- Revamp the user interface (UI) of Maxim
- Introduce a non-cash payment option feature
Role
As a UX designer as well as a UI designer, I collaborated with 3 team members namely Aditya, Yudhis and Rizqi. In this team my responsibility is
- Create design systems (such as buttons, text fields, colors, typography and others)
- Revised multiple wireframes
- Create UI Designs and Hi-Fi Prototype
- Conduct Usability testing to users
Design Process
In this case we chose to use Design Thinking as our design process approach. Because this concept tends to prioritize the emotional, cognitive and aesthetic needs of users. Design thinking also involves repeating problems, developing ideas from brainstorming sessions, and taking a hands-on approach in prototyping and testing sessions.
1 — Empathize
We carried out 3 user research approaches to validate our assumptions regarding the problems found in the maxim application there are ;
- On-desk research
- Quantitative research
- Qualitative research
On-desk research
In this on-desk research, we took 2 approaches, looking at reviews in the app store and play store and then conducting a competitive analysis.
When conducting review research on the app store & playstore, we found many users complaining about the payment method in maxim which can only be cash and other methods that are difficult for users to use. And there is also a problem regarding a driver’s attitude that is not good, but for the maxim driver rating feature it is not maximized so users cannot provide feedback freely in order to improve the quality of drivers in maxim.
Then in the competitive analysis section, we compare Maxim with its two competitors, namely Gojek and Grab, which are two pioneers in the field of online transportation. We compare them in several parts; Features, Payment Method, Rating System, and Promo System. In this section it can be seen that there are still many advantages of Gojek and Grab in many aspects.
Quantitative Research (Survey)
Responden characteristics :
- Male & female
- 18–23 years old
- Lives in Jabodetabek
- Employee & student
- Total 18 respondent
In this qualitative research we use google form tools to collect the information we need to validate the problems we get in on-desk research.
Survey Result :
- A significant majority of respondents, 66.7%, consider the non-cash payment feature to be of utmost importance.
- 94% of respondents expressed a strong desire for the implementation of the driver rating feature.
- Respondents deemed the Maxim top-up system ineffective, with some expressing a lack of understanding on how to initiate the top-up process.
Qualitative Research (In-dept Interview)
When looking for respondents to be interviewed, we only got 1 respondent because we felt we didn’t have enough time to continue this UX research. but even from this one respondent we think it is enough to validate the problem of the existing maxim application.
In-depth Interview Result :
During an in-depth interview, we had the opportunity to speak with Demy, a 23-year-old private employee residing in Jakarta. Demy frequently utilizes the Maxim application for his transportation needs. She highlighted challenges faced in accurately setting destination locations, the absence of non-cash payment options, and occasional lengthy wait times for drivers.
Demy’s primary reason for choosing Maxim was its competitive pricing. She expressed a desire for the application to undergo improvements in terms of UI aesthetics and the inclusion of non-cash payment methods.
2 — Define
In the Define stage, we will organize the information you have gathered during the Empathize stage. We’ll analyze our observations to define the core problems our team have identified up to this point.
User Pain Point
- Inaccurate location points : Users encounter difficulties in determining the precise location point due to frequent inaccuracies in the mapping system.
- No cashless payment options : Users complain that there are no cashless payment options, so users have to bring cash money.
- Unattractive UI display : Users express discontent with the monotonous and unattractive visual design of the application’s UI, leading to their dissatisfaction.
- Driver rating system unavailable : Users perceive the necessity of implementing a driver rating system to evaluate and assess driver performance.
User Persona
Following the survey, we developed User Persona that represents different customer types that will use our product. User Persona portrays the user’s personal information, pain points, and dreams.
Affinity Mapping
After getting various input answers from the research that we have conducted, we then compile an information that is made into an affinity diagram so that it is easy for further analysis
How Might We (HMW)
We began generating ideas through short questions or “How Might We” (HMW). HMW is sourced from a Insight that we collected from pain points and dreams. The following is the HMW that we concluded:
Insight
Insight 1: Users feel that the UI display of the Maxim application is unattractive and less user friendly.
Insight 2: Users find it difficult to determine addresses when placing orders in the Maxim application.
Insight 3: Users feel that the payment methods in the Maxim application are not varied.
Insight 4: Users feel that the driver rating feature in the Maxim application is not yet effective.
HMW
HMW 1: How might we create User Interface for user in order to make it look attractive and easy to use?
HMW 2: How might we help user to determine the right maps when placing an order?
HMW 3: How might we create other option for payment method for user?
HMW 4: How might we creates rating feature to more optimize?
Problem Statement
Demy is a private employee who needs non-cash payment option in ride-hailing apps because she rarely carries cash.
Once we know all the problem, a good solution is to plan the user flow, design, prototype, and do usability testing to get better feedback.
3— Ideate
In the Ideation stage, we spark off ideas in the form of questions and solutions through creative and curious activities such as Brainstorms and Worst Possible Idea.
Prioritization Ideas
The initial stage that we did was prioritizing the ideas that we would develop, we made 4 quadrants to determine which parts were highly prioritized to which were not prioritized.
But due to time constraints of only 1 month, we decided to only make two points from the 4 quadrants of prioritization ideas, Big batches and Quick wins.
Crazy 8's
In the ideate session we did what is called crazy 8’s to trigger ideas in making maxim application wireframes by drawing 8 distinct ideas for eight minutes.
User Flow
So that the flow of our maxim application can be used comfortably by users, we are compiling an end-to-end user flow here to maximize the function and experience of the user himself. Starting from the homepage to the rating page.
User Journey Map
In the user journey map, we give a visual representation of a customer’s experience, serve as a useful tool for understanding user needs and pain points and ultimately optimizing user experience (UX).
Information Architecture
Now, we organize the information architecture sections into a single unit that forms a neat information structure. Our goal in creating an information architecture is to describe a sequence of information that will be placed in a specific maxim application
Wireframe
Creating low-fidelity wireframes in UI/UX design is an essential step in visualizing skecth of the digital application. UX wireframes provide a blueprint for your site’s structure, layout, information, and functionality. As a result of the discussions at Crazy 8s, we now create UX wireframes to keep the user-centric concept.
4 — Prototype
In Step 4, we start compiling the hi-fi design from the wireframes that we have made before, starting from the Design System to Prototyping.
Design System
The design system is something that must be made to make it easier for us to design a prototype, because we don’t have to make a design component over and over again. Here we make several components; Colors, Typography, Buttons, Shadows, Icons, Nav Button, Radio Button, and Text field.
Color Palette
The color used in designing this maxim application is yellow, according to what is already in the maxim application and we add a second color, which is red. Then to complete the color palette we added neutral colors and accent colors consisting of colors for danger, warning, success, and info.
Typography
Our typography section relies on the Roboto font, Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm, more commonly found in humanist and serif types.
Shadow
There are 4 shadows that we created, and each shadow will be used for different components. Shadows are also important for adding small details so that the created interface components become more defined.
Icons
As an important part of our user interface, use icons to represent objects, actions, and ideas. Icons convey the core idea or intent of a product or promotion. The icon’s job is to guide the user to where they need to go.
Buttons
Buttons are also one of the most important parts of a hi-fi design and prototype, buttons help users define an action whether it’s to move to another page or to do something.
Text Field
The last one is a text field, a text field is used to receive input text from the user, usually used in forms and dialogs. This is also an important component for an online motorcycle taxi application because the user will input many things, from login to address input.
High Fidelity Design
After we have determined all the system design components, we continue to execute the high fidelity design of the maxim application revamp. High fidelity design includes all the elements of the design system which are integrated into a page. Starting from the Splash Screen to the Rating page.
High Fidelity Prototype
In the prototype section, our team provides 3 flows according to the tasks to be carried out for usability testing.
Task 1 : Top-up Rp.39000 on Maxim App
Task 3 : Rate a driver for 4 Star
5 — Usability Testing
The purpose of usability testing is to identify usability problems, collect qualitative and quantitative data, and determine participant satisfaction with the product. The target user for our project is people who travel and use the app frequently. The tool used for usability testing is Ballpark.
There are three scenarios for our usability testing:
- The user tries to top-up
- The user tries to order maxim ride and choose the address
- The user using the rating feature to give a feedback to the driver
The following is the result of the usability testing that we conducted with Ballpark.
Top-up Feature
Order Feature
Rating Feature
The result of the usability testing that we conducted in a Ballpark is:
- 100% of respondents completed task 1 in an average of 9 seconds
- 100% of respondents completed task 2 in an average of 7 seconds
- 75% of respondents completed task 3 in an average of 27 seconds
To follow up on problems in task 3 because there might be an incorrect prompt when testing the user, but because the time given is only 1 month we can’t continue it until we iterate the design in the rating feature section.
Conclusion
The conclusion that I can draw in this project, after performing this Revamp, the three existing features that we have revamped before have become more functional and user-friendly. Almost all the tasks given during the usability test have been performed properly.
What did I learn from this project?
From performing this Revamp, we have realized the necessity for Maxim to insert different options of payment, ranging from cash to debit/credit card. This is essential considering that 66.7% of the respondents stated that cashless payment is the current norm of online transportation apps.
Recommendation
There are still many things that can be improved in terms of the UX maxim app, then you can do more design iterations and then do stage 2 of usability testing to validate existing prototypes.
Finally, thank you for your attention to read the case study that I have made in such a way. If there are any deficiencies from a structural or design perspective, please provide feedback so I can develop further in the future.
Arifa Ferial is a student who is happy to learn about UI/UX. You can connect with him on Dribbble, Instagram, and LinkedIn
