Lead generation through homepage optimization
The project is to optimize the enterprise homepage. It is the most valued asset on a company’s webpage.
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.
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, as well as making the site accessible through a toggle with color contrast options.
Design goal
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.
“the homepage sets the tone for the company brand and culture; it also drives lead generation“
Role
Lead designer: 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
- SEO Consultant
Design insight
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.
“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 responsive mobile (which mirror the mobile app):
- redeem and track rewards
- find travel centers and services
- manage fuel receipts
- find truck service centers
ADA compliance
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.
Accessibility challenge
Due to timeline constraints, it was not feasible to re-work the site correctly, so a toggle was implemented as a workaround. The Dunkin Donuts site, which also used a toggle for color contrast, was an influential factor in this decision.
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.
Intentional design
The carousel layout was 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.
Homepage: Before and after.
The business added a 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.
The feature block highlights 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.
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.
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.
The footer block 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.
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.
Takeaways
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 analytics and focusing on high traffic pages, we can determine what takes precedence on the homepage and remove redundant content for optimization and relevancy.