For this project, I worked with a group who created a concept for a car service that would deliver cars in order for users to test drive them and finish the purchase from their home. The business was called AutoCarDabra. My assignment was to create a UI design for a mobile web application that could be used for this service, while delivering a convenient and efficient process for the users.
A sitemap was created to lay out the necessary pages and begin to determine what the hierarchy of the website would be. I found that the bulk of the site surrounded the car reservation process, so I needed to think about exactly what information was necessary to collect for the purchase, and the best way to go about collecting that information from the user.
The user flow shown here demonstrates the path the user would take in order to reserve their vehicles, starting from the screen where a user views the details and customization options of the car. From there, they can book their appointment, enter their payment information and delivery address, then verify all of their information.
When testing this function of the site, it was found that sometimes, information was incorrect on the verification screen and the user would need an easy way to go back and change their information. Because I had multiple screens where the user entered different details such as their appointment, delivery address, and billing info, I didn't want to reduce these steps to one screen. As a result, I added the order summary so that users can edit information on the correct page and easily return to the summary screen to complete their check-out.
The goal was to make the check-out process simple and easy for users to understand, while reducing the amount of time it takes them to reserve their cars.
Using existing brand elements created by another designer, I created guidelines for creating each page, including brand elements such as colors, fonts, and the logo as well as icons and form and button styling.
Since the primary color palette included various shades of blue, I used the lighter blue colors for UI elements such as icons, and buttons. The blue/green stood out from the palette, making it the ideal color for icons that needed to stand out, such as the favorite button and verification. The icons used were clean and simple, to ensure the user had a clear understanding of where they needed to go.
Using the styleguide and user flows, I created the high fidelity interactive prototype using Adobe XD. The prototype and screens can be viewed below.