Mopar Owner’s Site

Client
Mopar
Role
Lead UI Designer
Timeframe
14 months
Link
View Website
Mopar Owner’s Site

Overview

Mopar is Fiat Chrysler Automobile’s service, parts and customer-care brand and distributes more than 500,000 parts and accessories in over 150 markets around the world. Online services such as maintenance history, coupons, recalls, owner’s manuals and remote commands were broken into different websites under the Mopar brand, each with it’s own unique design. Myself and a small team at Vectorform were asked to consolidate these websites into a single cross-platform experience.

Challenge

The challenge was to create a seamless digital ecosystem with the goal of improving the customer experience and strengthening the relationship between owner, vehicle and dealer. To get to this goal, there were some key constraints that we would need to solve:

  • Consolidate features of each website into a single mobile-friendly ecosytem
  • Consolidate branding of each website into a cohesive visual language
  • Provide flexible theming that can adapt to each vehicle brand
  • Manage 21 possible user states
Screenshots of the 6 individual websites under the Mopar brand prior to the redesign.
Screenshots of the 6 individual websites under the Mopar brand prior to the redesign.

Solution

Our solution has to first identify key features most valuable to Mopar drivers and then structure the site architecture, navigation and content around a common mental model. Next, I created a design system that was flexible enough to accommodate themes for each vehicle brand and provide a component architecture that could adapt to the needs of multiple features and possible user states.

Wireframe & Prototype

We used a variety of user tests to first identify the features users find most important and where they would expect to find them. This data helped to guide my decision process in creating the sitemap structure, navigation, and content hierarchy.

Sitemap that resulted from our user tests.
Sitemap that resulted from our user tests.
Whiteboard sessions allowed for cross-functional collaboration.
Whiteboard sessions allowed for cross-functional collaboration.
Wireframes helped to define how the site structure, navigation and content hierarchy worked together to create a cohesive experience across multiple form factors.
Wireframes helped to define how the site structure, navigation and content hierarchy worked together to create a cohesive experience across multiple form factors.
I created HTML prototypes to test and validate navigation structure and interaction.
I created HTML prototypes to test and validate navigation structure and interaction.

Design System

I designed a robust design system that was flexible enough to accomodate all the necessary components and brand variations while ensuring a consistent visual language.

A collection of reusable components, guided by clear principles, that can be combined together to accommodate themes for each vehicle brand.
A collection of reusable components, guided by clear principles, that can be combined together to accommodate themes for each vehicle brand.
A component architecture that could adapt to the needs of mutliple features and possible user states.
A component architecture that could adapt to the needs of mutliple features and possible user states.

UI Highlights

We identified key features and content to enable vehicle owners to get what they need as quickly as possible.

The design system allowed for flexible theming to accommodate each vehicle brand while also ensuring a cohesive visual language.
The design system allowed for flexible theming to accommodate each vehicle brand while also ensuring a cohesive visual language.
I included a prominment search feature on the homepage to ensure both new and returning customers could find the features and content they are looking for. Additionally, I leveraged user research to provide popular links so customers would have them available immediately.
I included a prominment search feature on the homepage to ensure both new and returning customers could find the features and content they are looking for. Additionally, I leveraged user research to provide popular links so customers would have them available immediately.
A vehicle garage enables customers to quickly switch between multiple accounts to easily manage their vehicles.
A vehicle garage enables customers to quickly switch between multiple accounts to easily manage their vehicles.
A personalized dashboard provides owners a high-level snapshot of their vehicle information, including health reports, performance and maintenance reports, recall information, remote commands, instructional videos and promotions.
A personalized dashboard provides owners a high-level snapshot of their vehicle information, including health reports, performance and maintenance reports, recall information, remote commands, instructional videos and promotions.
Vehicle health reports provide a comprehensive view of the vehicle and quick access to maintenance scheduling at the closest dealer.
Vehicle health reports provide a comprehensive view of the vehicle and quick access to maintenance scheduling at the closest dealer.
A robust catalog provides customers access to thousands of parts and accessories with the ability to filter products by category and model. Each product includes a price, part number, vehicle compatibility and warranty information.
A robust catalog provides customers access to thousands of parts and accessories with the ability to filter products by category and model. Each product includes a price, part number, vehicle compatibility and warranty information.

Impact

We kept vehicle owners at the forefront of every decision to create a valuable ecosystem that surpasses other vehicle owner websites.

  • Consolidated, scalable digital ecosystem
  • 1.5M+ visits in the first 6 months
  • 500+ pages
  • Average daily visits up 13% compared to before site launch
  • 16% of all visitors are self-authenticating