Have you ever needed a car for an exciting road trip? or maybe you just enjoy driving a new car every couple of years. That is where Railcar comes into play.
Railcar is an ambitious company focused on London’s transport sector, they want to become the first app to allow users to book cars for all types of journeys from their mobile phones.
For this project I worked as the main UX/UI designer, collaborating closely with the business strategy team and the 4 iOS and Android developers, under a mixed methodology Agile Scrum + Design thinking.
The company aims to take advantage of the rise of 67% of consumers who plan to use a personal car or rental car as their primary transportation method, according to a market research previously conducted by Railcar.
Current situation and objectives
The main goal was to create an app that would allow users to easily and intuitively rent a car. Long term goal: To be a popular app for users who want to book a car.
As we had 4 months to launch the application, this goal setting was very helpful to prioritize together the key features that engineers should start working on.
I worked in parallel on the research and the creation of sketches based on my knowledge of user behavior and experiences so that the engineers had a solid basis to work on vehicle selection and basic process for rental, this includes selection of contract terms, payment options, contract signature and checkout.
Understanding the market
Car rentals typically last 30 days or less (IBISWorld), but the booking process is onerous. It’s difficult for users to find the best value for their budget and requirements, and additional fees can surface at checkout. Lengthy forms that must be filled out are an additional pain point.
Users are more likely to follow through with renting a car if the process is simplified and fees are included up front.
Who rents a car?
I focused on non-leading, open-ended, and likert scale questions to uncover any patterns users may have when booking a car.
Data showed that price is one of the most important factors when booking a car, ranking higher than other factors, such as short term availability, the brand of car, and pickup/drop-off location.
The second most important factor, expressed by 50% of participants, was transparency after signing the contract. Users have shown that they often forget to sign contracts, and this is an opportunity to add value to the design.
The majority of respondents were impartial to existing apps on the market, with 53% claiming they didn’t have a preferred car rental website/app. This indicates they are open to trying something new.
User persona & empathy map
Competitive analysis
I went through benchmarking, researched the market, looked at “best of” lists and read many app store reviews to identify three main direct competitors and one indirect competitor (Bird, a car rental app scooters) from the market.
As we needed a “happy path” so devs could start creating an MVP with a clear flow, we evaluated this process in competing applications with the aim of remaining objective, weighing the pros and cons. of each page.
In-depth interviews and usability testing
- In-depth interviews about past experiences of renting cars online
- Usability testing of existing car rental websites. The market leaders Hertz and Enterprise were selected for test websites
The usability tests continued to showcase frustration with hidden data. I was surprised to discover that users felt discouraged and wanted to quit using the app once it wasn’t providing clear feedback on why certain inputs weren’t working.
Data analysis
I wrote down all of my findings from my interview, usability tests, and competitive analysis onto supporting cards and sorted them with developers (yes, that’s right, I include devs from early stages) into categories that corresponded to phases of the car rental booking process.
Flow diagram
My flow diagram was representative of the user’s happy path. I found it helpful to once again articulate the context of who my user is and what they are doing. Defining the problem for the 1,000th time helped me stay accountable to my end goal of making an intuitive, easy-to-use app. I learned how to refine the amount of information on a given screen state by visualizing how the necessary components of each page flow. Here is the basic flow I will use for this case study:
Ideation & design proposal
Sketched Mockups
Before designing the digital mockups, I sketched the wireframes by hand to ensure I could effectively iterate and passed the most solid proposals to digital whiteboards. I consulted my flow diagram to mentally visualize page states. I added icons to draw attention to certain buttons and included in-line annotations to contextualize buttons, flows, and actions.
Low-Fidelity Wireframes
Approaching from a black-and-white pictureless perspective allowed me to focus on the layout and completing all the screen states before getting caught up in details, such as font, iconography, and colors. I’m glad I took that approach because, in an unanticipated turn of events, I struggled the most at selecting colors
High-Fidelity Wireframes
I experimented with colors and text until the car app felt right, unique to the brand, and trustworthy. Then it was time to connect the dots, literally, for a working prototype.
Outcomes
The simplified rental process aligns with its goal of being an intuitive, easy-to-use car rental app. Further development would include AI to recommend more accurate vehicles for each user and achieve marketing goals.
Usability testing
This is the key ingredient to UX, after all. I conducted one in-person usability test on my prototype. The aspect I wanted to validate was ensuring the user could easily book a car without confusion. Overall, the user said the experience was positive, stating that “having fewer spaces to explore or click [and] displaying everything concisely in just one space helped me comprehend the process easily.”
Development process & support
To deliver easy-to-use material for developers, I made a style guide with the main components that were used throughout the design, specifying from the atomic level: colors, EM font sizes, icon base to the molecular level: bars navigation, cards, chips etc.
I worked with them to prioritize each component and work in a modular way and not screen by screen, we worked with weekly sprints and dailies with business to clarify doubts as quickly as possible.
English 
Spanish