Interaction design ▪ Usability testing

Overview

For 20 years, Web.com has been helping over 3 million small businesses succeed online, but its website was stuck in the past.

The website evolved into a patchwork of offerings as the company acquired more products. Web.com needed a website that could acquire potential customers, convey strong brand affinity, and serve as an authoritative resource for small business owners.

As a UX design intern at Yodle (acquired by Web.com), I designed the main product page layouts, navigation, and interactive hero. I worked on a cross-functional team with UX design, marketing, and visual design.

New web.com site

Information architecture

Given the breadth and technical nature of Web.com's products and services, the challenge lay in aligning with our users’ language and mental model. I tested the site architecture, navigation, and copy with Usertesting.com.

Sitemap

Navigation

The goal was to enable users to quickly find what they’re looking for. I designed the desktop and mobile menus to enhance the scannability and discoverability of products.

Full-bleed mega menu and full-screen collapsible menu

Since each product page is long and content-heavy, I designed a persistent sub-navigation bar that (1) listed the main sections to provide a flexible browsing experience and (2) highlighted the call to action to increase conversion to leads.

Interactive hero

The goal of the hero was to drive the human element and match users to products that fit their business needs. Using Framer, I built lightweight interactive prototypes of two concepts, Madlib and Chatbot. I guerilla tested the concepts with 5 users to gauge their impression.

Both concepts were perceived as helpful and efficient, but users found the product language confusing. We reworked how we asked users about their business needs. Due to greater scalability and efficiency, we decided to start with Madlib concept.

Chatbot prototype

Development

To facilitate handoff with an external development team, I annotated each wireframe with the functional specifications for each interactive element.

Product page specification

Retrospective

Given the large number of stakeholders involved in the redesign, I learned how to more thoughtfully craft and communicate the rationale behind each design decision. I adopted the mobile-first mindset and widened my prototyping toolkit.

In hindsight, I would have pushed myself to explore more broadly both during the initial brainstorm and subsequent iterations. While I did conduct comprehensive competitive and best practices research, I wished I had better rooted my designs in user needs rather than primarily rely on the content and structure provided by the marketing team. I would have also applied universal psychological principles on how people read and make decisions.