CAR RENTAL APP UX/UI DESIGN

In 2021 I decided to take the Professional Diploma in UX Design at the UX Design Institute in order to further improve my UX skillset. It’s a course which I highly recommend. This is my final project — a car rental booking app. I decided to exceed the requirements of the brief early on. I decided I would create high fidelity wireframes and build out a full Design System to support the UI. I wanted to give myself an extra challenge by incorporating my existing advanced UI skills while learning new about areas on the UX side which the course had introduced. I also checked if this would be ok with the course instructor in advance. Please continue reading for a review of my Design Process!

Snapshot of an early sketch beside a final high fidelity version of the screen

Update: I was absolutely delighted to since receive a grade of 100% for these final projects from The UX Design Institute. It feels like a great reward for the hours of work I put in and I hope this shines through in the work you’ll see below.

STARTING MY DESIGN PROCESS

I follow the below process when starting a new project

1. Empathise
2. Define Problems
3. Research
4. Design/Ideate/Prototype
5. Build
6. Test

As a Lead UX/UI Designer on this project I know I’m going to be heavily involved in the research and design phases. In my experience I know that I should be equally involved in build and testing in order to deliver a product which is holistically viable and thoroughly thought through in terms of human-centered design.

My process is also iterative. The cycle will repeat as needed in order to deliver new, improved versions of the product. From my experience working in Agile Squads, I also try to remain flexible within the process. If collaboration on testing needs to happen earlier than expected for example, then I’ll find a way to adapt to fulfil that requirement. I could potentially create multiple draft sketches or low fidelity wireframes which can be easily updated to quickly solve any issues.

My initial motivation was to begin understanding the brief and starting some early planning for the app. Who would my target market be? What are their needs? How can I differentiate my offering and experience from the competition? Is there anywhere I can draw inspiration from? What should the product be called?

RESEARCH

To answer the questions above and critically — to have confidence in my findings, I would need to do some research.

One of my favourite pieces I took from my UX course was this quote by Founder and UX Expert Colman Walsh

“If you’re not doing research, you’re not doing UX.”

It’s a great, simple way of explaining how important this part of the process really is. As a UX/UI Designer I’m always empathising with users, trying to understand their needs and advocating for them. Research is a core part of that process.

In the project I carried out various pieces of research in order to make sure my product would be

1. Viable – the product needs to make business sense
2. Feasible – designing and building this needs to be achievable
3. Desirable – users need to want to use the product that I’m designing

With these key points in mind, I set about collecting as much research as I could. Some examples are below.

Usability Test

The idea behind this test is to get competitor apps into the hands of users. This allowed me to gain valuable insights about

1. My users context of use
2. Building their skills/confidence

I conducted Usability Tests to learn more about my users

To carry out the tests I linked a microphone and the webcam to OBS (Open Broadcaster Software). I created a scene in OBS which included the webcam and captured the screen of an iPhone. Using a test script I then allowed the user to navigate through the journey as their actions and facial expressions were being recorded. I then used this raw material to conduct further research tasks.

Affinity Diagram

Supplied with the information from the Usability Test I was then able to make my next steps. I organised an Affinity Diagram session. I find these sessions are great for

1. Brainstorming
2. Applying structure to our findings

Typically, this is done in person by annotating pain points and other comments from the Usability Test and putting the post-it notes on a wall. I decided to do this digitally using Figma. Miro is also a great tool for conducting this type of research digitally.

An Affinity Diagram session helped me to track pain points

Customer Journey Map

The Customer Journey Map is another great way of reporting on an end to end flow and categorising findings by positive/negative emotions. These are all based on patterns we’ve seen in our research data. The key benefits are that this research is

1. Structured
2. Easy to understand
3. Easy to share
4. Represents the customer point of view

A customer journey map helped me to examine and structure user emotions

With plenty of real data now at my disposal I was able to decide I would create a brand and app for an environmentally conscious electric car rental service. It would be targeted at users of all ages over the legal driving age limit. I would need to point out some of the benefits of electric vehicles and some of the things that differentiate them from their internal combustion engine counterparts, which some users may not be aware of.

DESIGN

During the initial design phase my objectives were to

1. Briefly develop the brand identity (time would be a limiting factor)
2. Begin outlining screens for the app

You can see some examples of this below

Inspiration

Uber was my main source of inspiration for a best-in-class approach to design. When I did further research, I learned that many car rental, taxi and ride-sharing apps share a very similar structure, with varying standards of execution. I created moodboards and did further brainstorming create the identity for my app.

Uber app — used for my initial inspiration

Brand Identity

After multiple iterations I settled on a brand identity and set of styles which I felt were in line with the elegant feel of Uber. I also felt it aligned well with the overarching theme of environmentally friendly rentals by showcasing some of the beauty of higher end vehicles.

An example of my final brand identity

Sketches

As part of the design I created rough sketches first. This allowed me to learn more about

• Broad concepts/mental models
• Find out if users ‘get it’
• Optimising the flow

There are also some important pro’s and con’s to this approach which I needed to bear in mind

Pro’s

• Quick
• Cheap
• Catch issues early
• Low skill level/effort required

Cons

• Learnings will be limited
• Can’t test interactions, screen states, what the app ‘feels like’

Flow Diagram

I also mapped out the ‘Happy Path’ in a detailed Flow Diagram — this is the simplest flow for users to complete the booking process. The Flow Diagram consists of various screens and screen states.

Flow diagram detailing the ‘Happy Path’

With the core journey laid out and branding in place I was now ready to enter the next phase of Design – creating higher fidelity screens and constructing a Design System.

DESIGN SYSTEM

As mentioned earlier, I wanted to take the project to the next level by creating a Design System of reusable components for the app. I also wanted to demonstrate use of some advanced Figma features like using Overlays in my prototype, Component Properties and the recently revamped Auto Layout.

I began by carefully structuring the Figma project with the Atomic Design Methodology in mind

I made a nav system to make browsing through the Figma file easier

From working in Figma on a daily basis in a team of Designers I know it can be daunting entering an unfamiliar file for the first time, especially if it has a Design System you haven’t seen before. Likewise, a developer or stakeholder may have never even used Figma or a Design System before. This is something I frequently experience with 3rd party vendors.

I tried to bridge this gap by giving the project a very clear Page hierarchy and structure. I also incorporated a button system for navigating through the file. It was something I felt users would already be familiar with. Each of these buttons would link to a specific page or prototype. Being able to create links to specific Pages and Frames is one of my favourite features of Figma.

Each of the buttons are clickable in Figma and link to corresponding pages of the Design System

Components

I then designed sets of components using Atomic Design Methodology. I used advanced Figma features such as Auto Layout and Variants while creating these.

DEVELOPMENT & TESTING

As a Designer I consider my role to be continuous throughout the project lifecycle. Dev handover forms a huge part of that. As part of my day to day I work closely with developers, usually as part of Agile Squads, to assist in the distribution of assets, communication of solutions and ensuring design/functional consistency by testing the product thoroughly.

Prototype

Prototypes are ideal for improving the quality of designs, sharing ideas and validating assumptions. They’re also a great way to showcase some design flair, as the screens suddenly feel more interactive. My main aim was to identify potential issues ahead of development, which would reduce the risk of a flawed product in the latter stages of the process.

A quick timelapse of the prototype journey

In my full time role I’ve found them helpful for managing stakeholders. They help when looking for buy in, communicate ideas clearly and help reduce ambiguity. Taking this into account I wanted to make sure I created an effective prototype for this journey through the product.

Annotations

To clearly communicate how functionality and interactions/micro-interactions should work I annotate my screens. These usually cover user intent/action/result and try to remove any doubt for things which may not be visually obvious.

I made sure that my screens were thoroughly annotated for developers and stakeholders

Testing

Further testing wasn’t as necessary with this project as it wouldn’t actually be going into development. However, once a developer creates the product in their pre-production environment I’ll usually work closely with QA and the developer to begin noting any bugs or snags across various screen sizes, device and browser types. To structure these  issues I would usually use a mix of Figma comments and a Google Spreadsheet, with other discussion taking place on MS Teams/Planner or through JIRA/Trello etc.

SUMMARY

I hope this has given you an insight into my Design Process and skillset. It gave me a massive appreciation for how good research data and techniques can improve a product. I love building functional UI’s so it was really enjoyable creating a Design System and set of Components to suit from the ground up. I feel that doing this course has definitely helped me better understand UX and refine my approach to solving problems. It’s been hugely beneficial to bring this into my professional role and I’m super excited to see what I can learn next. Thanks for reading!