Designing a More Effective Homepage

The Need for a Better Design

Our team was tasked with updating the Buick.com homepage to help users more easily find relevant content.

There were several pain points to address. The first was the hierarchy of information on the page: too sales heavy and not enough emphasis on the brand and the products. For example, on page load, many of the vehicle models were hidden behind extraneous navigation, making users hunt for the vehicle they wanted.

The second problem was that featured content such as events or new product innovations didn’t have any representation on the home page. Deep linking was available only through the header and footer menus, already overflowing with options. This derailed the user experience for inbound visitors from PR and social media.

The third issue was a technical limitation: no new enhancements were available for the page redesign, it had to be done entirely with the existing system of components.

Opportunities for Improvement

I saw several opportunities with this project: to introduce some fresh design thinking to differentiate the types of content, to eliminate cumbersome navigation, and to make the page better reflect the brand story and help users find meaningful content about the key areas of focus for the brand.

Concurrently with this homepage redesign, our content team had received approval to introduce teaser videos for new vehicle models across the site. I had worked closely with them to work them into the masthead areas on each model overview page, and they were pitching the idea of introducing a brand teaser video on the home page.

Research and Planning

We had a directive to keep prominently featuring retail offers, a high priority item from a marketing perspective. After doing some exploration of the current page on different devices, I determined that the height of the masthead section containing these promotions was pushing content down the page. The height had to be limited to prevent most users from having a visual cliff and missing important content below.

The other aspect of this need to feature retail offers was the competition for space in the masthead. When the content team got the go-ahead to produce the brand teaser video, we teamed up to explore ways to give prominence to this content.

By researching other leading auto manufacturer’s sites, we determined that a 6-10 second teaser would be pleasing to the user, covering enough of the range of the product line, while not being too disruptive to the flow of the page. In short, the video could live in the masthead. I was careful to keep the height limitation in mind, knowing I would have to provide direction for aspect ratio to the creative team.

To help support additional content, first I compiled a list of the types of content that would be rotating frequently, and another list of types of content that could be more permanent, only changing once per quarter or less.

Exploring Options

While exploring using wireframes for discussion with the development team, we discovered that our existing slideshow component did not support our required video format. I was then tasked with exploring ways to still show the retail offers prominently, despite the fact that the video content would be by itself at the top of the page. The idea that won out was to move the retail offers into their own slider farther down the page, but we kept a “safe” option of placing the offers.

Since exposing all of the vehicle models in the current 4-column grid would have made the section much too large, I explored ways to use our existing grid system, arriving at a 6-column grid that would neatly fit all of the items and keep the size within proportion to the page.

I moved the row of “Shopping Tools” buttons higher on the page to make them easier to find and ensure more people could more easily deep-link into the sales funnel.

The additional content from the more permanent list was reserved for a feature section, starting with a soft-sell promotion for the newest luxury SUV using a large feature image and supporting headline and secondary images with a prominent CTA leading to the model overview page.

The content in the frequently rotating list presented a new use case for the website, so I also explored new treatments for this section.

Thinking Forward

I used the wireframes to communicate content needs to the team, and get buy-in from the project stakeholders.

In order to keep everything within existing components, I did a deep dive into the style guide and components, finding enough flexibility to support the new layouts with minimal adjustment.

For the client presentation and to demonstrate the responsiveness of the new layout, I went beyond our standard static comps in Sketch and built the page in Webflow. The resulting prototype was well-received, and with minimal modifications carried through to our conversations with the development team to demonstrate the direction for the final build.