Golden Era Garage
This project was a deep dive into Figma variables to create a prototype with complex features. This vintage muscle car rental site features unique branding, a design system and variable interactions like car selection, scheduling, pricing, and checkout.
Golden Era Garage
This project was a deep dive into Figma variables to create a prototype with complex features. This vintage muscle car rental site features unique branding, a design system and variable interactions like car selection, scheduling, pricing, and checkout.
Golden Era Garage
This project was a deep dive into Figma variables to create a prototype with complex features. This vintage muscle car rental site features unique branding, a design system and variable interactions like car selection, scheduling, pricing, and checkout.
Role
UX/UI Design, Figma Prototyping
Tools
Figma, Photoshop, Illustrator
Duration
5 weeks
Project Type
Individual Project
Role
UX/UI Design, Figma Prototyping
Tools
Figma, Photoshop, Illustrator
Duration
5 weeks
Project Type
Individual Project
PROBLEM
Figma variables are new.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I wanted to learn how to use variables for designing and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables.
The vintage car rental site has complex flows where variables can be used in a practical way.
PROBLEM
Figma variables are new.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I wanted to learn how to use variables for designing and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables.
The vintage car rental site has complex flows where variables can be used in a practical way.
PROBLEM
Figma variables are new.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I wanted to learn how to use variables for designing and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables.
The vintage car rental site has complex flows where variables can be used in a practical way.
Research & Inspiration
COMPARATIVE ANALYSIS
I want my visuals to stand out.
I researched Turo & Hemmings, two car rental/auction websites, to analyze their listings and navigation. Both have simple visual styles and rely on filters to manage large inventories. In contrast, my project will feature a smaller selection of vehicles, engaging navigation, and striking visuals.
COMPARATIVE ANALYSIS
I want my visuals to stand out.
I researched Turo & Hemmings, two car rental/auction websites, to analyze their listings and navigation. Both have simple visual styles and rely on filters to manage large inventories. In contrast, my project will feature a smaller selection of vehicles, engaging navigation, and striking visuals.
VISUAL INSPIRATION
Vintage advertising matches my ideal branding style.
I found inspiration from vintage car ads from the 50s and 60s that featured bold colors, dynamic compositions, and interesting graphical elements.
VISUAL INSPIRATION
Vintage advertising matches my ideal branding style.
I found inspiration from vintage car ads from the 50s and 60s that featured bold colors, dynamic compositions, and interesting graphical elements.
Planning
USER FLOW
The checkout flow gives many opportunities to use variables.
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 and creating interactions.
USER FLOW
The checkout flow gives many opportunities to use variables.
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 and creating interactions.
WIREFRAMES
Keep users on track as they navigate checking out.
I worked with a two-column system that keeps the user on track as they book a rental.
WIREFRAMES
Keep users on track as they navigate checking out.
I worked with a two-column system that keeps the user on track as they book a rental.
WIREFRAMES
Start basic & add flare.
I began by working with navigation using a basic menu of cars.
WIREFRAMES
Start basic & add flare.
I began by working with navigation using a basic menu of cars.
EXPLORATION
Prototype quickly to experiment with different interactions.
I continued iterating to create more engaging navigation. I wanted to emulate the movement of driving.
EXPLORATION
Prototype quickly to experiment with different interactions.
I continued iterating to create more engaging navigation. I wanted to emulate the movement of driving.
Variables for Style
DOCUMENT SETUP
Use tokens for style information.
All my style information is stored in variables.
DOCUMENT SETUP
Use tokens for style information.
All my style information is stored in variables.
PAGE LAYOUTS
Use components for page layouts.
I made components the main elements of my website to prototype with variable interactions.
PAGE LAYOUTS
Use components for page layouts.
I made components the main elements of my website to prototype with variable interactions.
Variables for Prototyping
COMPLEX INTERACTIONS
Prototype uses car type, calendar inputs & insurance selections, to calculate the final price at checkout.
For each selection, the price is added to calculate a final amount when the flow is finished. The calendar is my most complex interaction using many components to check the numbers selected and highlight numbers between.
COMPLEX INTERACTIONS
Prototype uses car type, calendar inputs & insurance selections, to calculate the final price at checkout.
For each selection, the price is added to calculate a final amount when the flow is finished. The calendar is my most complex interaction using many components to check the numbers selected and highlight numbers between.
Final Design
FINAL COMPS
FINAL COMPS