Redesign + New Feature + ADA Compliant: Responsive Enterprise Homepage

Project Summary

The project is to optimize the enterprise homepage. It is the most valued asset on a company’s webpage.

The homepage sets the tone for the company brand and culture; it also drives users to specific content.

Content strategy is essential when designing a homepage; ultimately, we want to encourage users to explore self-discovery by introducing focused content with a sense of hierarchy and actionable call to action buttons.


Business Goal

The business goal is to improve conversion rates to other website areas, including the blog and social media. The scope included a rework of navigation on the footer.

Design changes happened iteratively over 3 months. First, the header carousel posed some issues with the background image when going to smaller screens. The slider took the longest to implement because of the layout.

Following were the individual sections with divider bars with editable text and the footer, including the new social media area.

In this case, the website is responsive, so making sure all the content types display appropriately is critical.


UX Role

UX/UI focused on information architecture, visual design, interaction design, and content strategy. Understanding the content is valuable and necessary for the architecture of the page to flow correctly.

Developing a process of creating and loading content into the content management system (CMS) is essential. Specific sizes and standards need to be set in place as someone else usually uploads files into the CMS.

This project required working closely with:

  • Product Owner
  • Project Manager
  • Marketing
  • Front-End Developers
  • Quality Assurance

UX Insight and Findings

The first thing to do is a content audit of the site, removing redundant and out of date information. Then break it down to the minimum viable product (MVP); this allows a new architecture strategy for the content.

Focusing on available content types in the CMS helps determine the prioritization of the page layout. The business has priorities and initiatives, which drive part of the organization, but analytics and user testing help bridge the gaps between user needs and business goals.

After reviewing the analytics and working with a specialist around SEO, visitors on the desktop did not have the same goals as mobile devices.

Notable observation: not all content should live on the mobile version due to information overload on a smaller screen.

User activities on Desktop:

  • applying for jobs
  • reading industry news
  • applying for fleet business programs

User activities on Mobile (which mirror the mobile app):

  • redeem and track rewards
  • find travel centers and services
  • manage fuel receipts
  • find truck service centers


Design Intent

Making an ADA Compliant Site (after it’s built)

The homepage became ADA compliant using accessibility guidelines. Each section has another version to comply with color contrast and text legibility standards. A WCAG 2.0 (Level AA) validator used to evaluate each section of the site helped design decisions.

A new toggle feature was added globally to the header so users could go back and forth between two versions, one being made for accessibility and following contrast guidelines.

The effort it would take to re-work the site correctly was not feasible due to timelines; the toggle became a workaround. An influencer at the time was the Dunkin Donuts site.

Accessibility Toggle

Expanding the content to full-width and the top secondary navigation background creates an illusion of a full screen, even though the main content is in one column with a width of 1325 px.

Carousel with Color Contrast Off

Carousel with Color Contrast On

The Carousel

(1) The carousel and segment layout is designed for text to live on one side and the central part of an image on the right side. The carousel content should be legible and clutter-free because motion adds complexity.

The Blog Segment

(2) The business added the featured blog segment at the top of the site. It is controlled by CMS and can be turned on or off as far as visibility. The area was created to match the new style down below in the social block, which is also a redesign/add-on by business needs. It’s an effort to drive users to the enterprise blog.

(3) The feature block segments highlight different parts of the site, which acts as secondary navigation. The images are expanded to the edge of the screen for more of a modern look and adds a slight update feel (rather than a considerable design effort).

The images are configurable in the CMS and have a transparent gradient hardcoded; the background color (CSS) allows for the title, description, and call to action button (CTA) to be legible while reducing the image size. The CTAs are also softer with a 6px radius added to the corners, reducing the overall blockiness of the page.

Different designs were explored before leadership landing on keeping the current format. The reason being is that the CMS tool would need to be re-work ignorer for the design to be implemented, so the format using a gradient remained the same.

By expanding the individual blocks, the homepage becomes less bulky and more fluid.

Redesign Concept

Final Design

Mini Blocks

(4) The mini-blocks are existing featured blocks but sized down into mini-features, which bumps up the ever-growing social block down below. Adding the blocks to the bottom of the page balance the page from being too top heavy. Each block is interactive and takes the user to the top level page of each category. When hovered over, the blocks dim down as a signifier for interaction.

My Pilot Rewards, WIFI Connections, and Fleet Business

Social Media Block

(5) The social block is a new feature and redesign of what was currently there. The Facebook section is user-friendly with additional spacing for the rows and text, making it legible and less cluttered. The Instagram feed is a new feature added to the homepage, which resembles the app.

The blog section now resembles 4 column sections most common on blog pages. The social media layout was a huge effort for the developers and took some time going back and forth on implementation.

Low-fi Wireframe with Annotations

High-fi Wireframe with Annotation Numbers and Guides

Footer Block

(6) The footer was redesigned to reduce clutter and make it responsive friendly. Titles on each column are emphasized, and the lists under each column are toned down creating more visual space for the user.

The area is increased in-between links for legibility, and the social media icons are brought up to the top of the footer for visibility and to make it more prominent. Columns are cleaned up and information visual design principles are applied.

Desktop Footer

Tablet Footer – 768 Breakpoint

Mobile Footer – 320 and Smaller Screen Size


Challenges

An existing brand can be an advantage but also a disadvantage when it comes to visual design. Just because the brand has a color palette does not mean everything needs to be in those colors; everywhere.

Too much saturation can cause distraction among users, and content becomes lost. If the site colors do not have good color contrast and do not meet web accessibility standards, it will not be compliant with the WCAG 2.0 rules; thus not being accessible to everyone.

Visual grids and segmented content tend to look cramped in spaces, thus lack white space. Images are great visuals, but part of the challenge was that the business, not a designer, picked the photos chosen. The colors and pictures are a challenge and standards for copy, links, and titles were created.

Because there are several different content types, the sections were designed at other times and then piecemeal together at the end. This working method caused some development issues, lack of consistency, and made the big picture even harder to visualize until it was complete, thus needing last-minute updates and fixes.


Takeaway

Over time, content evolution will become a necessity, such as content strategy amongst business and product owners.

The carousel is a great way to drive traffic to other digital properties, such as the blog, press releases, and additional content on the site. The additional interactions act as a secondary navigation system for the site.

By continuous review of google analytics and focusing on high traffic pages, we can determine what takes precedence on the homepage and remove redundant content for optimization and relevancy.