H.appy

UX and UI development of a Wellness App

Screenshot of mobile app H.appy showing user interface

Client

Personal Project

Product's description

H.appy is a wellness-focused social media app that promotes mental well-being through laughter, offering coping strategies and educational content on its physiological benefits.

Timeline

  • Overall: 6 weeks
  • Research: 2 weeks
  • Design: 4 weeks

Tools

  • Figma
  • Chat GPT
  • Google Forms

Project Goals

Regarding the rising anxiety and depression linked to social media use, and inspired by my friends noting my "loose smile," I created an UX/UI concept that promotes mental well-being through laughter.

I did it based on the HCD (Human-Centered Design) principle.

Illustration of Human-Centered Design process
Problem

Anxious users need to laugh, because it supports their mental well-being and helps ease anxiety.

My role

Execute the work of a generalist designer, being the only one responsible for the UX Research and UI design of functional flows of a wellness app.

Chart showing increase in adults with anxiety and depression symptoms

Why?

Because a significant increase was seen in the percentage of adults with anxiety symptoms (from 15.6% to 18.2%, respectively) and depression symptoms (from 18.5% to 21.4%, respectively) between 2019 and 2022.

Source: https://www.cdc.gov/nchs/data/nhsr/nhsr213.pdf

Methodology

Design Thinking Process

Empathize

Quantitative Research

In the first part of the research, I conducted a survey before doing the user interviews and better understanding the user's needs.

The survey: I've prepared the survey with 11 questions and gathered over 40 answers.

Pie charts showing survey results about laughter and mental health

Would you like to laugh more often?

41 answers

Bar chart showing survey results about laughter and mental health

Have you ever consumed content in order to induce laughter?

41 answers

Bar chart showing survey results about laughter and mental health

Have you presented any of the following mental/behavioral issues in the last month?

41 answers

Bar chart showing survey results about laughter and mental health

Empathize

Qualitative Research

After understanding that over 35% of the users would like to laugh more often and were consuming for contents to do so, because they were experiencing episodes of anxiety or depression, I wrote and conducted an interview script. In 4 days, I recruited and interviewed 5 users and a Subject Matter Specialist (SME) remotely.

The survey: It was structured with 10 open-ended questions, focusing on our target audiences potential laughter situations, how the laughter affected them physiologically, and about how aware they were about their mental health.

Define

Empathy Map

From the research data, I've understood some key points to build an empathy map. It is a method used to synthesize rational and sentimental aspects of the users through their situation, acts, feelings and emotions.
The goal is to reach an empathy level where the designer can look at the world through the user's eyes.

Empathy map showing user thoughts, feelings, and behaviors

Ideation

Features Prioritization

Regarding the highlights from the User research and Empathy Map, I've stablished some features that would be either an asset or a problem in Usability.

Features prioritization matrix showing must-have, should-have, could-have, and won't-have features

Prototype

Lo-Fi wireframe

The first prototype I've done sketched the flow from the app presentation to the data page, including a description page.

Low fidelity wireframes for H.appy app

Prototype

Design System

I created a Design System regarding what I found out from the market research.

Components
Design system components for H.appy app
Colors, Font & Vectors
Design system colors, fonts and vectors for H.appy app

Prototype

Hi-Fi Prototype

After applying the design system on the lo-fi wireframes, I created a fully-functional, high-fidelity prototype of three flows using Figma.

High fidelity prototype screens for H.appy app

Prototype

GDPR Compliance

One of the challenges that I faced was developing a flow to inform the users that by collecting their data, the use of the app would be enhanced by measuring laugh trough the mic, for example.
This is important as I wanted to develop an app that was compliant with GDPR (General Data Protection Regulation).
So I added a toggle, so the user could select if it would rather authorize or not that usability.

GDPR compliance screens showing data permission toggles

Test

Usability Testing

I've tested with 5 potential users.

Some of the obtained feedbacks were: small icons and letters, lack of a comments button, the suggestion of replacing a manual registration to a login using google button, and the idea of tracking laughing through additional gadgets, as, for example, smartwatches or earbuds. All the users said that they would definitely give a go for the app, and that they would rather use the light UI; than the darker one.

Usability testing results and insights

Prototype

Web Page

Once the usability issues were resolved, I moved on to design other flows' screens in Figma. My goal was to create a visual identity that's aligned with the brand's values of connecting people through the joy of laughter: playful, organic, simple and optimistic. I've designed an app and a promotional web page.

H.appy promotional web page design

Project

User Flow

Play the video to explore the flow!

Iteration

Next steps

The next step for the app will be developing the flow of the other bottom bar icons; thinking how to monetize it (if by applying a monthly subscription model or by adding some publicity + and the possibility of removing it by paying for the app itself).

H.appy promotional web page design

Project

Learnings

My main learning was definitely how to conduct the whole path to get on a final UI result and their relevance within the Design Thinking process.

There's a Research work behind the UI development, in order to have a consistent product's proposal, and it must be well explained, when developing and preparing the product's pitch.

It was a pleasure to see an idea raising like that, and I'm excited to work further on projects which can actually enhance user's wellbeing.

Read more of my case studies