Challenge
Forbes.com being one of the largest online news outlets with multiple digital products and associated brands, faced the challenge of consolidating its visual language and system. The issues included duplicated components, misuse of existing styles, outdated components, and inconsistencies across online products from a user experience standpoint. Designers and developers faced extra challenges when maintaining and creating new features due to the lack of clarity and guidelines.
Solution
The solution consisted on develop a scalable, consolidated, and user-friendly design system for internal teams at Forbes and to be implemented on the live sites.
The process involved selecting foundational areas of the website and conducting audits, making recommendations, designing components and guidelines, and handing them off to the development team.
An interdisciplinary team consisting of product owners, designers, copywriters, and developers worked together to create a design system that can be implemented to enhance the overall user experience of the website.
The process focused on addressing one foundational component at a time, using a 4-week cycle over a period of 9 months. This approach helped to raise awareness within the internal teams about the importance of thoughtfully creating each component. Additionally, it provided enough time for implementation and testing on the live site.
The Outcome
At the end of the period, the following components were consolidated and implemented on the production site: buttons, grid, typography, form and input fields, bylines, iconography, vertical rhythm, and accessibility.
A new library and design guidelines were provided to serve as a baseline for building new components. This facilitated collaboration within teams.
