CoCap App

A wellness app that empowers users to make better choices together and have a healthier relationship with alcohol.

iPhone 12 Pro Max.png

PROJECT SUMMARY

BACKGROUND

We live in a hectic world where it can be difficult to become aware of our negative habits on time. Even when we resolve to change our lifestyle towards a more optimal life, it can take a lot of time and effort to be successful alone.
For this challenge, we were tasked to design a digital wellness tool for a chosen area related to wellness in order to help people develop a healthy routine and commit to a healthier lifestyle. 

PROBLEM

Research showed that despite the availability of numerous wellbeing apps, young people in particular have trouble controlling their alcohol consumption, due to peer pressure and social expectations

SOLUTION AND GOALS

CoCap (referring to community + capping alcohol) is an app that has a drink tracker, allows a drink limit setting, user progress visibility in a dashboard and enables the user to enroll in challenges and receive support from like-minded community

The goal was to design an uplifting app that would promote conscious drinking while reinventing the image of what is a cool behavior and in turn would empower a younger generation to make better choices together and have a healthier relationship with alcohol.

MY ROLE

UX/UI Designer (Research, IA, Prototyping, Usability Testing, Interaction Design, Visual design,  Branding, Project management)

TEAM

UX/UI Designers:
Myself (Dagija Kugeviciute), Maddie Weijand, Corinna Bonsen

PROJECT TYPE

IOS App and landing page, Health & Wellness

TOOLS

Figma, Maze, Google Suite, Trello, Miro, Pen and Paper

DURATION

9-days, Jul 2021

User flow of
 

  • creating a challenge 
    (to fuel the competitive side of the user)

  • reading comments from the community
    (adds a social proof, support and mutual inspiration)

  • logging the consumed drinks
    (
    keeping yourself accountable)

  • recording your mood about the challenge
    (technique related to a positive psychology)

     

  •  checking the overall progress. 
    (helps the user to keep track of their habbits)

CoCap Application

CoCap Landing Page

PROCESS OVERVIEW

For this challenge, we were executing UX design process by following an evolved Double-Diamond approach which is a non-linear process and involves continuous testing and iteration to deliver successful product to the user.

Double diamond _EN1_.png

RESEARCH

Following an initial research of wellness products, we observed that despite the availability of numerous wellbeing apps, people still struggle to maintain a healthy relationship with alcohol consumption.
In order to validate this assumption we conducted several surveys and interviews.

02UserResearch_Affinity.png

“I'm anxious about going to parties because I know I'll have to drink.”

"I would like for people to stop offering it to me and to have someone or something that says it is enough"

Meet Hannah Warren, a user persona who was created based on the findings from the user research. She helped us better understand the core needs of our younger users.

user persona bigger.png

PROTOTYPING

Each member of the team did some hand concept sketches to help us visualize how to best implement the features. Then, we selected the best bits of each to build a mid-fidelity prototype.

lofi.png

Style Guito keep as a reference and make sure the user interface is consistent across the board

FIRST USABILITY TESTS & ITERATIONS

After designing mid-fidelity wireframes, we wanted to test them first on usability testing platform Maze to validate our design decisions. We received some insightful feedback which we took into account when moving to higher-fidelity.

Desktop - 5.png

BRANDING AND VISUAL DESIGN

Since the goal of our app was to enable community feeling, empowerment and positive emotions, we wanted the visual style of our brand to be vibrant and visually engaging. We created a Style Tile including our brand slogan, typography and several potential bright colour combinations.

Styletile.png

CoCapStyle Tile

After performing brand personality tests with the users asking them to describe several mood boards, we chose to stick to this particular style below. The dominant colour red which is commonly associated with action, energy, excitement and confidence, seemed to fit CoCap brand identity the most.

Moodboard.jpg

CoCap Mood Board

Style Guide is a compilation of UI elements used on the app and was created to keep as a reference for the design team to make sure the user interface is consistent across the board.

Style Guide.png

HERE COMES MORE TESTING!

Performing more tests on high-fidelity prototypes was essential in order to validate our design decisions related to desirability and usability of more complex-micro interactions which were not present in mid-fidelity tests.

Desirabillity testing

Desktop - 38.png

Interactions

Initially we used micro-interactions to create a floating menu for several options under the add button. However, to our surprise, the usability tests showed that most of the users still could not find how to create a challenge.

“I was a little confused, where to create the challenge”
- Annonymous Tester

Therefore, we decided to remove the floating menu from the add button keeping only the tracking feature.

And kept creating a new challenge under "Challenges" icon at the bottom nav. bar.

Post 1080x1350.png

REFLECTION

If I had more time...

My biggest challenge was...

My main take-away was...

I would have tested the prototype with even younger users (aged 18-20) who may have more peer pressure than the user group analyzed.

To maintain a consistent design system throughout the project as some elements were changing after the tests and iterations.

Rapid usability testing as well as desirability tests are extremely important to understand what may not be working well for the user.​ 

Would you like to read more in detail about the process?