Product Design | January, 2022 Redesign

Case Study | Unshipped Project

My Role
User Research, UX Benchmark Testing, Product Strategy, Wireframing, Prototyping
Figma, FigJam, UserZoom, CrazyEgg, Typeform
5 Months


Users are unable to find what they're looking for and state that the content on (DCom) is cluttered and overwhelming. Some users mistake marketing content for third party ads, causing a reluctance to interact. Additionally, organic traffic, direct traffic, and return visits are declining across all devices resulting in a negative impact on revenue.


Identify user pain points in an effort to understand the reason behind the decline in traffic. Redesign the site to improve the overall user experience and drive growth in both direct and return visits by:
  • Giving users what they are looking for quickly and easily without distractions
  • Improve our search capabilities to make navigation easier
  • Surface more content by offering users opportunities to explore at the right moments
The 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 (DCom) and (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 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 to identify any existing functionality issues on the website. The key insights from participants overall impressions of the homepage were:
Benchmark Homepage Insights
  • Amount of content is overwhelming
  • Lack of an overall focus or starting point
  • Users mistook "Grammar Coach" CTA banner for 3rd party content and were reluctant to click on it
  • Search bar should be more prominent
  • Navigation is not intuitive (*saved for phase 2)
  • Browse by letter is useful and should be moved up on the page
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, orange for, 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
💡 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?


With the user research, insight and HMW statement in mind, I set about creating mockups for each section of the home page content. My intent was not just to reorganize existing content, but to redesign and reimagine how it functioned.

A good example of this is one of the first items on the homepage, the Word of the Day carousel. I partnered with our Brand Designer and collaborated on the best way to present the redesigned Word of the Day. He had a color concept that matched the card colors to a day of the week, proposing that the color scheme would be the same on the website and across all of Dictionary's social media accounts.
This would reinforce the brand and allow users to get used to one color for Monday and so on. I designed the carousel to increase homepage interaction and (try to) give users something more to do than just enter a search word and hit return.
Another example of redesigning the homepage experience was the new search functionality I designed. Although this wasn't technically in the scope of this phase of the project, redesigning the search box area itself was, so I went a little further and explored some search solutions in lo-fi.

Here, when users first click into the search, on the empty state, they're shown a large dropdown menu with various types of content in an effort to surface the numerous offerings from DCom in a search box that sees 20M clicks per quarter.
The search box itself is separated as well so users can refine their search category and choose what type of result they would like to see whether it be a Definition, Synonym, Antonym, Grammar, or Vocabulary search result.

Next Steps

After completing the user research and mockup phases of this project, leadership decided to revisit the direction of the project. Ultimately, they chose to put the project on hold to give newly hired team members a chance to align on the overall direction of the project. Due to these decisions, this is the final state of this project.