1. Setting the scene
Having started to play around with some preliminary ideas for the look and feel of my volunteer-matching solution last week, this week's focus on visual design gave me the space to explore my initial thinking more deeply. To guide my decisions relating to colour, typography, and branding, I first spent some more time thinking about the overall voice and tone of my experience, before defining colour and typography and applying these to my working prototype.
2. Voice and tone
2.1. Depth of insight: enhancing my practice – creating a voice chart
Since the design and content of user experiences are so closely bound together, I decided to start the week by using my findings from last week's language-focused usability testing to flesh out a voice chart for my solution (fulfilling the goal I set for myself in Week 5).
According to Podmajersky (2019: 15), mapping out and clearly documenting a product's tone of voice promotes consistency across the whole product experience, creating a shared understanding across all UX writers working on different parts of the experience (much like the visual design systems used by UX design teams). By fostering this consistency of both language and design, we can strengthen brand affinity with our products, encouraging people to come back time and time again.
Last week's usability testing already revealed broadly positive associations with my app based on the wording used in the onboarding screens, with users describing the experience as 'cheerful', 'warm', 'happy', and 'inviting'. I therefore wanted to build on these associations and ensure they were being surfaced consistently across the entire experience.
I revisited the key insights (including product values) derived from my user interviews and affinity mapping, as well as my user persona, and used them to formulate a set of core product principles:
Flexible
Accessible
Playful
Rewarding
Transparent
I then built out a full voice chart covering guidance on concepts, vocabulary, verbosity, grammar, punctuation, and capitalisation (see Fig. 1 – use the arrows to scroll along). It was at this point, too, that I decided to stick with my placeholder product name of 'Voluncheer', given that it fits well with the 'playful' and 'encouraging' principles in particular.
Fig 1: Voluncheer voice chart
The process of creating my voice chart helped me to feel much more grounded – and, dare I say it, confident! – in the direction my product is taking. It was the ideal moment to revisit all the research I'd done up to this point, identify what's most important to my users, and use this knowledge to create a practical tool that I can apply across the whole experience. It also gave me a solid foundation upon which to start building another core element of what Garrett (2011: 20) terms the 'surface plane' of my product, i.e. the visual design.
3. Colour and typography
3.1. Breadth of analysis: exploring key skills and domains – the psychology of colour
Having very little prior experience in visual or graphic design, I was particularly excited to dive into the topic of colour. I wanted to choose a palette that would reflect the product voice I defined in my voice chart and embody my core product principles.
I'd already introduced a palette of bright, 'cheerful' analogous colours into my basic prototype (namely pink/red, orange, yellow, and green, used as accents against an otherwise white background) (see Fig 2). Given that website visitors have been found to form their opinion of a website in as little as 50 milliseconds (Lindgaard et al 2006), I wanted to introduce my core colours on the very first screen that users see when they open up the app, then use them consistently as accents throughout the experience.
Fig. 2: Basic colour palette
I decided to carry out some more research into the psychology of colour to validate my choices. While I was hoping to find 'concrete' guidelines around the meanings of colours and the feelings they can evoke, it soon became clear that interpretations of colour symbolism vary significantly, at an individual level as well as between different communities and cultures (Caldwell 2019: 72). Indeed, we could say that "universal color-emotion associations don’t exist" (Cugelman 2020).
That being said, the fact that "warmer colours (red, orange, yellow) generally stimulate" (Caldwell 2019: 72) speaks well to my 'encouraging' product principle. I did consider that, in certain contexts, these colours can be seen as "stress-inducers" – for example, for alerting users to deadlines and errors (Cugelman 2020). My colour scheme, though, uses relatively light tints to gently encourage and enthuse rather than stress. I've also used green to provide a grounded sense of balance while enhancing the optimism of the other hues.
3.2. Self-criticism: accessible colour contrast
Although I've taken steps to embed accessibility and inclusivity throughout my design process so far (for example, including accessibility and inclusivity needs in my persona, as well as including accessibility as a core product principle in my voice chart), I hadn't given enough thought to accessibility in my colour choices. Feedback from my tutors and peers in the weekly forum prompted me to conduct a review of my colour choices while implementing colour throughout all the screens of my app later in the week.
Thanks to the A11y - Color Contrast Checker Figma plugin (2020), I found that some of the colour combinations I'd used for text didn't meet the WCAG's minimum Level AA success criterion for colour contrast (2022) (see Fig. 3).
Fig. 3: Inaccessible colour contrast -> Accessible colour contrast
Thankfully I'd already added my primary and accent colours to my 'colour styles' within my Figma design, which made it relatively easy to change the colours in question. In future projects, though, I intend to get into the habit of checking colour contrast while I'm still exploring options for my colour palette, as well as at regular points throughout my design process.
3.3. SMART goal: read 'The Secret Lives of Colour'
I find the cultural differences in the meanings we associate with certain colours particularly fascinating. I even carried out a mini project for my GCSE German classes looking at how certain idioms in English and German use different colours to express the same meanings – for example 'Gelb vor Neid sein', literally meaning 'to be yellow with envy' and translating to 'to be green with envy' in English.
While I've developed a fairly in-depth understanding of the importance of localisation in terms of language through my previous professional work as a translator and my current role as a UX Writer for an international company, I only have a limited grasp of how design elements – colour in particular – 'translate' differently across cultures and the importance of "[designing] to meet your market’s expectations geographically" (Interaction Design Foundation). I'd like to read 'The Secret Lives of Colour' by Kassia St Clair (2016) before I begin my Final Major Project, to develop my knowledge of colour-based cultural differences and seek further inspiration for my focus of study.
4. Typography
4.1. Self-criticism: accessible typography
Much like colour, I enjoyed thinking about the ways that type can be used to convey language, messages, and meaning. I used Google Fonts (which I first discovered while completing the Adobe Certified Professional course in Adobe Illustrator during a previous module) to experiment with different options for my main logo 'display' typeface (see Fig. 4):
Fig. 4: Logo display typography experimentation
I eventually decided on an Adobe Font called 'Gastromond', a serif font with thick, 'cheerful' strokes and 'e' letter shapes that reminded me of a smiling face viewed side-on – a suitably cheery typeface for a playful, cheery experience, well-matched to the mood of the messages I want to convey through both my logo and throughout the entire experience (Caldwell 2019: 50) (see Fig. 5).
Fig. 5: 'Gastromond' in Adobe Illustrator
Since the 'Gastromond' font family wasn't available in Figma, I exported it as an image to use in my Figma file. However, once again, I didn't think through the accessibility implications of this decision in enough detail – specifically, the problems of using an image to convey language. According to W3C, "it is good design practice to use actual text that is styled with CSS rather than image-based text presentation" (2017).
I therefore spent some time searching for an alternative typeface with a similar look and feel to 'Gastromond', eventually deciding on 'Shrikhand' as a similarly cheerful web-safe alternative (see Fig. 6).
Fig. 6: 'Shrikhand' in Figma
4.2. SMART goal: dive deeper into accessibility best practices
This week has shown me that accessibility in design is a key knowledge gap for me. I'm already working through Katharina Grimm's Udemy course on 'Accessible UX writing' (2022), but I also plan on completing Derek Featherstone's 'UX Foundations: Accessibility' course on LinkedIn Learning (2015) before the Co-Creative Practice module, so that I can champion accessible design practices throughout the entire design process.
5. Conclusions
I've really started to see this week how all the different pieces of work I've completed throughout my project so far are beginning to come together. As I add colour and typography to my design, alongside more advanced animations and micro-interactions, I'm starting to get a greater sense of how the different parts of my solution build upon and feed into each other to meet my users' needs.
As we go into Week 9, I'm aiming to build out as many of the visual and interactive elements of my prototype as possible. I then plan on conducting another round of usability testing with at least 3 users to gather feedback on my project's functionality, interactivity, and look and feel to inform my next iterations.
5.1. How satisfied do I feel with my work this week?
1 = Very satisfied , 2 = Quite satisfied, 3 = Neutral, 4 = Quite frustrated, 5 = Very frustrated
Start of week (pre-activities): 2 – excited to explore how visual design impacts and feeds into UX
Exploring colour and typography: 2/3 – enjoyed trying out different colour and type combinations, but was slightly disappointed with myself for not thinking about accessibility more deeply from the start; determined to learn more about accessibility best practices for my future design work
6. References
CALDWELL, Cath. 2019. Graphic Design for Everyone. London: Dorling Kindersley Limited.
CUGELMAN, Brian. 'The Psychology of Color and Emotional Design' [online]. Available at: https://www.uxbooth.com/articles/the-psychology-of-color-and-emotional-design/ [accessed 21 March 2023].
FEATHERSTONE, Derek. 2015. UX Foundations: Accessibility [online]. LinkedIn Learning. Available at: https://www.linkedin.com/learning/ux-foundations-accessibility [accessed 21 March 2023].
GARRETT, Jesse James. 2011. The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd ed. California: New Riders.
GORR, Kelly. 2020. 'A11y - Color Contrast Checker'. Figma Community [online]. Available at: https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker [accessed 21 March 2023].
GRIMM, Katharina. 2022. ‘Accessible UX Writing’. Udemy [online]. Available at:https://www.udemy.com/course/accessible-ux-writing/ [accessed 21 March 2023].
INTERACTION DESIGN FOUNDATION. ‘Color Theory’. Interaction Design Foundation [online]. Available at: https://www.interaction-design.org/literature/topics/color-theory [accessed 21 March 2023].
LINDGAARD, Gitte, Gary FERNANDES, Cathy DUDEK, and J. BROWN. 2006. 'Attention web designers: You have 50 milliseconds to make a good first impression!' [online]. Behaviour & information technology, 25(2), 115-126. Available at: https://www.tandfonline.com/doi/abs/10.1080/01449290500330448 [accessed 21 March 2023].
ST CLAIR, Kassia. 2016. The Secret Lives of Colour. London: John Murray.
W3C. 2017. ‘Images of Text’. W3C [online]. Available at: https://www.w3.org/WAI/tutorials/images/textual/ [accessed 21 March 2023].
W3C. 2022. ‘WCAG 2.1 Understanding Docs – Understanding SC 1.4.3: Contrast (Minimum) (Level AA)’. W3C [online]. Available at: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html [accessed 21 March 2023].
Comments