The Gist
In 2018, uhaul.com was not responsive; there was one stylesheet that constricted content to 914 pixels for tablet and desktop screens and a separate stylesheet that provided a fluid layout for mobile devices. Over the years, our team put a ton of work into optimizing the mobile experience, but more and more, the coding and layout of the desktop pages held us back from innovation and improvements.
So, how do you begin a responsive redesign of a website with over 300,000 visitors a day? Many had approached the concept of a redesign with wide-sweeping style changes. These attempts failed because there were always roadblocks from product owners or executive leadership. If we attempted to release a redesigned site at all once, it would take us years, by the time Design and Development teams finished, the work would be obsolete.
From these struggles, I crafted a new strategy. We would roll out one page at a time. Slow and steady wins the race, right? The big challenge with this plan is that existing pages were incredibly outdated; how could we improve new pages to our full capability without sending out users to pages that looked vastly different?
Designing Inside the Box
The ‘box’ is often mentioned as a way to express limitations. In our case, it was a box with a tiny 1-pixel border that was inhibiting our innovation. In one swift move, we radically transformed the site by removing the outline of the content container and extending the header and footer to the edges of the page.
By giving the illusion that the page was wider (even though we didn’t change this existing 914px width), the development team could release pages as they were completed without making users weave in and out of vastly different designs.
Setting the Stage
To begin, I directed designers to dig into the usability of global item styling: readability of font families and sizes; accessibility of colors for people who suffer from color-blindness; A/B tests to determine user response to button colors and attraction to images vs. icons
Collaborative Progress
From this research, I compiled a master list of recommendations for review by the development team. Each suggestion was tested and approved by development to ensure that our concepts met the standards they would use for programming.
Moving forward, I identified the key pages that needed an in-depth redesign of content and layout. Working with product owners, I cataloged current needs and began to sketch out a UX plan.
The Results
A clean and informative home page was at the top of my wish list.
Learning from the past, I knew we would fail if we proposed drastic style updates. Since the main goal was clean-up and scalability, we took a conservative approach knowing that we could update and push innovation later.
Using the newly defined styles, we carefully expanded them; carefully respecting the power of the 75-year brand.
Scroll to see the entire layout…
