Jeep® Badge of Honor

Refresh of the Badge of Honor app interface - Implementing a new design system

Role

Year

UX & UI Design

Client

Jeep®

2022 - ongoing

Background

Jeep® Badge of Honor is a brand engagement platform for enthusiasts of off-roading adventures. The product helps with discovering new trails and engaging Jeep owners in the growing community through events and gamification aspects. As of now, the app has over 15k ratings with an average rating of 4.8. The app allows for brand engagement in the form of gamification and ordering hard badges to be displayed on one's proudly-owned Jeep vehicle. The tangible element of the experience connects to the real-life off-roading adventure and drives excitement among Jeep owners.

Goals

This product was developed several years ago and was built without an established design system in place. The components were not cohesive, and the product looked chaotic, which impacted the perception of the brand and general usability. The high-level goal of the UI redesign was to introduce consistency between the visual elements to make the product reflect the professionalism of the brand.

Challenge

For this project, we implemented a design system that’s scalable, elegant and accessible. The most challenging part was the detailed focus on how each new component I design can be scaled in the future. As the project was in a lot of design debt, I kept in mind how the elements I’m working on will be used now and in the future. Another challenge was the lack of access to real users for testing - the design decisions were based on the SME input, who knew what features and design components would be the most successful.

My Impact

I worked on redesigning multiple pages of the product component by component, in collaboration with the senior designer and the engineer. My focus was on translating the old comps into a new design, building the new design system, creating a consistent set of components and pages, and improving the overall experience for new and established users.

Process

Ideation and Iteration

As my teammates finalized the design audit and core elements of the design system, I worked on redesigning assigned pages and components by using the existing system elements and adding new ones whenever required. All stages of ideation required keeping design heuristics front of mind. On top of that, I focused on presenting the information needed for the user in a way that brings them the most value from perusing each page. Below are the main principles I was always mindful of during ideation.

Knowing the answers to these and more questions allowed me to successfully approach the redesign of each component with the user at the center. Each exploration process gave a start to multiple versions and iterations that were discussed with the team and selected for the final implementation. For each component, my goal was to create several ways to present the information and create a new pattern that can be scaled later, whenever needed.

Keeping It Simple

I approached the project in a pretty traditional way, trying to keep the flows simple with a touch of fun, without any overwhelming elements or steps yet still allowing the user to accomplish tasks such as checking into the trails or ordering hard badges.

Conclusion

This is one of my favorite projects I got to work on so far. Jeep is such an iconic brand with exciting traditions. As it’s an already existing app with over 15k ratings with an average rating of 4.8 and an established base of users, it was a pleasure to help improve the experience for so many people in terms of enjoyability, cohesiveness and information layout. A chance to completely redesign the existing interface doesn’t come across very often, so it was a great opportunity to flex that creative muscle and get into the heads of the users of such an adventurous and fun brand.