E-Commerce Website
Brand Guidelines
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 from 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 from the atomic level.

↓

TEAM

  • Ryan Bataillon _ Lead Designer
  • Amar Chadgar _ Creative Director
  • Carlton Rice _ Lead Developer
  • Ryan Bataillon _ Lead Designer
  • Amar Chadgar _ Creative Director
  • Carlton Rice _ Lead Developer

OVERVIEW

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.

CHALLENGE

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.

OUTCOME

  • Unified Yamaha brands under one platform
  • Bespoke design system
  • Heuristic Analysis & Site Audit
  • Brand guideline

Phases

Phases

Phase 1 _ Discovery

  • Heuristics testing
  • UX/UI Audit
  • Competitive Analysis
  • User Interviews
  • Stakeholder Workshops
  • Roadmap Creation

Phase 2 _ Foundation

  • 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

Phase 3 _ Enhancement

Phase 3 _ Enhancements

  • Branded moments
  • Micro interactions
  • Page animations
  • Photo library
  • Owners Center
  • Full E-Commerce design

Abandoned
Carts

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.

Low
Scores

Low Scores

After a thorough review of the legacy website, we found dozens of areas of opportunity. The checkout flow needed a lift, every page 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 searching for inspiration. For the latter, our designs needed 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.

Final
Designs

Final Designs

Pixel-perfection was the standard we held our team to, and we constantly connected with the development team to ensure they had complete annotations. Everything connected back to our design system.

We kept in 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

Yamaha

↓

Snapshots

↓

S. Glazers

↓

365 Things

↓

PietschHouse

↓

Midnight Oil

↓

Yamaha

→

Yamaha

→

S. Glazers

→

PietschHouse

→

Snapshots

→

365 Things

→

Midnight Oil

→

LinkedIn

LinkedIn