Designing the Type System at ME.
Introduction.
ME is a digital-only bank with over 500,000 customers, which is currently undergoing a somewhat grass roots digital transformation across its digital channels and products.
Working as the primary Digital Brand Designer, I worked alongside the UX Design team and we identified many inconsistencies in the experience across ME’s digital channels that was costing the business time and money. Unseen but important examples of avoidable business expenses included licensing fees, unnecessary extra time required to hand off designs to developers, and the regular implementation of bespoke and inconsistent design patterns.
Coinciding with this change, the brand team introduced a new typeface for ME, to be used to represent the company and brand. We took advantage of this opportunity to research, design, and implement a type system that could be used across our website, banking application processes and our current and future mobile banking apps to provide customers with a consistent digital experience and to increase efficiencies when designing at scale for designers across the business.
Stakeholders.
Our internal staff, external vendors, developers and our 500,000 plus customers who access our digital products or marketing.
Roles and responsibilities.
My role in this project was representing the brand across research and design, working alongside Emma Young-Wright, UX Designer on our website, and Nikki Lumangtad, UX Designer for our online application forms, who both also undertook research and design roles.
Our job was to identify all the potential digital channels that our type system would directly impact and develop a solution as to how we could better provide a cohesive and purposeful type system across these channels.
Time was the largest constraint on this project. As we didn’t have a dedicated resource to design the type and design systems, we had to incorporate this into our daily workloads, which meant many early mornings and late evenings (worth it).
Measures of success.
The creation and deployment of a type system which was accessible, understandable and adaptable across all of our digital channels using best practice principles.
Adoption of the design system by internal stakeholders and external vendors.
Increases in efficiencies when designing for designers across the business.
Positive feedback from designers and developers.
Scope.
We needed to consider and identify each particular need of our digital channels, the requirements of these interactions with our customers, and how type was reflected across these channels, e.g. support articles, complicated product constructs, our mobile app and digital marketing products and our email communications.
Goal.
Our goal was to develop type scales that offered enough flexibility to support each context but also allowing enough affordance for the teams implementing them.
A small peak into some of the discovery and testing we undertook during the project.
Research & Discovery.
To kick off our discovery, I went on a hunt to understand how different type systems are developed, what type system methodologies our direct and indirect competitors use, and then mapped out what different typefaces we were currently using.
How are different type systems developed?
I started by identifying a few key modular type scales and testing these scales on a few key screens across our digital channels, as my research informed me that modular scales were effective because they’re based on predictable and incremental scale which could help better inform developers.
An example of our Major Second and Major Third type scales applied across our Desktop, Tablet and Mobile wireframes.
What are others doing?
We then conducted a competitor analysis by comparing type systems implemented by leading digital companies and the products on which the system is used. Design languages such as Material Design, Apple’s HIG, and IBM Carbon gave us deeper insight into how they apply type across a wide range of contexts.
What some of those systems didn’t tell us however, is how they developed the rationale behind these type systems. Traditional modular type scales follow predictable ratio of scale whereas type scales used by some of the larger technology giants such as Airbnb use less predictive and undisclosed formulas in how they achieve scale.
We tried to replicate these formulas ourselves or reached out for comment to gain a deeper understanding alas to no avail.
*Crickets* An example of some of our failed attempts to get to the bottom of the type scales developed by Airbnb and Material Design.
The show must go on.
With our list of 10 potential scales and needing to keep the project moving, we took what we had and moved into design and testing.
What we found was when one scale worked well on desktop, it didn’t work as well on mobile – and when one worked well for long form copy, it didn’t work well in our mobile interfaces.
Golden Ratio Example. Great for creative projects with limited content, but too much inflexibility for our needs at ME.
To ensure each context got the TLC it deserved, we wanted to test and validate a scale for both mobile AND desktop and or singular scale that adapted the best of both.
Option 1: Keep it separated.
For option 2 we split out 2 separate systems for both mobile and desktop. We used the Major Third scale for desktop and the Major Second scale for mobile. Each scale actually tested quite well across each context, but the main question we faced was if we were going to overwhelm or confuse stakeholders by having 2 scales and if so, what could we do to mitigate this?
An example showing our two separated scales in action across desktop and mobile screens.
Option 2: When 2 become 1.
Enter option 2. Inspired by Airbnb’s approach to type hierarchy across their products and the type scale developed by Material Design we tested a single divergent scale. Our body and smaller typefaces remained the same whereas our headings diverged depending on the context it will be displayed. This scale still tested well across each context, and had was received much more confidently by stakeholders.
An example of how Airbnb employs type across both desktop and mobile using a “divergent” singular scale.
Our test type system in action based from Material Design, shown across both mobile and desktop screens.
With our new type system based off Material Design, we had a H1 options for different screen sizes, with the rest of the type sizes remaining consistent. It offered much more flexibility and affordance for those implementing across our digital channels.
Outcomes and next steps.
From each of the 10 scales tried and tested, and across each context the scale sat, Option 2 best met our business objectives and was my recommendation to the project team, and was subsequently also adopted by the business.
Off the back of this project, we developed a much deeper understanding into the value, benefit and development of type systems, but it only scratched the surface into the potential that type systems have to offer.
With the hopes of expanded resources we’d like to further explore ways to better employ type systems across our products such as dynamic type sizing , fluid type sets, or even fluid type properties specific to copy length or component type as employed by Airbnb.
What we learnt during this project was a great stepping stone into further improving refining and hopefully innovating a better digital experience at ME.