Rocket Design System:

Typography Scale

 

Goal: Update our typography kit to be an accessible & harmonious typography system for faster design-dev handoff, consistent design usage, and better type hierarchy for designers.

Team

●Senior UX Designer Lead (Myself)

●Mid-level UI Designer

●Select designers stressed tested across organization

 

Journey 

●Performed analysis as team to understand the problems teams were facing with the current kit

●UI Designer created the first V1 of the Typography scale

●As a team applied V2 to various business units UI

●Led UI designer to find any initial flaws and co-created V2 of the designs

Solution 

●Refined H1- H6

●Streamlined  Subtitles

●Versatile body font with options in weight and line height

 Problem

The current design system was using different weights for headers can making it difficult for designers to choose a header and for users to quickly scan and understand the content hierarchy. Without a clear visual hierarchy, many products struggled refining the look and feel and awkward scaling for mobile devices. 

The Why

I lead the small team  to focus on research questions that will solve the problem. We dug in to understand the issue and gather insights for improvement:

What is the best typography scale for Rocket products? 

Research Plan Tenets

  1. Perception and Readability:

    • How easy is it to read the text across different screen sizes and devices?
    • Are users able to quickly distinguish between different levels of headings and body text?
    • Do users perceive the font size and weight as appropriate for the content?

  2. Hierarchy and Clarity:

    • Is there a clear hierarchy established among different levels of headings?
    • Do users understand the importance or significance of different headings based on their visual presentation?
    • Are there any inconsistencies or confusion in the typography that affect content organization and clarity?

  3. Aesthetic Appeal:

    • How visually appealing is the typography and overall design of the text?
    • Do users find the typography style and scale consistent with the brand’s identity and tone?
    • Are there any specific aspects of the typography that users particularly like or dislike?
  4. Accessibility and Inclusivity:
    • Are there any readability issues for users with color vision deficiencies or other visual impairments?
    • Does the typography scale comply with accessibility standards and guidelines?
    • Are users with different visual abilities able to comfortably read the text?

  5. Impact on User Experience:

    • How does the typography scale affect users’ overall experience on the website or application?
    • Are users able to navigate and engage with the content effectively despite any typography issues?
    • Are there any specific tasks or scenarios where typography-related issues pose significant challenges for users?

  6. Competitive Analysis:

    • How does the typography scale and style compare with those of competitors or industry standards?
    • Are there any notable differences or areas where competitors excel in typography design?
    • What improvements could be made to make the typography more competitive and appealing to users?

 

We gathered designs from key products and implemented the RDS Type Scale V2. Then met with the designers to understand the feedback to create RDS Type Scale V2:

Key Findings

Based on what we learned from product analysis and continued conversations with the design team at large, our typography scale needs to:

  • Headers need a consistent heirarchy

Headings are a critical contributor to page hierarchy. Most systems offer at least four, although we needed more to accommodate our products and components. Our page titles were designed to align with the largest heading level. Remaining levels were implemented across components.

  • Subtitles Streamlined

Due to the amount of information in our products subtitles played an important role in contrasting the heirarchy.

  • Body varies on 3 variable

We kept body sizes simple and few, but allowed for variants in the scale. Since body copy effect the most components, our option were — size, weight, line-height, — to finetune each one.

 

DESIGN ITERATIONS

Solutions

Purposed changes with V1 

Purposed solutions to Rocket Mortgage

Final Solution: Rocket Typography Today

Solution 

A stress tested typography scale that worked for the design system and the user a like. 

The results allowed for increased brand consistency and improved understanding of the typography scale from designers across the board.

To see full example of the Typography Scale please contact me.