Website and design system for DriveTime.com

The problem

Maintaining separate websites and codebases

At this time DriveTime had separate mobile and desktop sites, which meant maintaining two codebases, designing two unique experiences for every feature, and a lack of consistency in functionality and design. To fix this we needed to bring the two sites together into one.

The solution and the scope

Together with our leadership and product teams, we defined how we wanted to approach this problem and what we wanted to achieve:

• Mobile first: We would use the mobile codebase and design as our source of truth for creating a new desktop experience.
• Consistent user experience: We wanted to match functionality and layout of the existing desktop site as much as possible to avoid introducing friction to the desktop user.
• Design system: Our current UI was created ad-hoc and we didn't have a design system to pull from so we decided to streamline the UI and build up a foundational design system.

Process

Wireframes, heatmaps, and sitemaps (oh my)

My first step in this project was to meet with our development team to understand the code structure of our mobile site. We created wireframes of each page outlining how they were built and comparing the structure and content between mobile and desktop. This helped to ensure I was scaling my designs in a way that would minimize rework or duplicated code.

From there, I worked with our analytics team to create heatmaps for the desktop wireframes and identify the most impactful elements.

The wireframes and heatmaps, combined with our leadership objectives, helped us define which elements and pages we wanted to prioritize in the rebuild. I created a robust sitemap to help guide the project going forward.

UI audit

Until this redesign, all of the UI elements on our site were created à la carte which meant every one was just a little bit different. Rather than build our new responsive website on this faulty foundation, we set out to create a design system. My first step in this was to examine all of the pages in our sitemap and itemize any elements that were performing similar functions, making note of their styling, functionality, and any improvements that could be made.

This research formed the basis of our shiny new design system. I streamlined, edited, and tweaked our UI elements as needed and created a scalable design system that could grow as our site did.

Design

I designed mobile, tablet and desktop views for every page in the sitemap based on the pre-existing mobile codebase, combined with our research and new design system. My goal was to minimize disruption to our current users.

Results

One month after we launched our new 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 and development time. Overall, the responsive redesign and design system implementation successfully improved customer experience while also making design and development more efficient.