J.D. Power Consumer Site - MVP Experience
Within the automotive industry, I played a vital role in the design of the J.D. Power consumer site. As the company transitioned from a third-party platform to an in-house solution, our objective was to establish a cohesive design system and a competitive MVP, addressing user needs throughout the car shopping process, while overcoming previous challenges of inconsistency and scalability.
Role & Tools
Team
UX/UI Design
Usability Testing
Accessibility
Director of Consumer Division, Director of Product, PM, SEO, Development, Partners/Sales, Designer (me)
Time
Company
J.D. Power
Oct 2020 to Nov 2021
Axure
UserTesting
Note: While the MVP experience was completed in 2021, we are still actively working on the site and introducing new features regularly.
The Goal
Create a consistent design system and competitive MVP experience that caters to user needs at all stages within the car shopping experience.
The Problems
1
Missing features and usability that were common amongst competitors.
​While conducting UX research to determine necessary MVP features, we found growth opportunities to be more competitive in the market.
2
Inconsistent UI elements and poor accessibility.
The existing site lacked a consistent style guide, grid system, and did not follow WCAG 2.1 accessibility requirements. This made scalable design and development challenging.
3
A 3rd party company was managing the original site.
We wanted to bring the code in-house to have full control. We needed to balance business requirements with user needs to maintain existing ad monetization and traffic levels.
The Design Process
Style Guide
After discussion with the Director of Product and development team, I built a new style guide document, with WCAG 2.1 accessibility requirements in mind. Branding for the site was already established by marketing, so the goal was to create a strong design system foundation to build off of.
​
With a newly established design system, the cross-functional team was able to work more efficiently and create a more scalable and consistent product.
Wireframes
I built wireframes for the core pages we wanted to address with this project:
-
Homepage
-
Cars for Sale
-
Listing Details Page
-
Year/Make/Model/Trim Research Page (YMMT).
​
Note: Due to contract deadlines, low priority pages were kept on the previous style guide for future prioritization.
​
Challenge: With the previous site already live, we had to balance the content, ads/revenue and site traffic from the existing pages with new features and UI enhancements.
Mockups
After several design revisions, I created branded mockups across mobile, tablet and desktop viewports that were given final approval from stakeholders.
Mockups
After several design revisions, I created branded mockups across mobile, tablet and desktop viewports that were given final approval from stakeholders. Due to business priority on ad monetization, I was challenged to balance clean design with ad requirements.
Final Outcome
I collaborated with the product manager to write stories for development. They prioritized stories in the backlog for 2 week development sprints. During each sprint, I assisted with design QA and worked closely with developers to ensure the final product met design and business needs.
​
After many months of work, the J.D. Power.com MVP experience is live. As with any design, the website is ever-changing and new features/optimizations are added regularly.
​
​