Image credit: Amador Loureiro
Visual design, as demanded by usability testing.
A few weeks back, I started to look at colour palettes for my app. I flitted between palette-picker apps, picked a few colours, applied them to my prototype, felt entirely unsatisfied, and ran out of steam. I made no progress with my prototype, at the cost of an evening’s productivity.
My immediate reflection was that it was the wrong time to explore visual design. I hadn’t done any usabiliy testing, and I considered my product’s tone. At that point, I opted to avoid any visual design, until I felt that my prototype was ready for decoration. The iteration that followed included minimal iconography and a near-greyscale paint job— the idea here being that if my prototype didn’t work in greyscale, it wouldn’t work in colour anyway (Prevo, 2020).
Then I took my prototype into usability testing. As it turns out, stripping out visual design as much as I did impeded the user experience. Without the iconography, my users weren’t sufficiently lead towards the app’s functionality (Interaction design foundation).
On a few occassions, users clicked on the ‘feed’ page floating action button, with the intention of starting a new run. The button they tried to click would actually let them share a new post. To start a new run, they should have clicked the ‘run’ button in the bottom navigation, but without an appropriate icon to draw their attention, the ‘+’ hovering over the feed seemed to be the next most obvious interaction.
My assumption was that visual design only influenced the personality of the app. In reality, visual design can also inform the expected behaviour of components (Gordon, 2020). That isn’t to say I’ll immediately dive back into picking colour palettes, but this has been a worthwhile lesson.
Finding a brand personality.
At the time of writing this section, I’ve processed my usability testing finding into a batch of outstanding work, and I’m a few days into my third iteration. I have started to slow down, so this evening I’ve decided to step away from prototyping to develop my product’s personality.
Aaker, 1997, proposed a brand personality framework with 5 dimensions: sincerity, excitement, competence, sophistication and ruggedness. Within those 5 dimensions there were 15 facets, and within those there were 42 ‘personality trait’ adjectives. I have identified 5 trait adjectives that I believe are fitting for my app:
- Wholesome (dimension of ‘sincerity‘; facet of ‘wholesome‘)
- Friendly (dimension of ‘sincerity‘; facet of ‘cheerful‘)
- Spirited (dimension of ‘excitement‘; facet of ‘spirited‘)
- Hard working (dimension of ‘competence‘; facet of ‘reliable‘)
- Confident (dimension of ‘competence‘; facet of ‘successful‘)
These adjectives gave me a basis for finding brand-appropriate colours. Ashton Hauff (graphic designer for CoSchedule) published a reference guide for colour psychology in marketing, which I used when choosing the following palette:
- white for wholesome/sincerity
- orange for spirited/excitement
- blue for hard-working/competence
- purple for confident/competence
- green for friendly/sincerity
I also cross referenced these colours with Interaction Design Foundation’s guide on colour theory:
- blue, green-blue, and green are analogous colours
- purple, green, and orange are triadic colours
From there, I experimented with and refined the colours into a set of hexcodes. I also experimented with layering the colours on an artboard in AdobeXD to get an idea of how they might complement (or overbear) each other on my prototype.
Ludmila Shevchenko, 2018, presented fundamentals of using gradients in design effectively. I used blue-purple and green-aquamarine gradients in my experimentation; non-complementary colour pairings to avoid what Shevchenko refers to as ‘dirty middle colours’.
List of Figures
Fig. 1: A screenshot of a view in my second iteration, highlighting two buttons that confused users during user testing.
Fig. 2: The colour palette for my prototype with hex codes.
Fig. 3: An artboard I used to experiment with my colour palette and using gradients.
References
AAKER, J. 1997. ‘Dimensions of Brand Personality’. Journal of Marketing Research, 8, 347- 356.
GORDON, K. 2020. ‘5 Principles of Visual Design in UX’. Nielson Norman Group [online]. Available at: https://www.nngroup.com/articles/principles-visual-design/ [accessed 17/05/2021].
HAUFF, A. 2018. ‘The Know It All Guide To Color Psychology In Marketing + The Best Hex Chart’. CoSchedule [online]. Available at: https://coschedule.com/blog/color-psychology- marketing [accessed 12/05/2021].
INTERACTION DESIGN FOUNDATION. ‘Color Theory’. Interaction Design Foundation [online]. Available at: https://www.interaction-design.org/literature/topics/color-theory [accessed 17/05/2021].
INTERACTION DESIGN FOUNDATION. ‘Visual Design’. Interaction Design Foundation [online]. Available at: https://www.interaction-design.org/literature/topics/visual-design [accessed 17/05/2021].
PREVO, E. 2020. ‘If it doesn’t work in greyscale, it won’t work in color: How Button Design created icons for a new product suite’. Button [online]. Available at: https://blog.usebutton.com/if-it-doesnt-work-in-greyscale-it-wont-work-in-color-how-button-design-created-icons-for-a-new-product-suite [accessed 17/05/2021].
SHEVCHENKO, L. 2018. ‘Oh Mamma, I’m in love with Gradient’. Muzli [online]. Available at: https://medium.muz.li/oh-mamma-im-in-love-with-gradient-c81943e3c92b [accessed 17/05/2021].
Skoobin Design 