Mopar Owner’s Site
![Mopar Owner’s Site](/work/mopar-owners-site/cover_hu11f0336bb8d083ebae100755e88ef4f2_205689_1200x0_resize_q75_box.jpg)
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 ecosystem
- 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.](/work/mopar-owners-site/fragmented-ecosystem_huc6c147d6948d963d5fbf0770eec6eddc_166158_1200x0_resize_q75_box.jpg)
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.](/work/mopar-owners-site/sitemap_hu2cfd57c979a9979cb8360284cef5c7ee_58486_1200x0_resize_q75_box.jpg)
![Whiteboard sessions allowed for cross-functional collaboration.](/work/mopar-owners-site/whiteboard_hu662447789655f715792e5847c07a44b2_80943_1200x0_resize_q75_box.jpg)
![Wireframes helped to define how the site structure, navigation and content hierarchy worked together to create a cohesive experience across multiple form factors.](/work/mopar-owners-site/wireframes_hu971793ac09732fada82d44f23c97a348_55516_1200x0_resize_q75_box.jpg)
![I created HTML prototypes to test and validate navigation structure and interaction.](/work/mopar-owners-site/prototype_hu2683ce32e8d2e8f1414342cdf4eadceb_47083_1200x0_resize_q75_box.jpg)
Design System
I designed a robust design system that was flexible enough to accommodate 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.](/work/mopar-owners-site/design-system_hue62499fb9f01e2ac178a009b0e18d7bf_320891_1200x0_resize_q75_box.jpg)
![A component architecture that could adapt to the needs of multiple features and possible user states.](/work/mopar-owners-site/component_huab3fc9e423a82b2565d32053c1e3d331_311723_1200x0_resize_q75_box.jpg)
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.](/work/mopar-owners-site/homepage_hu4c143f315cd9617447ae46739cfea2e4_1498465_1200x0_resize_q75_box.jpg)
![I included a prominent 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.](/work/mopar-owners-site/homepage-detail_huca110d08e6dc4fde9ec593baabb4e27e_1017635_1200x0_resize_q75_box.jpg)
![A vehicle garage enables customers to quickly switch between multiple accounts to easily manage their vehicles.](/work/mopar-owners-site/garage_hue38d975c79668c1dc21a809a65559513_450475_1200x0_resize_q75_box.jpg)
![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.](/work/mopar-owners-site/dashboard_hu6162baf3206bb149201bf02714a89a2e_632978_1200x0_resize_q75_box.jpg)
![Vehicle health reports provide a comprehensive view of the vehicle and quick access to maintenance scheduling at the closest dealer.](/work/mopar-owners-site/vehicle-health_hu8a7e2cff37b213700b55e5217c35f3b9_510483_1200x0_resize_q75_box.jpg)
![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.](/work/mopar-owners-site/product-catalog_hu3cf1bfe82ef945f1abd1327f5bf6882b_846654_1200x0_resize_q75_box.jpg)
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