DMN Design System
Task
At The Dallas Morning News, a design system was created to manage and maintain visual consistency among our digital products. The design system managed design at scale and reduced redundancy in production work when designing different pages for the dallasnews.com site.
Overview
Previously The Dallas Morning News website had brand identity issues. Prior to the redesign of the site, the website design was managed by an outside party and had a different logo and look and feel than the print newspaper. This was very inconsistent to the brand identity especially since The Dallas Morning News had been in business for over 100 years. The product team was tasked to redesign the website to better fit the look and feel that the print newspaper had.
Print Newspaper
Old Website
New Website
Once the new website design brand guidelines was established, the product team quickly realized that a design system was needed in order to keep the brand consistent, facilitate new feature requests, and speed up the development process. There were several challenges that the team was facing: lack of visual consistency between designers, too much time spent recreating established designs, no place for documentation of design decisions that were made, and slow hand off to developers.
The Result
I created a design system that would serve as the single source of truth for our brand’s established designs. This ensured that pages across the site were consistent in look and feel. It gave us the ability to replicate designs quickly and efficiently with already made components, which sped up the process of design creation and prototyping. The design system also reduced miscommunication between the design and development teams during hand-off.
I started off by updating our style guide that was previously used in Sketch. A foundational guide was then made that included information on breakpoints, layout grids, spacing guidelines, brand fonts, and brand colors. I also established a few checklists written specifically for each role in the product team to give guidance on how to navigate through the design system.
The design system also consisted of a component library. I translated our styling parameters from the engineers’ Tailwind CSS into color and typography design variables in Figma. The component library consisted of components, state changes, and annotations. I worked with the engineers to ensure the naming conventions for common components stayed consistent within the design system and within Storybook.
