We completely overhauled the content, user experience, and visual design of Web.com. After launch, we observed a small impact to SEO and conversions, which quickly rebounded and continues to improve as the team iterates on the new design.
We also created a set of components so product teams could quickly and easily manage their web presence through a content management system, which freed up engineering resources to focus on other initiatives.
Web.com lacked a modern, user-friendly website that helped prospective customers learn about the company's different products, and find the product that best fit their needs. The original website hadn't been updated in years, was difficult to navigate, and was ruthlessly littered with pages & content that existed solely to beef up the website's SEO performance.
Additionally, even the smallest copy or image update was expensive and time-consuming, since it had to be scoped and implemented by a front-end developer. The proposed solution to this was to use a content management system (CMS), so product marketing teams could fully own the content authoring process; in the long-term, this would also free up engineering resources for more critical work.
Web.com stakeholders chose Adobe Experience Manager, a CMS that allows users to create websites using page templates and UI components. While those building blocks seemed limiting at first, it provided constraints that helped us prioritize the types of content we would need. In retrospect, that constraint was doubly helpful because we ended up with a set of scalable and reusable UI elements, which we've since used to create new pages with minimal effort.
Beyond updating the visual aesthetic of the website, I wanted to solve deeper problems with the website's content, how it was organized, and how it was presented to users. A new content strategy, informed by an improved information architecture (IA), would help us inch closer towards our main goals:
We knew, from both anecdotal evidence and usability studies, that the old website was problematic for a couple of reasons:
And the list goes on. I knew we would have to start from scratch, and really understand how to best organize the content so we could help prospective customers find the right product, quickly and easily.
Beyond the run-of-the-mill pages you see on every site (e.g. About Us, Careers, Contact Us, Support), the foundation of Web.com was going to be its product pages. In order to help prospective customers quickly and easily find the product that best fits their needs, the website's IA would need to closely fit their mental model. I used a card sorting exercise to get a glimpse at this mental model.
In the test, the cards had the product outcome rather than its name. For example, rather than "E-commerce", the card would read "Get a website that lets customers buy your products". This was especially useful since some of our product names, like "Lead Stream" and "TORCHx" had little to no significance for our prospective customers. Here's a sample result of the test:
We were looking for trends: what outcomes were bring grouped together? Where did we observe overlaps between the groupings different participants were creating? What were participants naming their groups? We used Optimal Workshop to create this test, and used a website intercept, as well as UserTesting.com, to source participants. Optimal Workshop provided handy visualizations of the results, like the one below, which helped us narrow down our groupings:
This visualization of the test results is a similarity matrix. The higher the number, the more "similar" the products are, based on the responses of our test participants. We could quickly see which products were easy to group, and which ones would be difficult to group. In some cases, this was OK. For example, "Get business intelligence for your franchise network" was easily ranked the least similar to all our other products. This made sense, because as the only enterprise product we offer, its outcome and value is very different from the other products, which help small businesses with their online marketing.
I put together a proposal for the new information architecture along with the findings from the card sorting research. At this juncture, I was working closely with the product marketing lead on the project to make sure we were aligned when presenting to executives. Going through the results, we found 4 clear categories with varying levels of agreement across testers for how our products & services fit within each category.
A few of our products, including Hosting, Domains, SSL, and E-commerce, could potentially fit into two categories, and others, like Reputation Management and Centermark, didn't fit very well into any category. We went through a couple of options with the stakeholders, and gathered their input in order to finalize the information architecture. There were a few key business decisions that really helped us get the IA to a final (for now) stage, such as:
The final structure looked like this (rounding it out with other corporate identity pages):
Working closely with product marketing to define content strategy, and define content blocks for each product page
Create wireframes from that point - through that process created individual components that we reused through design process, from low to high fidelity. Worked with our intern, Betsy - let her take the lead on thinking through the layout for each page based on the content hierarchy and objectives for each product page. Also let her take the lead, later on in the process, in presenting progress to stakeholders.
"Related products" cards - help users explore our product offering, and provide an exit path if they aren't interested in the product they're viewing
Sticky subnav with CTA - given conversion focus, and to simplify visual hierarchy (fighting asks to place multiple primary CTAs on pages)
More modern, visually pleasing, good aesthetics
Improved content (very content-driven design process) to facilitate learning by our prospective customers
Improved navigation and IA to help customers find best product for them, from groupings to simple explainers in mega menu of what each product is, to creating clear value propositions in each product page, and clearly calling out how they can get in touch (call, form, etc)
Now we are using components to launch new pages, and looking to iterate on certain aspects of the design (navigation, for example), and think more holistically about the customer experience, looking at this website as one piece of the puzzle