Background
The Dictionary.com website had not been redesigned in quite some time. Over the years, features had been added to improve revenue and SEO, without considering user needs. This resulted in a cluttered, patchwork website layout that lacked a cohesive design.
As the sole designer, I was tasked with redesigning the website to enhance user experience and drive revenue growth by providing users with quick access to information, improved search capabilities, and content surfaced at opportune moments.
The project was initially scoped into three phases that each included research, design, and engineering work:
Due to a leadership decision, only the first part of Phase One, redesigning the Dictionary.com homepage, and associated user research were completed. The homepage redesign was never launched also due to a leadership decision.
This case study focuses on the completed work for the Dictionary.com homepage redesign, detailing the research and design process involved.
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?
