Team: Creative Director, Project Manager, Developers and QAs Tools: Figma, UserLytics, Miro and Google DocsTimeframe : 3 weeks
The Price Page needs a redesign in order to be more intuitive and consistent with the rest of the live site. For this project, I started with a research based on: - Reviewing previous user test from Userlytics which compare Canada Drives Vehicle Description Page (VDP) and Price Page with one of our main competitors website pages. - Doing a competitive analysis from direct and indirect competitors. - Applying the heuristics and regarding to heat maps and analytics to see what components are useful.
After conducting this research, I created an Affinity Diagram and restructure the Information Architecture . Some pain points include: no hover state on the CTAs or users tend to click elements that aren't clickable, the user can't go back to the VDP to see all vehicle details, the add to favorites feature is only visible on mobile devices, some elements aren't used, confusing information and error messages, or going back one step at a time. Additionally, we considered how to structure the information and nice-to-haves and must-haves, such as combining the Price Page and the financing and cash flow.
Affinity Diagram The next steps involve the design of the wireframes. I started designing low fidelity iterations and wireframes. Then, I continue with some mid-fi and hi-fi iterations.
Low fidelity iterations Mid fidelity and Hi-fi iterations For the hi-fi wireframes, I designed two options: an accordion option and a step bar option. These two options were tested on an A-B test .
Option A - Accordion and Option B - Step Bar