Homepage product launch

Role

Research, Wire framing,  UI Design

Company

Datto - 2020

Tools

Figma

summary

The current experience

In 2020, I spearheaded the update of Datto's homepage, navigation/product dropdown, and footer as part of a new product launch initiative. Having originally designed the homepage in 2019, this project presented a valuable opportunity to incorporate user feedback and further enhance the user experience.

The problem

Room for Improvement

Through user interviews conducted for our website, we identified several challenges with the old designs, including a lack of conversions from the homepage to product pages.

Homepage

  • The language on the homepage for the product pillars was confusing and didn't drive to a specific product.
  • Users were having trouble figuring out where to click both on the pillars and on general language around the homepage CTA's.

Navigation/ Product Dropdown‍

  • The navigation itself had contrast issues with white text appearing over a gradient background that didn't pass web accessibility.
  • The dropdown product menu was separated under pillars which the user had to hover in order to see the products. This had a small hover area and users would often accidentally un-hover the tab as they tried to select a product.
  • The product pillar language was causing confusing.

Footer

  • The footer was hard to scan and navigate with too many items listed so users were having a hard time finding the information they were looking for.

THE GOAL

A few key pieces

Based off the users need I came up with a few key solutions for the new design.

  • Categorizing products and clearly distinguishing between products and devices with concise descriptions for easier navigation.
  • Adding more content about Datto's services and information tailored to Managed Service Providers (MSPs), Datto's partners or potential partners.
  • Featuring key events or products in a slider at the top of the page, ensuring the mobile slider version is above the fold and adheres to mobile best practices.
  • Changing the navigation to click-to-open to prevent accidental hover-outs.
  • Updating illustration styles to align with new design standards.
  • Reducing clutter and streamlining navigation to reduce the number of clicks needed for users to access key information.

THE PROCESS

Competitive research

I completed a competitive analysis of other websites with complex navigation to determine the best way to consolidate and display the different product areas.

View analysis deck

ITERATING

Visual design iterations

I experimented with various navigation widths, icon styles, and color combinations.

Final designs

Navigation

The revamped navigation now organizes products into distinct content pillars, prominently showcasing our packaged product solution. Each product is accompanied by a brief, scannable description of its purpose. Additionally, the navigation now opens upon click, eliminating the previous issue of disappearing on hover and providing a smoother browsing experience.

Product section

The redesigned product section mirrors the navigation flow but enhances it with more detailed descriptions. Positioned at the top of the homepage, it provides users with a comprehensive overview of our offerings as soon as they land on the site.

Footer

The footer has been revamped to display only the most popularly clicked or searched functions, grouped into easily scannable sections. This update also minimizes distracting blue text, improving user focus and readability.

Linkedin