E-Commerce Website
E-Commerce Website
Brand Guidelines
Brand Guidelines
Bespoke Design System
Bespoke Design System
Yamaha
Yamaha
Overhauling the massive e-commerce site for this global brand needed attention to every little detail. And starting from scratch allowed us to build these details at the atomic level.
Overhauling the massive e-commerce site for this global brand needed attention to every little detail. And starting from scratch allowed us to build these details at the atomic level.
↓
Discovery
Heuristics testing
UX/UI Audit
Competitive Analysis
User Interviews
Stakeholder Workshops
Roadmap Creation
Heuristics testing
UX/UI Audit
Competitive Analysis
User Interviews
Stakeholder Workshops
Roadmap Creation
Foundations
Navigation + Site structure
Forming the Design Language System
Account creation / login flow
Product & Category Display Pages
Checkout flow
Dealer Locator
Parts Lookup
MVP E-Commerce launch
Navigation + Site structure
Forming the Design Language System
Account creation / login flow
Product & Category Display Pages
Checkout flow
Dealer Locator
Parts Lookup
MVP E-Commerce launch
Enhancements
Branded moments
Micro interactions
Page animations
Photo library
Owners Center
Full E-Commerce design
Branded moments
Micro interactions
Page animations
Photo library
Owners Center
Full E-Commerce design
Disjointed
Business Units
Disjointed
Business Units
Throughout the Yamaha ecosystem, individual business units historically had different data collection processes, sources, and infrastructure - resulting in a disjointed and confusing experience for users across Yamaha sites.
There was a need to define how individual business units could operate within the One Yamaha digital ecosystem, all while maintaining their individuality and flexibility.
Throughout the Yamaha ecosystem, individual business units historically had different data collection processes, sources, and infrastructure - resulting in a disjointed and confusing experience for users across Yamaha sites.
There was a need to define how individual business units could operate within the One Yamaha digital ecosystem, all while maintaining their individuality and flexibility.
Abandoned Carts
A primary point of friction in the legacy Yamaha ecosystem was that users could not complete transactions. This resulted in consumers spending time on the website finding products, adding them to the cart as a reference list, and ultimately making their purchase elsewhere.
A primary point of friction in the legacy Yamaha ecosystem was that users could not complete transactions. This resulted in consumers spending time on the website finding products, adding them to the cart as a reference list, and ultimately making their purchase elsewhere.
Low Scores
After a thorough review of the legacy website, we found dozens of areas of opportunity. The checkout flow needed a lift, all screen needed optimizing for mobile usage, and there were dead-ends on dealer contact pages. These are just
a few of the focal points we built upon in our engagement.
After a thorough review of the legacy website, we found dozens of areas of opportunity. The checkout flow needed a lift, all screen needed optimizing for mobile usage, and there were dead-ends on dealer contact pages. These are just
a few of the focal points we built upon in our engagement.
Connecting Paths
Connecting Paths
It was important to design flows and connection points that could scale to any type of consumer and guide them through their unique journey. We wanted to make sure we covered those who knew exactly what they were looking for before they entered the site, as well as others looking for inspiration. For the latter, our designs need to encourage them through the sales process.
It was important to design flows and connection points that could scale to any type of consumer and guide them through their unique journey. We wanted to make sure we covered those who knew exactly what they were looking for before they entered the site, as well as others looking for inspiration. For the latter, our designs need to encourage them through the sales process.
Atomic Design
Atomic Design
Buttons, backgrounds, dropdowns, dropshadows, etc. These are some of the most basic (atom-sized) elements in our design system language. Thus, they were the first to be created as they established the backbone for larger components in the future builds.
Buttons, backgrounds, dropdowns, dropshadows, etc. These are some of the most basic (atom-sized) elements in our design system language. Thus, they were the first to be created as they established the backbone for larger components in the future builds.
Final Designs
Pixel-perfection was the standard we held our team to, and connected with the development team to ensure they had complete annotations. Everything connected back to our design system language.
We kept in constant contact with the client via weekly presentations to showcase our progress. Our expertise in the design space blended with their knowledge of the internal business structure, resulting in a harmonious feedback loop and final construction.
Pixel-perfection was the standard we held our team to, and connected with the development team to ensure they had complete annotations. Everything connected back to our design system language.
We kept in constant contact with the client via weekly presentations to showcase our progress. Our expertise in the design space blended with their knowledge of the internal business structure, resulting in a harmonious feedback loop and final construction.
More Projects
