Case Study
Design Guide for Product Pages to Showcase Electric Scooters
Design Guide for Product Pages to Showcase Electric Scooters
Client
VORO Motors
VORO Motors
Team
Project manager, Copywriter, Engineer, Editor
Project manager, Copywriter, Engineer, Editor
DAte
April 2022- June 2022
April 2022- June 2022
ROLE
UX/UI Design, Wireframing, Prototyping, Development
UX/UI Design, Wireframing, Prototyping, Development
About the Client
About the Client
VORO Motors
VORO Motors
VORO Motors is an e-commerce company that sells electric scooters and electric scooter parts.
They carry a wide range of e-scooters for casual riders and experts alike.
Not only do they sell products, but they also offer repair services to their customers.
VORO supports their customers’ life-long journey from the moment their purchase is made.
VORO Motors is an e-commerce company that sells electric scooters and electric scooter parts.
They carry a wide range of e-scooters for casual riders and experts alike.
Not only do they sell products, but they also offer repair services to their customers.
VORO supports their customers’ life-long journey from the moment their purchase is made.
Revamping an electric scooter website's aesthetic and vibes
Revamping an electric scooter website's aesthetic and vibes
Project Overview
Project Overview
VORO Motors has provided electric scooters of all abilities for wide ranges of communities such as delivery workers, casual riders, and e-scooter experts.
One of the main objectives of this project was to address the inconsistencies in component usage and writing style throughout the website. To achieve this, I aimed to establish a sense of uniformity by creating a style guide for the team to reference when creating future pages. By doing so, we were able to ensure consistency and cohesion throughout the entire site.
The second objective was to reintroduce two of the most important webpages, the homepage and the product page. We wanted to display product images that the VORO team has taken that really capture the features.
VORO Motors has provided electric scooters of all abilities for wide ranges of communities such as delivery workers, casual riders, and e-scooter experts.
One of the main objectives of this project was to address the inconsistencies in component usage and writing style throughout the website. To achieve this, I aimed to establish a sense of uniformity by creating a style guide for the team to reference when creating future pages. By doing so, we were able to ensure consistency and cohesion throughout the entire site.
The second objective was to reintroduce two of the most important webpages, the homepage and the product page. We wanted to display product images that the VORO team has taken that really capture the features.
Goal 01
Address the inconsistencies in component usage and writing style throughout the website
Address the inconsistencies in component usage and writing style throughout the website
Goal 02
Reintroduce two of the most important webpages, the homepage and the product page
Reintroduce two of the most important webpages, the homepage and the product page
Our Process
01 Exploring Competitors: Gathering and comparing different branding
01 Exploring Competitors: Gathering and comparing different branding
Previous Designs
Previous Designs
Previous VORO Motors designs
Previous VORO Motors designs
Previous VORO homepage
Previous VORO product page
Moodboards
Moodboards
I took inspiration from existing electric scooters, vehicles, sports, and bike websites that has a clean, sporty aesthetic that VORO was looking for.
02 Establishing Style Guide: Design documentation
02 Establishing Style Guide: Design documentation
Establishing Style Guides
Establishing Style Guides
Creating consistent designs
Creating consistent designs
VORO has no previous or existing style guides so I established one by documenting all existing components on the VORO website first. Then I added the new components along with documentation notes on the usage.
VORO has no previous or existing style guides so I established one by documenting all existing components on the VORO website first. Then I added the new components along with documentation notes on the usage.
03 New Look and Feel: New product and home page designs
03 New Look and Feel: New product and home page designs
Final Designs
Final Designs
New designs
New designs
Final Homepage and Product Page
Final Homepage and Product Page
The new homepage and product page showcase their scooters visually and highlight important features that excite customers.
Final Product Page
Final Product Page
The new product page showcase VORO's scooters by highlighting their capabilities. I incorporated the new, high-quality photos our media team took. I also added in a section where customers can compare different scooters and its specs at a glance.
Development
Development
Translating the design into reality
Translating the design into reality
After the final design was approved, I created the page using Shogun in Shopify.
After the final design was approved, I created the page using Shogun in Shopify.
VORO Motors Ultimate Scooter Guide
Calculator redesign for TIAA, a performance banking platform
