Design language
Best practice
We analysed design languages focused on accessibility that were proposed by IBM, Microsoft and GOV.UK The structure and typography of the last one was our final choice.
Applying the language
When approaching the mock ups stage we decided to start with mapping the menu and sketch the information architecture to make sure the primary and secondary information is separated. Apart from the GOV.UK we have used the original Toastmasters Brand Guides in creation of the wireframes. According to the results of prototype test with our user, the familiarity of the visuals were a pros of the prototype.
Prototype & adjustments
Design iterations
The original high fidelity prototype was adjusted after testing with our user. Changes were to include:
- Spaces for explanation before the fields where user action was required.
- Contrast of the footer was adjusted
- Thickness of typeface of the buttons was adjusted
The final version of the high fidelity prototype is available for Desktop and Mobile
References
- Legibility, Readability, and Comprehension: Making Users Read Your Words (November 15, 2015). Retrieved from https://www.nngroup.com/articles/legibility-readability-comprehension/
- Letter case and text legibility in normal and low vision (2007). Retrieved from https://www.sciencedirect.com/science/article/pii/S0042698907002830?via%3Dihub
- Design your service using GOV.UK styles, components and patterns (8 February 2022) Retrieved from https://design-system.service.gov.uk/
- IMB Design Language (June 10, 2015) Retrieved from https://www.ibm.com/design/language/
- Microsoft Fluent Design System (2017) Retrieved from https://developer.microsoft.com/en-us/fluentui#/styles/web/typography
- Incusive Toolkint, Microsoft (2016) Retrieved from https://www.microsoft.com/design/inclusive/
