OVERVIEW
MEET THE TEAM
As the main Design System Designer in the Sky Sports team, I collaborated closely with designers, stakeholders, devs. Here's an overview of the team I collaborated with:
2 UI Designers
Stakeholders: UI lead, engineering manager, PMs.
15 iOS and Android developers
AUDITING TYPOGRAPHY
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.
Unclear Naming Convention
Issue: The naming convention approach was unclear to designers. Styles were named by category followed by a number and, in some cases, the use case (e.g., body 1, body 2 article, body 1 medium, headline 4).
Impact: This lack of clarity made it difficult to maintain consistent typography across the product. Designers weren't linking styles to components; instead, they would assign sizes and line heights as they saw fit, resulting in an overly extensive typography set within the product.
Excessive Font Styles
Issue: Over 200 font styles were in use, including those from the system as well as additional sizes and line heights that were not part of it. Additionally, multiple font libraries were being used.
Impact: This variety made it difficult to maintain a cohesive visual identity and added unnecessary complexity to the design system.
TYPOGRAPHY & VISUAL EXPLORATION
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.
Identifying Key Typography 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.
Testing the Consolidation of Sizes
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.
INTRODUCING NEW TYPOGRAPHY STACK
One important detail about the old typography set is that it included different sizes for mobile and tablet. I spoke with the developers to confirm whether they were using separate fonts, and they weren’t. Instead, they were implementing mobile sizes and adjusting font sizes for mobile and tablet based on users' accessibility preferences. As a result, the mobile and tablet font stacks were also consolidated.
This is the new typographic scale. It helps show the visual hierarchy in text and keeps the sizes of headings, body text, and labels consistent.
NAMING CONVENTION: A FRESH APPROACH
After finalising the typography set and consolidating sizes and line heights without impacting the product, the next step was to establish a clear and user-friendly naming convention.
Benchmarking for Inspiration
To find the best solution, I conducted a benchmark and discovered some great examples. One system stood out for its simplicity, using only two categories: headline and body. Initially, I thought this might work well for us, so I tested it within the product. However, it felt too broad and lacked the structure needed to maintain consistency across the product.
The Chosen Method
I then explored another approach that combined simplicity with clarity: organising styles into categories, each with t-shirt sizes, and 6 key type styles: Headline, title, subtitle, body, label, and button. This method struck a balance between being intuitive, maintaining consistency and scaling typography decisions across devices, this includes not only font size, but line height and weight.
Team Collaboration and Approval
I introduced this approach to the UI team, encouraged them to experiment with it, and gathered their feedback. The response was overwhelmingly positive, and the new naming convention was approved.
This was a significant win for the team, paving the way for a more cohesive and streamlined design system!
DOCUMENTING TYPOGRAPHY USAGE
To support the designers on their choice to chose the right font style, I gave them access to the template where we have all the set of categories and the components used in each category. This would be a good clue for them, but it wasn't enough, so I wrote down rules to document how to use each category.
DELIVERABLES
Here are some of the deliverables achieved by improving our typography:
13 > 8
Consolidated font sizes
T-Shirt Sizes
Intuitive and scalable styles
Look & feel
Change didn't affect the look & feel
Guidelines
Clarity to support designers and devs
OUTCOMES
Some of the outcomes we had by updating our typography:
