Digital Design & Creative Branding
Tippl Cover.png

Tippl

App Design, Art Direction, Branding, UX & UI Design

Tippl is a native android app designed to help shift how users view alcohol consumption and to take control of their drinking habits. The project was undertaken at General Assembly and I was responsible for the concept, user research, UX & UI design, testing and app branding. (2017)
Read the case study here.


Tippl_Cover_v5.png
Logo.png
Tippl-OnbaordingScreens.png
RegisterAnimation4.5.gif
Tippl-OtherScreens-withcomments.png
  User Research & Affinity Mapping:   The goal of my research was to understand current user drinking habits, attitudes towards alcohol and the impact that drinking had on people's lives. What motivated them to drink alcohol, and what key problems and concerns did they face when they did?  I conducted 8 face-to face user interviews and from the findings I could note down key user behaviours, motivations concerns and goals. I created a large-scale affinity map in order to visualise similar patterns of behaviour and the frequency of certain answers.

User Research & Affinity Mapping:

The goal of my research was to understand current user drinking habits, attitudes towards alcohol and the impact that drinking had on people's lives. What motivated them to drink alcohol, and what key problems and concerns did they face when they did?

I conducted 8 face-to face user interviews and from the findings I could note down key user behaviours, motivations concerns and goals. I created a large-scale affinity map in order to visualise similar patterns of behaviour and the frequency of certain answers.

AffinityMapping-v2.png
  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.

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.

UserPersona-Jess.png
 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.

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.

  Competitive Analysis:   I found the majority of existing alcohol control apps had similar issues; primarily poor and outdated User Interface with a main focus on technical elements such as statistics, charts & graphs that cluttered and complicated the design. These apps had interesting features but completely lacked a warm, human aspect. Additionally My Analysis looked at both direct and indirect competitors and what could be learned from other popular activity tracking apps.

Competitive Analysis:

I found the majority of existing alcohol control apps had similar issues; primarily poor and outdated User Interface with a main focus on technical elements such as statistics, charts & graphs that cluttered and complicated the design. These apps had interesting features but completely lacked a warm, human aspect. Additionally My Analysis looked at both direct and indirect competitors and what could be learned from other popular activity tracking apps.

  Defining Key User Flows & 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 conducted a MoSCoW analysis to gain a clearer vision of what I needed for my MVP. I determined which features were technically too complex to make, and which features offered little real value to the user.  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.

Defining Key User Flows & 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 conducted a MoSCoW analysis to gain a clearer vision of what I needed for my MVP. I determined which features were technically too complex to make, and which features offered little real value to the user.

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.

Userflow-settingagoal.png
  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.

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.

PaperPrototyping.png
  Wireframing & 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.

Wireframing & 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   .

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.

  User Testing:   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.   Branding & User Interface:   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.

User Testing:

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.

Branding & User Interface:

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.

  Next Steps:   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.

Next Steps:

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.

NextSteps.png