When Sky Sports approached us, they had already made significant strides in their design system. They had a library, colour schemes, and font styles, which visually looked impressive. However, the issues they faced included:
As part of our comprehensive audit, I conducted an in-depth review of typography usage across Sky Sports' mobile and tablet platforms. Collaboration with the Sports team was crucial during this phase to ensure alignment on essential elements and identify areas for improvement. Here are the key findings and actions taken from the typography audit:
Issue: Over 200 font styles were in use, leading to a lack of consistency. There was significant variety in size, weight, and line height. Multiple font libraries were being used, further complicating consistency.
Impact: This variety made it difficult to maintain a cohesive visual identity and added unnecessary complexity to the design system.
Issue: Naming conventions were too generic, lacking rules and clarity. This made it difficult to identify the purpose and use of each style.
Impact: This inconsistency led to errors and inefficiencies when selecting and applying typography styles.
Given the excessive number of font styles with minimal differences, our task was to create consistency without altering the established visual appeal of the designs. Our goal was to reduce disparities, make the design system easier to use, and improve its adoption.
Screen Duplication: I began by duplicating existing screens to create a sandbox environment for exploration. This allowed me to experiment with different typography styles without affecting the original designs.
Side-by-Side Comparison: Each modification was compared with the original to ensure the visual integrity remained intact. This iterative process helped identify the most suitable styles.
Grouping Similar Styles: By grouping similar font styles, I identified redundancies and unnecessary variations.
Selection Criteria: The criteria for selecting key styles included readability, scalability, and alignment with the overall visual identity.
Harmonising Styles: Adjustments were made to harmonise typography styles across different elements such as headings, subheadings, body text, and captions.
Maintaining Look and Feel: Care was taken to ensure that changes maintained the original look and feel of the designs, preserving the brand’s visual identity.
We consolidated the number of font styles from over 120 to a 44 set styles, focusing on essential variations that served distinct purposes.
Established clear rules for naming typography styles, incorporating descriptive and functional names.
Each proposed change was tested in real-world scenarios to validate its effectiveness and ensure it met usability standards keeping the look and feel.