Responsive redesign & design system creation for DriveTime Car Sales

Project background

Bringing mobile and desktop sites together into one responsive site

When we took on this project, we were still operating separate mobile and desktop sites - maintaining two codebases, designing two unique experiences for every project, and our desktop site was falling behind in terms of functionality and experience. A responsive redesign meant we would be able to streamline our work and reduce inconsistencies.  

Scope and constraints

Together with our leadership and product groups we defined what we wanted to achieve and our approach.

• Mobile first: We would use the mobile codebase and design as our source of truth for creating a new desktop experience.
• Maintain the user experience: We would maintain the functionality and layout of the existing desktop site as much as possible to avoid introducing friction to the desktop user.
• Streamline UI elements: Our current UI was created ad-hoc and we didn't have a design system to pull from so we determined we would streamline the UI and create a design system.
• Pilot experience: We would pilot the new responsive site to make sure it was performing as expected.

Process

Wireframes, heatmaps, and sitemaps

Our mobile and desktop sites had different setups so my first step was to meet with our development team to walk through the code structures. Together we created wireframes of each page outlining how they were built and comparing the structure/content. This helped to ensure I was scaling my designs in a way that would minimize rework or duplicated code.

Together with our analytics team we used those initial wireframes to create heatmaps and identify the most impactful parts of the mobile and desktop sites. We defined which elements/pages we wanted to keep and created our final sitemap for the responsive site.

UI audit and design system creation

Until this redesign, all of the elements on our site were created à la carte (and you could tell). We decided the best path forward was to create a design system. My first step in this was to perform a full UI audit. I analyzed all of the pages in our sitemap and documented any repeating patterns or elements. From there I examined how they were styled and what function they were performing and consolidated all of the different styling into reusable components.

For example, I found 24 different button styles with varying colors, font sizes, drop shadows, padding, and border radius. I narrowed that down to four different styles and three different colors. I used this same method to refine our typography, color schemes, link styles, icons, and content.

Design

Based on our research, wireframes, and heatmaps, I designed mobile, tablet and desktop views for every page on the site based on the pre-existing mobile site combined with our new design system. My goal was to match the layout of the current desktop site as much as I could so there would be minimal disruption to current users.

Results

One month after we launched the responsive site, we were seeing a positive change in both conversion and bounce rate compared to the old desktop site.

We were also seeing improvements in design time and development time. Overall, the responsive redesign and design system implementation successfully improved customer experience while also making design and development more efficient.