Background
The Dictionary.com website had not been completely redesigned in quite some time. Site features had been added here and there as the internal teams saw necessary in efforts to improve revenue and SEO, but they were not taking user needs into account. The result was a patchwork layout affect with pages of cluttered content that had no overarching, cohesive design.
As the sole designer for the product I was tasked with redesigning the website. The goal was to improve the overall user experience and drive growth by giving users what they are looking for, quickly and easily, without distractions, improve the search capabilities to make navigation easier, and surface more content by offering users opportunities to explore the site at the right moments.
Initially, the project had three phases with research & discovery, design, and engineering periods included in the roadmap for each phase. Phase One included redesigning the homepages for both Dictionary.com (DCom) and Thesarus.com (TCom). Phase Two included implementing a global header and evaluating the navigation. Phase Three included redesigning the Search Results Pages (SERPs) for both DCom and TCom.
However, due to a leadership decision, only the redesign of the DCom homepage was completed along with the associated user research. The product was never shipped live. That's the scope of what this case study will cover.
My Design Process
This project provided an opportunity to define the product design process flow for the cross-functional teams I was working with. Working with my UX Design pair, our goal was to create a reference guide to develop an efficient, cross-functional team workflow. The timeline below represents an ideal product design process flow from inception of a design feature through to completion along with actions to take in response to unplanned events.
This is not an exhaustive list of tasks for each department, but rather a high level outline of the critical methods used to capture user feedback and input from all Product Teams to integrate into design solutions through the collaboration process.
User Research
The goal of the research phase of the project was to identify user pain points in an effort to understand the reason behind the overall decline in traffic, identify user wants and needs, as well as areas for UX improvements. The plan was to utilize three resources for Quantitative and Qualitative data: an ongoing Typeform survey, UX Benchmark studies, and heatmaps provided by CrazyEgg.
Analysis of the Typeform survey revealed that the most common tasks users perform on Dictionary.com were:
These most common tasks were turned into questions and used in a UX Benchmark study. 10 participants were asked a series of questions around performing these tasks on Dictionary.com to identify any existing functionality issues on the website. The key insights from participants overall impressions of the homepage were:
Benchmark Homepage Insights
Participants were also asked to identify what they considered to be the most useful content sections on the current Homepage:
Most Useful Homepage COntent
- Search (including dropdown menu)
- Word of the Day
- Games & Activities
- Modern Language Dictionary (slang, emoji, gender specific dictionaries)
- Editorial content
Up until this point, no one at Dictionary had done extensive user research like this. Most if not all of the perceived problems the team suspected the website had was based on internal speculation. These benchmark tests were intended to validate whether the suspected issues existed for actual users and whether there were other issues that had been missed or not considered.
The third part of the research was analyzing heat maps on the desktop and mobile homepages. You can see from the homepage desktop heat maps below that the navigation and search bar are the most white hot areas of user interaction. An evaluation of the navigation was included in the next phase. The average fold for this page is 748px and interaction drops off significantly after that point until "Browse by Dictionary" at the bottom of the page.
The maps revealed that the search bar (which received approximately 20M clicks in the previous quarter) along with the Word of the Day (which users were scrolling down past the Grammar Coach hero banner to interact with) had the most user interaction on the homepage. Games & Activities came in next along with the Modern Language Dictionaries. This was consistent with the feedback gathered during the Benchmark studies.
With this research complete, I moved on to auditing the homepage content to identify what was useful according to users, what could be removed, and how to prioritize each section. The image below shows how this was done in FigJam. The content in each section was labeled and any links were pasted in long form. I then tagged any sections that were duplicate or repetitive and color coded where each link went, blue for Dictionary.com, orange for Thesaurus.com, green for Lexico (a phased out project), and yellow for offsite.
This revealed helpful insights regarding the homepage content, for example, six links in the the "Learn About the English Language" section go to the same page and one is duplicated elsewhere on the homepage. This combined with the near non-existent interaction on the heat map makes the decision to remove this section without sacrificing value to the user very easy.
Problem Definition
With the user research and audits complete, I got with the Product Manager for the project and defined the problems we would try to solve with the redesign.
User Insight
💡
Dictionary.com users need to find content quickly and easily with as few distractions as possible.
How Might We Statement
🧐
How might we improve our search capability to make navigation easier, surface more content, and redesign the homepage in order to give users what they're looking for quickly and easily without distractions?
