UX/UI Designer:
Tools Used:
Duration:
4 months
The product design process started with research to try to understand user mental models and detect usability issues. Qualitative and some quantitative data was gathered. The data was analyzed, processed and usability issues were identified. Then a solution was developed and perfected using an iterative Design-Prototype-Validate process. Each validation iteration included a separate usability test on a group of potential users. I was the sole designer of this project.
Research was the first stage in my problem-solving process. My subsequent design decisions were based on insights gained in this stage. The research gathered mostly qualitative and some quantitative data. The data was derived using the triangulation method – using multiple data sources such as competitive benchmarking, online survey and usability testing to identify patterns. A special effort was made to avoid assumptions and presuppositions while conducting the research. The research focused on gathering qualitative data which gave the best insights in the issues users encountered when renting a car on their mobile phone.
Competitive benchmarking technique helped me to get a feel for the industry’s trends, recurring themes and usability solutions by the market leaders.
I analyzed four mobile apps:
Based on usability heuristics (characteristics of best practices) I recorded my observations using a key:
I concluded that different companies have different solutions for creating a good user experience but the common best practices were:
I sent surveys to 15 participants. I was able to get both quantitative and qualitative data.
My usability testing sessions were divided into two parts:
Interviewing the users helped me understand their goals and perspectives, while the usability testing showed the real issues they are facing. Observing people was one of the most highly educational activities in this project. It was eye opening to observe actions noting what users do instead of what they say. I was able to discover:
The usability testing was conducted and recorded via Zoom. I had to view the recordings and take good notes for my research.
After collecting the raw data, I organized it and sorted the information to identify the problems involved in the process of renting a car online.
I identified the design targets for the different steps of the car rental task (goals, behaviors, context of use). I also identified mental models, pain points, user moods, common conventions and effective solutions to be emulated.
The unstructured data was organized using the Affinity Diagram method. Since the technique required the participation of other team members, I had one more person participate to form a team. As a first step, I wrote key points on sticky notes – one main point per sticky. Later we collaboratively organized the data into groups that belonged logically together. We sorted the posted notes on big white boards into the following categories:
The findings from the Affinity diagram were used to create a Customer Journey Map. It visualized what the collective customer experiences were as the users interacted with the product. The map presented the findings as if seeing though the eyes of an outsider (unencumbered by the preconceptions of the product designer). This method helped me empathize with users. Here I was able to clearly see the biggest user pain-points via their collective feedback.
The car renting process had some major issues related to:
Now that the problems have been defined, I was able to work on the solution.
I developed a User Flow Diagram for reserving a car on a mobile car rental app that addressed all the issues highlighted in the customer journey map. I focused on a solution for a common user case scenario that could achieve the major goals: allow the user to achieve their goal easily and create a positive experience.
The flow is linear since there are natural sequence and dependencies.
Sketches are low-fidelity prototypes used for rapid iteration. They are fast and easy since they require only pen/pencil and paper. I was able to spot potential problems early and iterate accordingly.
I sketched out each mobile app screen (including various screen states) of the car renting process. It was an enjoyable, visually creative activity. I put on paper all the details involved at each step of the way. Here are some of my sketches.
Based on my sketches, I built my prototype in Sketch and InVision. Then based on usability testing feedback, I redesigned the flow over and over again until all-pain points were resolved. Testing with a large group of people was a key to the success of the project.
At the last step of the process, I created wireframes with annotations for the developer. These included all the necessary detail to build the app. The wireframes included information for all interactive elements. They specified controls and rules. For example, a phone number field with input type: tel and max characters: 10 digits.
Name and logo
I had the freedom to pick a name for my fictitious car rental service – EW Car Rental. Originally, I thought of the name E-Ways but then decided to shorten it.
Color scheme
The primary colors are gray, teal/blue and coral. I wanted to have a clean/modern look and feel with the coral color attracting attention only to the main CTAs.