Overview
Whilst redesigning the Mortgage Application Centre (a colleague tool trust to proof mortgage applications) it became clear during usability tests that similar font characteristics were causing confusion and leading to errors when cross checking data.
Challenge
Nationwide had been using the NBS typeface across their website, mobile app and all internal/external marketing material for the past 15 years. It’s an expressive typeface that is great for scanning, but proved distracting for colleague systems. I needed to find a suitable alternative that was accessible, adhered to strict brand guidelines and built trust in colleague tools by reducing the chance of error.
Highlighting issues with the NBS Medium typeface
My role
I was the UX/UI designer researching and implementing a more accessible and user friendly typeface for colleague tools at Nationwide. I outlined requirements, conducted user testing, gathered feedback and implemented changes in to the Colleague Design System.
Process
✍️ Requirements
Colleague tools are used to display large amount of data, so in order to build trust with users the typeface needed to be accessible and user friendly. However, it was also important to analyse other factors such as load speeds and application to make sure that web hosted typefaces don’t slow the user down as the amount of data increases. Cost was also a major factor because Nationwide is a mutual so I made an effort to explore free to use or low cost typefaces to try and reduce push back. Lastly, to be familiar and consistent with Nationwide branding, considerations had to take inspiration from and be styled similarly to the original NBS typeface.
🔍 Research
I analysed Norman Neilson Group research that focussed on reading speed and legibility of some of the most accessible typefaces available and looked in to windows system fonts because aside from quick load speeds, they offer increased legibility at smaller sizes, and are consistent with tools that colleagues at Nationwide are already familiar with. I chose 4 typefaces (Segoe UI, Roboto, Noto Sans Display & IBM Plex Sans) and compared positive/negative characteristics by benchmarking them against accessibility standards - checking similarities, mirroring, distinguishable characters and capital height.
Comparing characteristics of 4 typefaces
Checking typefaces against accessibility standards
👩💻 User testing
Working with a researcher, I tested the readability of each typeface by conducting a ‘5 second test’ with a closed group of users to gather qualitative insight. I did this by measuring first impressions and recall and using that to help support my decision making.
👀 Stakeholder review
Once I had refined the selection and was confident with my choice, reached out to key stakeholders including fellow designers, accessibility experts, the design system manager and the brand manager. I proposed that we should use Noto Sans Display and explained my decision making by presenting the consideration for both business and user requirements.
⚡️ Implementation
I replaced NBS Medium with Noto Sans Display in the Colleague Design System and created a document with detailed hand off instructions for engineers to implement in to any new and existing colleague tools.
Colleague Experience Language type scale