Golden Era Garage
Final Prototype
Research
Comparative Analysis
I researched Turo & Hemmings, two car rental/auction websites, to analyze their listings & navigation. Both have simple visual styles & rely on filters to manage large inventories.
In contrast, my project will feature a smaller selection of vehicles, engaging navigation, & striking visuals.
Visual Analysis
I found inspiration from vintage car ads from the 50s and 60s that featured bold colors, dynamic compositions, and interesting graphical elements.
Planning & Iterating
User Flow
I started by making a flow chart to plan the scope of my prototype. I chose a path I could dive into using variables for storing information & creating interactions.
Wireframes
I began by working with navigation using a basic menu of cars.
Wireframes
I worked with a two-column system that keeps the user on track as they book a rental.
Navigation Prototype
I continued iterating to create a more engaging main navigation. I wanted to emulate the movement of driving.
Design System & Variables
Tokens
All my style information is stored in variables named the data they hold & where it is used in my website.
Components
I created the main elements of my website as components to prototype with variable interactions..
Document Setup
I used local variables in my document to hold style elements, make my calendar selection interaction and insurance selection, create the order summary, and calculate the final price.
Interactions
In the calendar, I used components as checkers for date selection data.
I also used variables to hold numerical information to calculate the final rental price.
Final Comps
Takeaways
Variables = awesome.
This project was my introduction to using Figma variables. I found out how impactful they are in creating a prototype with fully interactable features.
Design systems = awesome.
I learned how to create and use a design system to help design more efficiently & stay consistent in my visual style.