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
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
- 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/