Brief: I created Tippl as a complete Mobile App UX project at General Assembly.
Keeping tabs on our drinking habits is often difficult. Do we really have an accurate idea of how much we drink and spend on alcohol over a week, a month, a year? How often do we lose control when drinking and suffer the consequences later?
Tippl is a native android app aiming to shift how users view alcohol consumption and to help them take control of their drinking habits.
10 weeks (ongoing)
I was the sole designer, responsible for the entire start to finish concept and completion of the project.
- User Interviews
- Affinity Mapping
- User Personas
- Experience Mapping
- Competitor Analysis
- Feature Analysis (MoSCoW)
- Paper Prototyping
- Usability Testing
- User Flows
- Interactive Prototyping
Discovering the problem — User Research & Affinity Mapping:
I began my research by delving into the ‘concept of drinking’ aiming to gain as much insight as possible into how alcohol affected individual lives, and how attitudes to drinking differed and why? In what way did people believe that alcohol impacted their lives, positively or negatively?
The goal of my research was to thoroughly understand user drinking habits, attitudes and motivations to drink alcohol and what key problems and concerns did they face when they did? Ultimately, I intended to gain understanding of how to solve recurring problems and deliver a solution that was really needed.
“ I’m always so afraid to see how much I have spent the night before ”
I conducted 8 face-to face user interviews with a selection of people who’s lifestyle and age meant they would likely fit my target market. From the findings I could note down key user behaviours, motivations concerns and goals, eventually creating a large-scale affinity map in order to visualise similar patterns of behaviour and the frequency of certain answers.
I managed to group the prevalent user problems & concerns:
. Spending too much money on alcohol
. Losing control of themselves when drinking
. Decreased motivation & productivity due to hangovers the day after drinking
. Feelings of regret & guilt after drinking
. Concerns about how drinking was effecting their overall health & fitness
However the key motivations & goals for many users were:
. Incorporating drinking into a balanced lifestyle
. Increasing their productivity & motivation the day after
. Enjoying the social aspects of drinking
. Losing their worries & inhibitions when drinking
Personas & Experience Mapping:
With a strong idea of my user’s main goals and concerns in relation to their drinking I could start to imagine hypothetical users for my app. I created my primary and secondary personas as amalgamations of all my interviewees, allowing me to give them human backstories, needs and worries.
With my personas in place, I could begin designing with these users in mind. By envisioning how my hypothetical users would act and feel on a typical night out drinking I could create an experience map that visually pinpointed very distinct high and low points in the journey — these correlated with the answers I got in my user interviews.
When researching existing apps that tackled drinking I found a few commonalities — one being that the majority of apps had very poor User Interface. There seemed to be a strong focus on technical elements such as statistics, charts & graphs that cluttered and complicated the design. I noticed that the majority of existing apps had interesting features and functionality but lacked a human, conversational element. Furthermore the simpler, less flashy apps were clearly targeted towards users who wanted to quite drinking completely — not so much for the casual user.
I also wanted to look further afield, beyond direct competitors and towards popular apps that allowed users to track various activities such as habits, diet, sleep, spending etc. What were these apps doing successfully and what could be learned from them?
I could gather from my research that the crucial problems to solve were:
. Helping people avoid spending too much money on alcohol
. Helping to avoid drinking too much
. Helping moderate drinking and incorporate it into a balanced lifestyle
And that my app had to:
. Stay simple — avoiding complicated charts and data that would alienate users
. Allow for personalisation — Users should be able to customise the app for their own unique needs and goals
. Feature a strong dashboard — the dashboard is the hub where users should be able to access all important information at a glance
Defining the concept — Feature Prioritisation:
At this point of the process I had built up a long, ever expanding backlog of features that I wanted to include in the app. I didn’t know where to begin with all of my ideas (often obscure and completely impossible to make), and this is where feature prioritisation came into play.
I began by conducting a MoSCoW analysis (Must, Should, Could, Wont) in order to have a clearer vision of what I needed for my MVP (Minimum Viable Product). I determined which features were technically too complex to make, and which features offered little real value to the user.
This was the turning point in which I could begin to see a defined product forming, hazy ideas were starting to take shape into something concrete. The core features I needed for my app to meet previously defined user needs were:
. Allowing users to set personal goals (long term and short term)
. Setting alerts & reminders (which could be customised)
. Visualising a users alcohol intake over a day, week, month and year
. Making it very quick and easy for users to add and record their drinks
Key User Flows & initial sketches:
With my core features defined I began putting pen to paper — materialising my concepts and ideas into defined pathways with initial sketches. I defined determined user flows, keeping my personas in mind as I sketched out how to move from A-B in the simplest way possible.
Initial Sketches & Paper Prototyping:
Fleshing out my ideas through sketches was a process that I found exciting yet challenging as I began giving more detail and definition into the content I wanted for my app. Journeys such as the on-boarding flow were challenging in deciding which information was most valuable to a user discovering the app for the first time. The process of paper prototyping helped me to realise which concepts I had not given enough thought to, such as the user dashboard. I had a vague idea of what I wanted from this part of the app, but not enough of an idea to know how to visualise it.
After sketching screens for the main user flows, I conducted a first round of user testing. The process involved 6 testing sessions with each person using the paper screens to complete various tasks and goals — for example, ‘View how many drinks you have had this week’. By doing this I could see where people struggled to complete tasks and why this was the case, I also could learn what kind of information users were expecting and weren’t receiving.
“ Will I be able to see my goals on the dashboard? ”
I gathered mixed results from my user testing with certain features proving very popular — such as the visualisation of a user’s drink history or the ability to create quick shortcuts for adding drinks, but users seemed to be left confused with the on-boarding process and the dashboard. After this first round of user testing one key conclusions was that the on-boarding process needed to be simplified for new users in a way that broke down key app features in a digestible manner. I also wanted to explore the personalisation aspect of the app, such as including more personalisation questions during the on-boarding that would allow users to customise their dashboard content.
Developing the solution — Wireframes & Interactive Prototyping:
Taking all learnings into account I moved onto digitising my concepts — turning sketches into wireframes. I refined the flows based on the user feedback, fleshing out the personalisation features, dashboard concepts and refining the information architecture — ultimately aiming for greater simplicity and clarity in my designs.
I created a interactive prototype using Marvel to piece my screens together and use for a second round of user testing.
Explore the prototype here.
The second round of User Testing involved another 6 testing sessions with a different set of people, asking each user to use the interactive prototype to complete various goals and tasks. While a number of problems that had been flagged early on had been amended (such as the clarity of the on-boarding, and the ease of adding and a tracking a personal goal), it was clear that certain flows still had some key problems.
Users questioned the dashboard content and how they could go about customising it, making it clear that perhaps I needed to move in a different direction. Perhaps it would be better to simplify the dashboard to 3 core functionalities presented by default to the user. It seemed like forcing the user to learn about the dashboard and customise it was actually a barrier to many people and an unnecessary effort.
Delivering the product — Branding & User Interface
At this point in the project I could begin to create the branding and user interface for my app.
My branding concepts for Tippl centre on neutral, relaxing colours such as light blue and lilac which suite the nature of the content. I ultimately aimed for simplicity and bright, positive colours that would translate to a soothing experience. I combined the initial branding concepts with iterated wireframes and user flows to create high fidelity wireframes.
Tippl is an ongoing project and I will continue refining the user flows, user journey and interface through user testing and iterations, in order to create an optimal user experience. Overall, the experience of designing an app has been invaluable, teaching me how to ask the right questions and that some things can only really be learned from trying, failing and trying again.