Golden Era Garage
The goal of this project is to dive deep into Figma variables and 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
The goal of this project is to dive deep into Figma variables and 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
The goal of this project is to dive deep into Figma variables and 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
Role
UX/UI Design, Figma Prototyping
Tools
Figma, Photoshop, Illustrator
Duration
5 weeks
Project Type
Individual Project
PROBLEM
I don't know how to use Figma variables and I want to learn.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I want to learn how to use variables to help with design and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables for visuals and prototyping.
I chose a vintage car rental site because the flow of selecting a car, dates, and checking out were useful scenarios where variables could be used in a practical way.
PROBLEM
I don't know how to use Figma variables and I want to learn.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I want to learn how to use variables to help with design and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables for visuals and prototyping.
I chose a vintage car rental site because the flow of selecting a car, dates, and checking out were useful scenarios where variables could be used in a practical way.
PROBLEM
I don't know how to use Figma variables and I want to learn.
When I initially learned how to use Figma, variables had not been released. In order to stay on top of new updates I want to learn how to use variables to help with design and prototyping.
SOLUTION
Make a vintage car rental flow that uses variables for visuals and prototyping.
I chose a vintage car rental site because the flow of selecting a car, dates, and checking out were useful scenarios where variables could be used in a practical way.
Research and Inspiration
COMPARATIVE ANALYSIS
I want my visuals to stand out.
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.
COMPARATIVE ANALYSIS
I want my visuals to stand out.
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.
COMPARATIVE ANALYSIS
I want my visuals to stand out.
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 INSPIRATION
Vintage advertising matches my theme and goal of striking visuals.
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 theme and goal of striking visuals.
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 theme and goal of striking visuals.
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
Choose a flow that could use prototyping variables the most.
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.
USER FLOW
Choose a flow that could use prototyping variables the most.
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.
USER FLOW
Choose a flow that could use prototyping variables the most.
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
Follow the flow and keep users on track.
I worked with a two-column system that keeps the user on track as they book a rental.
WIREFRAMES
Follow the flow and keep users on track.
I worked with a two-column system that keeps the user on track as they book a rental.
WIREFRAMES
Follow the flow and keep users on track.
I worked with a two-column system that keeps the user on track as they book a rental.
WIREFRAMES
Start basic and add flare.
I began by working with navigation using a basic menu of cars.
WIREFRAMES
Start basic and add flare.
I began by working with navigation using a basic menu of cars.
WIREFRAMES
Start basic and 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 a more engaging main navigation. I wanted to emulate the movement of driving.
EXPLORATION
Prototype quickly to experiment with different interactions.
I continued iterating to create a more engaging main navigation. I wanted to emulate the movement of driving.
EXPLORATION
Prototype quickly to experiment with different interactions.
I continued iterating to create a more engaging main 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 named the data they hold & where it is used in my website.
DOCUMENT SETUP
Use tokens for style information.
All my style information is stored in variables named the data they hold & where it is used in my website.
DOCUMENT SETUP
Use tokens for style information.
All my style information is stored in variables named the data they hold & where it is used in my website.
PAGE LAYOUTS
Use components for page layouts.
I created the main elements of my website as components to prototype with variable interactions.
PAGE LAYOUTS
Use components for page layouts.
I created the main elements of my website as components to prototype with variable interactions.
PAGE LAYOUTS
Use components for page layouts.
I created the main elements of my website as components to prototype with variable interactions.
Variables for Prototyping
COMPLEX INTERACTIONS
Prototype a calendar to choose dates for a rental period that connects to the final price at checkout.
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.
COMPLEX INTERACTIONS
Prototype a calendar to choose dates for a rental period that connects to the final price at checkout.
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.
COMPLEX INTERACTIONS
Prototype a calendar to choose dates for a rental period that connects to the final price at checkout.
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 Design
FINAL COMPS
FINAL COMPS
FINAL COMPS