PRODUCT DESIGn: core product redesign
Dictionary.com's Global Navigation Redesign
I was a key player in Dictionary.com’s global navigation redesign as a product designer spearheading the research process.
Overview
Role
Product designer
Project timeline
6 weeks
Team
Me, UX design teammate, product manager, engineers
Tools
Platforms
Desktop, mobile, tablet
Dictionary.com’s brand problem
In mid-2020, an agency was hired to rebrand Dictionary and Thesaurus.com, which is where they got their highly recognizable “Dictionary-blue” and “Thesaurus-orange” originated.
→ The agency didn’t fully take product design into account, so there were some brand-to-product translation issues to tackle. “Thesaurus-orange” was an accessibility nightmare, particularly when paired with white backgrounds or white text.
This accessibility issue was the crux of so many product design roadblocks, and up until the point of site-wide redesign discussions, it was the proverbial thorn in the design team’s side.
Project goals
Solve for Thesaurus-orange’s accessibility issue
Establish brand consistency
Increase usability
Research
Heuristic analysis: fail
My teammate, Laura, and I started with a heuristic analysis of the previous design. It failed visual hierarchy because:
Dictionary and Thesaurus.com were not clearly delineated from the rest of the navigation links.
there were too many sub-links within each navigation link.
the dropdown menu took up an inappropriate amount of space and blocked a vital component of the page: the search bar (see image below).
Usability testing: also failed
To set a baseline for future research, I ran 20 unmoderated usability tests via UserZoom.
Main findings indicated that testers failed to understand:
what the category “Meanings” meant.
the difference between navigation links like “Grammar 101” and “Writing Tips.”
that clicking sub-navigation links would not route them to landing pages.
Naming conventions: you guessed it—another fail
Cross-functional collaboration with content and analytics teams as well as a card sort test provided clarity to our process.
Previously, an incredibly vague title "Meanings" represented a list of culture-based sub-dictionaries. Based on the card sort and usability study findings, I recommended “Pop Culture”, which is what we went with. To avoid confusion, the “Culture” sub-dictionary (circled) was removed from the list, but still remained live.
UI Design
Early wireframes: ribbon configurations
At this stage, my primary goal was to maximize the space on the screen dedicated to content while maintaining legibility and accessibility in the header.
Around this time, the “ribbon” (with the Word of the Year announcement and CTA) was becoming an anchored component associated with the header, so I had to account for that as well.
Based on competitive research, I tried out different ribbon configurations.
After the first round of iterations, we decided that the navigation header would scroll with the content, which eliminated some of the space constraints on the smallest breakpoint.
→ As a result, I was able to experiment with the additional vertical space in my later iterations.
Word of the day ribbon splitting the navigation
Word of the day ribbon below the navigation
Problems with color
As mentioned, Dictionary-blue and Thesaurus-orange were very strong colors and often used injudiciously throughout the site.
→ For an attempt at brand consistency, when the team used blue text links on Dictionary.com, the creative direction was to replicate that pattern on Thesaurus with orange text links.
The result: Thesaurus patterns never passed accessibility standards.
Solutions with color
So I asked: What if we reduced the need for color in the first place?
Minus color: Dictionary.com
Minus color: Thesaurus.com
I realized how much a little touch of color can make such a big impact. I inverted the colors from white text on blue/orange to those colors in a white frame.
→ This was an elegant and rather simple solution that ostensibly solved the color issue, but has yet to be tested.
With minimal color: Dictionary.com
With minimal color: Thesaurus.com
Impact
Necessary adjustments to the live design
When the new navigation header shipped in Spring 2023, it was comically large, height-wise—it took up nearly half the page. This was because the components (tabs, search bar, and navigation links) were stacked vertically.
→ After adjusting the stacked components to reconfigure the search bar and navigation links horizontally, Dictionary.com saw a spike in revenue, which was attributed to improved ad-viewability.
Success metrics
As of January 2024, the team had not yet reviewed the metrics for the header, primarily due to the ongoing redesign process that has not yet completed, but the team does have a point of reference as a result of the baseline usability research.
For future evaluation, metrics to take into account to measure success would include:
Feedback, via customer service
Usability, via qualitative testing to establish whether users are able to find the pages they seek
Retention, to determine if users are understanding, staying, and returning, etc.
Reflections
Challenges and personal growth
It felt incredible to take part in such a high-impact, highly visible project. It was an excellent opportunity to flex my research muscles, and a great transition into my full-time user research role following its conclusion.
A prime challenge I experienced was when I took on the baseline usability study analysis. Looking back, I could have been more concise with my data-to-insights process, which I later learned from my mentor in my UXR role.
In a similar vein, as a result of the scale of the research portion, I found myself overwhelmed when the primary research phase overlapped with early design ideation. I had to request more time from my manager, which I had never done before.
What I would do differently
If I could do-over this project, my biggest adjustment to my process would be to time-box my baseline research. I could have set expectations for myself and the team so that I didn’t have to request additional time from my manager.
→ I learned the important lesson of both 1) communicating limitations and 2) flexibility, which is an important and underrated soft skill that I’ve developed as a result of working in a small company.
Moving forward: related projects that followed
After changing roles, I took part in search engine result page (SERP) redesign efforts from a researcher’s perspective. Projects included usability testing:
To get a pulse check / baseline on current usability
To test the introduction of a vertical sidebar
To A/B test introducing a dropdown menu that toggles between different dictionary sources
