Mopar

UI, UX, Design Systems


Mopar serves as the service arm wing for Stellantis’ brands such as Jeep, Dodge, and Ram as well as others. Serving as the creative lead for Mopar, I was tasked with inheriting a design system, while at the same time, navigating it’s complexities to modify elements throughout the course of the project. 







WORKING WITH AMBIGUITY

With no resources for user testing, a/b testing, and heatmaps, we relied on the following to achieve success:

  • Conducted Research: As there were no specific requirements, I began by researching Mopar’s brand and the automotive industry as a whole. This helped me gain insights into the client's preferences, user needs, and the latest design trends in the industry. The research also helped me understand the challenges faced by the automotive industry and how a design system could help address these challenges.
  • Analyzed Existing Designs: Next, I analyzed Mopar’s existing designs, including their website, marketing materials, and product interfaces. This helped me identify common patterns and elements that could be used to create a design system.
  • Developed Guidelines: Based on my research and analysis, I developed a set of guidelines for the design system. These guidelines included the brand's visual identity, color palette, typography, and design principles. The guidelines also included specific instructions for designing various components of the system, such as buttons, forms, and icons.
  • Iterative Design Process: With the guidelines in place, I started the iterative design process. I created various design concepts for each component of the system, such as buttons, forms, and icons. I then presented these concepts to Mopar for feedback and made revisions based on their input.
  • Collaborated with Developers: Once the designs were approved, I collaborated with developers to ensure that the design system could be implemented effectively. This involved creating a detailed style guide, providing CSS and HTML code snippets, and testing the designs across various devices and screen sizes.


BRINGING NEW FEATURES TO LIFE

The design system was successfully implemented by Mopar, and it received positive feedback from their users. The system was easy to use and consistent across all products and interfaces, which helped improve the brand's overall user experience. The system also allowed Mopar to save time and resources by reusing design elements across various products and interfaces.

Project Manager: Kyle Sun
Senior UX Designer: Christopher Santoso
Design Director: David Hong
Junior UX Designer: Aleena Aamir

©2023 Christopher Santoso
Chicago, IL