Getting Stuck in
Concept iOS App
Client: Maria / Global consumer facing
My role: Founder & UX Designer
Methods: 1–2–1 Interviews, user flows, sketching, focus group research/testing, class crawls, design studio, lofi prototyping on paper using @Marvelapp and then highfi with @Sketchapp, user testing with clickable prototype using @InVisionApp.
The Brief
In my first week at GA we were thrown straight in on day two and given our first project. Pair up, get to know your partner (if speed dating’s not your thing don’t do a bootcamp). Get to the route of their life’s problems and design an app that can solve them. Erm… It was after the end of the project that I realised with some adjustments to the model Stick it could have a commercial application for a more universal order but for now this is all about Maria.
Meet Maria
To start off I asked the most open questions and let the interview follow a very natural conversational style to get to know each other. As well as seeing the basic skeleton of Maria’s life I wanted to put some flesh on the bones of how she goes about her daily activities, what she does to achieve her goals (big and small, long term and short), why she get’s pleasure out of her interests and where, when and with who she normally addresses them.
Generative User Research
Whilst I learnt that Maria’s Instagram and twitter feeds are usually accompanied by her cornflakes, and that she spends 4x as much time getting ready in the morning than I do, I didn’t identify a specific problem in Maria’s life through the broad introductory chat we had.
A few ideas started coming out from community recipe forums to crowdsourced AI created exercise regimes from a selected pool of influencers! But there was a problem; instead of looking at the problems in her life we’d jumped to making a solution.
Taking a step back it became clear to me that the app had to address the pain points in her evening leisure time. The rest of her day was jam-packed or structured and her goals couldn’t be accomplished in the fleeting moments left to her on her personal time.
Problem Statement
Maria loves informing herself about healthy living but finds difficulties putting some of that knowledge into action. She explained to me how much time she spends online finding prescient and independent information and how important a healthy lifestyle is for her, as evidenced by her frequently making her own routines that match up to the science she’s read about that will best achieve her goals.
Whilst she’s great at this it’s the act of actually choosing to get out her Kettlebells rather than settle down to Netflix and a glass of wine. She knows she has the time, knowledge and the equipment but then falls at the final hurdle; self-motivation.
The Solution
Introducing Stick it. An app that will reward you for achieving your goals and punish you for failing, with real live $$$. Each week your chosen sum of money is debited from your account, if you achieve your goals it rewards you with a voucher It also sends you encouragement and progress updates via push notifications and gives you visual feedback of how you’re doing… it can even give you a bit of a social approval incentive via sharing your progress (or lack thereof) with your social media connections.
Storyboarding was really effective for getting the message across for how powerful the solution is and how it doesn’t just drop off when you slip up one week and continues to help incentivise you and tie into your existing patterns of behaviour and wants.
Early testing and design interactions
Once we had the backbone of the solution sketched out I went back to the drawing board to flesh out the user flows contingent upon signing up, setting goals, selecting an amount to debit, choosing a reward and punishment and outcomes screens.
Maria was pleased to see the overall product and thought it would certainly help get her into the habits she puts off at the moment. However, she suggested changing some of the flows in the sign up process to reduce the scare factor of handing over payment details and making the profile page more prominent (a central navigation and information hub for the rest of the app in effect).
She’d also like to see her progress represented in statistics as well as the a visual representation of the money she’s received in vouchers she wants to be able to revisit the information of the restaurants she’s visited.
Oh there’s one more thing, because Maria admitted she might cheat the apps reward/punishment scale it’s important that the app prevents that by having it independently verified that she’s completed her goals, as she has a fitbit we can ask the fitbit to report on her progress to us .
In terms of rewards we can direct the vouchers to only be issued for healthy restaurants she likes including sushi joints, korean bbq’s and MaE delis to incentivise her to surpass her goals it’ll issue a burger or cocktail voucher if she exceeds her targets.
Takeaways from early testing:
1. Have a dedicated vouchers page that stores previous and upcoming restaurant vouchers along with Maria’s ratings, their contact details, type etc. in order to be able to sort and display the information about places she has been.
1a. In addition the star rating may be used to inform the program and give more accurate suggestions for restaurants she likes and that other similar users of the app might too enjoy.
2. I added in a couple of progress bars that circle around the profile picture with a tally display of number of workouts and calories burnt to date.
3. Integrate an IoT device data stream into the app to record progress towards goals — in Maria’s case a fitbit but it could be your gym card logins, your physical data from your smart scales at home or Boditrax at the gym etc.
Final screens and prototyping
The aim of paper screen cut outs and the Marvel App clickable prototype testing became clearly distinct. Whilst I gave coloured pens to testers to write what they wanted to change on them, the Marvel clickable prototype worked better for testing the flow— and to see whether uesrs could navigate to their desired location and change their settings if they wanted in an intuitive manner. It also helped to see the limitations of the phone and how the user expected to interact (with swiping actions rather than explicit calls to action).
Next steps
It was at this point that I started to think about what the future the app might look like. Whilst users might love it as is, it's dead in the water if it can't generate revenue.
By partnering with firms to whom the app has obvious synergies: IoT device software and hardware manufacturers; and services providers such as Deliveroo, Groupon or Timeout, customers not only discover new places but potentially also receive a voucher for more money than they subscribe with (£12 voucher on a £10 debit for example). This virtuous relationship has obvious implications for longevity, repeated usage and value of the app both to users and service providers.
Branding
Understanding what problems Stick it, solves and who it is for was crucial for it's branding. Stick it is 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.
The question is: how do you create a brand that is both feared and loved?
I wanted users to immediately feel that the values, vision and descriptions of the semantics below, sitting easy with the the big idea, personality and visual identity of Stick it. The exercise below; drawing out the semantic differentials, was critical to refine the associations that Stick it ought to convey.
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.
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.
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.
I tested the design in groupings that showed different element combinations, be they typeface, colour, imagery or layout. 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 as your enabler to achieving your goals
- Personality — as a motivator, co-conspirator and reproacher as necessary
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.
