Getting Stuck in: Branding 101
One week design sprint to create the branding, visual design and enhanced UX for Stick it: the app that brings the carrot and the stick to life.
Project 4 General Assembly (concept app)
Team: individual project
Client: Maria / Global
My role: UX Researcher / UX Designer
Duration: 1 week
Methods: 1–2–1 Interviews, user flows, sketching, focus group research/testing, class crawls, design studio, prototyping in Sketch, user testing with clickable prototype using InVision.
Sticking it to you
In my last post I introduced Stick it, an app to motivate you when the consequences of your actions just aren’t consequential enough for you and a little skin in the game might just encourage some better behaviour.
It’s perhaps not the easiest brand to create given that the app is intended to be well frankly, a bit menacing. If you don’t achieve your goals your hard earned $$$ is heading where you didn’t want to, although having done the rounds of testing the range of options for where it goes is now broader and includes your own pension fund so isn’t as scary as previously imagined.
Still, how do you create a brand that is both feared and loved?
What is a brand anyway?
It’s *never* a cop out to defer to the Design Council so here’s their definition;
…a brand is a set of associations that a person (or group of people) makes with a company, product, service, individual or organisation. Design Council, 2016
One of the first steps in creating the Stick it brand then was to get the associations straight in my head that Stick it would ideally convey — a sort of conceptual style guide I could continually refer to throughout the process of branding. I needed to bear in mind that a consumer will need to want to be highly engaged, enough to pair their devices, enough to set goals, enough to trust their financial details to us but also be encouraged, challenged and delighted by the design.
Semantic differentials were critical here to refine the associations that Stick it ought to convey and adjectives or adverbs that describe the brand and those on the flip side that ought never describe your brand, come in:
On first impression of the branding, before you’ve delved into the app, or perhaps coming with a basic understanding from some periphery knowledge (like that you start receiving money from a friend who’s been a little lax with the gym routine — wouldn’t that be a fantastic on-boarding experience?) you ought to feel that the values, vision and descriptions of the above semantics sitting easy with the the big idea, personality and visual identity of Stick it.
Inspiration
Design inspiration, from typefaces to colour, tone of voice, layout and depth was the next stage of the process for me. Knowing my touchpoint was a smartphone (though I have designed primarily for iOS, I envisage a hybrid app to be supported by Android too) helped in cutting down the issues around how best to display information and also in the tone and length of interactions expected from users. The progressive enhancement model that comes from mobile first design principles also naturally declutter your mind and design.
As an Airbnb host and traveller it’s redesign has been prominent in my daily technology interactions, I liked how simple screens were but also that I could still achieve almost anything on the app that I could on a laptop/desktop. The Airbnb design blog talks in an engaging way about both the processes, motivations and outcomes of their new visual language. I was particularly inspired by their clean aesthetic which looks to draw on the Google Material Design, design language guidelines; Materialize. It was striking that they used blocks as their elements of the design language, not atomic as orthodoxy has suggested, but adhere to some guiding principles about the sorts of molecules and modules that they can be transformed into. In a way it’s like giving a family of the periodic table rather than access to the infinite contortions of the carbon structures out there. It was very clear that rows, panels and blocks were to be the focus of the design.
A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem. Airbnb, 2016
I was very attracted to the simplest predominantly two tone screens, where one of those colours was white which shows up remarkably well on an iOS display and is less prone to accessibility issues for the colour blind than black, in addition it’s lighter, more inspirational and pure connotations tied in with the brand and it’s considered more unisex. The dominant colour however…. well we’ll get onto that in the next section.
Though my primary user remained Maria, this redesign needed to encompass a wider unisex audience. Illustrations would adhere to a flat material design and ought to be responsive or interactive in simple swipe gestures that the user would find intuitive and delightful. They should respond to user input so whilst Maria is the user here so female icons and superhero images are displayed clearly these would change to their gender equivalent, depending on the gender identification of the user.
Finally, the voice and tone, register and relationship to establish with the user. Well as a challenger brand, Stick it is in the unique position to be able to launch with a brand that challenges and shakes up the conventions of the sector. Fitness industry apps are a saturated market, however those that include skin in the game (putting at risk either your social or monetary capital) tend to divide nicely into segments; the scientific, the shaming and the motivational. Carrot Hunger, a close competitor focussed on calorie counting is part of the cohort of so-called ‘Bully Apps’ that have sprung up to help users achieve their goals when good intentions and gamification are not enough to see you achieve your goals. Whilst elements of Carrot Hunger’s design and their painfully intimate bantersaurous friend register has some appealing aspects the social capital was too much of a turn off for users I surveyed, conversely it would be effective so remains as an option in the new version as opposed to an automation.
The abusive fat-shaming of Carrot Hunger however goes to far, Stick it let’s the monetary consequences do the talking for it and so can afford to be a little kinder to it’s users. Building on the same principles as the responsive visual design, the language employed follows a narrative of the user’s journey arch building to an epic real-life gamification of your goals that users responded to well in early testing.
Test, Test, Test
So with the design ideas starting to come together to something cohesive I drew up the colour scheme charts to give the backbone to the visual design. I learnt during this process that testing the colours alone was not rendering meaningful results so went on to develop the key screens and logo in various typefaces and colours to see which would give a positive response.
The above shows some of design groups that emerged where different elements were tested, be they typeface, colour, imagery or layout. I had particularly wanted to include a carrot rather than a stick in the logo but found that though people enjoyed the pun and it re-inforced better what the app might be about that carrot’s are not very photogenic. Perhaps I need the services of a graphic designer but in the meantime we’ll stick to the stick image which was well received visually so much better that it warranted staying. Although Maria preferred the plain backgrounds on the right and the teal colour, it transpired the majority were confused about the app’s purpose and particularly with teal thought it might have something to do with dog training….
A class crawl where I had 20 eyes on in under an hour was hugely helpful at this junction and allowed me to confidently move the design forward as well as contributing to the biggest shift that brought all the strands of Stick it (*bulleted below) into one umbrella identity running through the app — the superhero imagery, colours, tone and meta-narrative lend the user the excitement, sense of purpose and having something tangibly important on the line in a way that I was struggling to keep cohesive previously.
- The big idea — an app that challenges and motivates you to achieve your goal by leveraging a little of your social or monetary capital
- Values — empowerment, reward, rising to the challenge, self-development
- Vision — your smartphone
- Personality — as a motivator, co-conspirator and reproacher as necessary
Another learn here was how to pair fonts, whilst Fontpair was useful I have ended up with an unholy trinity to deal with differing content appropriately and signpost user actions clearly. And thanks to Airbnb’s lessons learned, I made sure all fonts were in the Google Fonts directory to avoid licensing issues and ensure cross platform compatibility.
The tomato red became the clear winner and would support a minimal number of other colours before users found it “too busy” or “a bit in your face”!
Fleshing out the Screens
Taking the screens from paper prototype to Sketch files was quick work once I’d reached this stage. Focusing on responding appropriately, I designed the screens to clearly indicate user’s selections and hiding elements to reduce clutter and amount of scrolling until interacted with were of key concerns to me. This is most clearly seen with the dropdown menu’s which are hidden until touched upon (see UNITS on screen 1) to it’s full menu dropdown in screen 2 where the highlighted option is also repeated in the full white as opposed to the reduced opacity white.
The slightly rounded edges fitted with the colours, typefaces and personality of the app whilst the illustrations that appear after selections are made and additional fields for particular selections again help gain the trust of the user that the app has been designed for them and their health & fitness goal, whatever it may be. I chose the weight option as the edge case that requires some extra fields including a minimum and felt it appropriate that Stick it would take a light angle on this — in order not to nag or bully.
Style Guide
Finally, I made the style guide to show the layout, typefaces, colours and elements how they might be confined.
