Article Redesign
Imagine the frustration of having a big head start and not finishing the race
I was charged up to get started on the article redesign at Dictionary.com. I love everything about the article format. It's so intuitive that it's a heuristic. Constraining and prescriptive yet it provides a blank canvas for the expression of ideas.
Our redesign process was fast-paced. We had recently launched much-needed MVP redesigns of our header and global navigation, homepages for Dictionary.com and Thesaurus.com, newsletters, and search results pages for definitions and synonyms.
Next came the article.
Working in our favor
- High-quality content: We had a massive archive to of high-quality content tended by a collaborative group of brilliant authors and editors.
- Momentum: The superpowers of our team—Product, Engineering, Content, and Design—grew stronger with each segment of our redesign. We increased in effectiveness and efficiency. We were bonded, invested in team, and respectful of one another's expertise. Collaboration became infectious.
- Partnership and alignment: Our team trusted in the MVP—strategically and operationally. We respected scope and the promise of iteration forc continual improvement.
- A big head start: I'd had a lot of experience with the article format. I'd designed, studied, measured, poked, prodded, and user-tested articles and all of their components. I'd maintained and tweaked an article design on my personal website for a number of years prior to joining Dictionary.com just to study semantics and design patterns. (Fine, I'm a nerd.)
- Likewise, our redesign team—Bryan Melvin (Product), Alex Hoff (Design), Andy Dang (Design Systems), and Heena Narottam (Engineering)—came into the project with a deep understanding of the product, content, code, and design patterns.
Problems and Solutions
One size fits all
- Problem: Our article strategy lacked scale. We had a single template to house all types of article content, from shorter, daily grammar pieces to long-form, major editorial campaigns.
- Solution: We agreed to make two article templates: Article-Standard for day-to-day articles, and an ad-lite Article-Major, for our bigger brand moments.
Design mechanics
- Problems: Lukewarm responsive and adaptive strategies, lack of design system, mismatches between content and semantic HTML.
- Solution: We fixed 'em.
Undermining trust and authority
- Problem: Our design was squandering authority. Certain article components, when well executed, can reinforce trust. Signals of trust include author bylines, author images, well-placed company branding, neatness and organization, and moments of transparency, such as contact information. Our articles had none of these. Generic presentation, with heavy use of the Arial typeface, gray colors, and cramped spacing, also masked authority and expertise.
- Solution: We added company branding with alongside bylines on Article-Standard and prominent author images on Article-Major. We upgraded the typography and the layout to be cleaner with more appealing brand expression and value perception.
One-offs and workarounds
- Problem: CMS text editor limitations forced workarounds by editors resulting in some clumsy outcomes.
- Solution: We wanted to increase the likelihood of quality by making the best outcome the easiest to achieve. This required an empathetic design approach: We shadowed authors and editors, interviewing them while they published content. We noted pain points and identified opportunities to eliminate workarounds. Our efforts resulted in actionable insight. We mapped better alignment between design styles and text editor styling capabilities. Bonus: The process also boosted trust and gratitude among colleagues.
Loud noise levels
- Problems: Content recommendation patterns on the pages were large and loud, but also non-performant. Navigation devices intended to encourage additonal article views were very prominent but weren't used much.
- Solution: We reduced noise from content recommendations to a fraction but repositioned them in a more advantageous and pleasing way. We removed excessive navigation devices. We did, however persist jump links on long articles; we just tones the links back a bit.
Outcomes
Our designs never launched. Dictionary.com was purchased and the project was frozen. We wish the new owners well in their mission. It is outstanding content and a wonderful, deserving audience.
You can view the unlaunched article designs here:
Article-standard
Article-major
Thank you for your time and your interest. Have any thoughts or questions? Drop me a note. Be well.