Executive Summary
Redesigned an existing web app to be responsive based on a scalable framework. >30% of myCARFAX.com users and climbing were using the site on a (non-tablet) mobile device, and the existing web app was not responsive at all -- obviously this meant mobile usability was lacking. In addition to finishing the redesign, I helped to transform the client’s product management culture by incepting a design system practice that led to further harmonization across design, dev and product roles.
Starting Context
CARFAX is a large company that started out by offering Vehicle History Reports to consumers, especially for those looking to buy used cars. It has grown to its current size and user base through several digital products. Of these, myCARFAX (subsequent to this project rebranded as "Garage") was its most recent addition. myCARFAX is a digital portal (web and native) that allows a user to stay on top of their car(s)’ maintenance, while offering information on service and repair costs, as well as a directory for nearby trusted shops. Its importance to the business cannot be understated: CARFAX’s research clearly pointed to an engagement spike at the “purchasing a car” and “selling a car” points in the customer lifecycle, but a huge drop-off in-between. The importance of myCARFAX from a business perspective is to close the experience gap by offering a tool that provides value to customers throughout the largest and theretofor least-covered part of CARFAX’ customer lifecycle: “owning & maintaining a car.” At a higher level, this product helps to solidify the CARFAX brand among car-owners as the “go-to” for all things car-related.
Project Stages & Deliverable Samples
1. Initial Project Understanding Synthesis, which I prepared and used during our client kick-off workshop to establish what goals we believed we were pursuing (at least at the beginning of the project)
2. Ethnographic Research Synthesis, which I used to summarize the overall picture of the “car ownership experience” and would be a precursor to a deeper round of research that would help create a rudimentary customer journey map.
3. Interactive wireframe prototypes, which I used to test different flows with users (using Invision).
4. Usability Tests Summary & Analysis which I used to illustrate the findings from the incremental testing we did using the interactive prototypes.
5. Responsive Design Blueprint which I used to communicate the overall architecture of the responsive app to the devs, including element naming, relationships and usage.
5. Business Logic Flow Diagrams which I used as a platform for conversation between various stakeholders within CARFAX when discussing brand new features and UX flows that relied heavily on business logic
6. An early style guide which I used to communicate standard design components to the development team, to minimize repeat questions regarding styles (CARFAX did not have a unified brand style guide at the time of the start of the project)
Viewable Active Project Asset Links
Invision prototype, myCARFAX Responsive Web App, mobile: https://invis.io/AV7X63RB5
Invision prototype, myCARFAX Responsive Web App, desktop: https://invis.io/B861YY7GU
Pre-redesign state: www.mycarfax.com (create free account to see post-sign-in experience)
Current site: https://www.carfax.com/Service/garage (create a free account to log into designed section). See screenshots below (new URL adopted sometime between 2018 and 2019)
PROJECT NOTE: The following screenshots were current as of May 31, 2018, when myCAFAX.com was an independent URL. More recently, CARFAX has integrated the site into their primary sitemap under “My Car Maintenance” and has adopted the visual UI language I created for them more broadly across all their other site sections.
The “Dashboard” shows a user the most important immediate facts about a particular car in their garage.
