Hug-a-bud dedicated mobile app design

Hug-a-bud

Hug-a-bud is a hug tracker app focused on improving health and mental wellness by encouraging users to hug more. Hug-a-bud is meant for users 18 yrs – 99yrs+. The concept of the app was inspired by my daughter who expressed her need for hugs and introduced me to the studies proving how beneficial they are to all humans. Sadly, there is a high rate of sucicide in our local schools, and this motivated me to create an app in hopes to improve health and happiness in my city.

View the final Prototype

The problem:

Users need to ways to decrease their stress,maintain social connections and find newconnections in order to start getting more hugswhich can increase mental and physicalwell-being and pleasure.

The goal:

Develop a mobile app to encourage andmotivate users to hug more and allow them tosee how beneficial hugs are to their well-being.

My Contributions - UX Research and Designer

Recruiting for a conducting a screener survey, user research, paper and digital wireframing, determining information architecture, prototyping, conducting usability studies, iterating on designs, accounting for accessibility, and creating dedicated mobile app. Creating ancillary responsive designs for desktop, tablet and mobile website.

User Research

Survey

After discovering just how beneficial hugs are to our mental and physical well-being, I decide to perform ascreener survey in my city to see just how many hugs the local community typically receives each day. Iwanted to see if there was a correlation between the amount of hugs and the amount of stress. I also wantedto find out the comfortability people have hugging and with whom. Additionally I inquired about the type ofdevice my users spend the most time on, as well as gathering some demographic information.

The survey showed a very small % of users get enough hugs each day. Also, very few knew all the benefits hugs have to offer.

Competitive Audit

I then performed a competitive audit. I did not find any direct competitors so I chose to include apps that typically focus on mental health by tracking sleep or meditation or physical healthcare. None of them had a feature to track hugs.

User Personas

I created two user personas based on the research from my screener survey.
‍
Problem statement:
Rebekah is a busy busy full time employee and student who needs a tools to help her maintain connections with friends and family because she wants to maintain her physical and mental health.

User Journey Map

Mapping Jenna’s user journey revealed how helpful it would be for a reminders and scheduling feature and notifications for when a hug-a-bud is nearby.

User pain points

Knowledge

Having access to information and studies that showcase the benefits of hugs.

Access and Confidence

Having the ability to find new local hug-a-buds and the confidence to ask for hugs from new people while being comfortable and confident in your personal safety.

Reminders

Our busy users needr eminders and/or ways to schedule hugs into their day.

Proof

Users need to see the benefits of their efforts, so they’ll be encouraged to continue or improve their hug routines.

Ideation and wireframing

After my initial user research I began with the ideation phase, completing the crazy eights exercise, how might we and then finalizing some paper wireframes.

Paper wireframes using Crazy Eights exercise

After deciding what features to include and the organizational structure, I created paper wireframes for each of the pages I wanted to highlight. 5 sketches, and a final design for each of the 4 pages.

This first low fidelity prototype focuses on finding other users or locations to get hugs, so a lot of the screens were building out the navigation for finding other users.

Low-FI prototype

Refined wireframes and lo-fi prototype

Usability Studies

Research Plan

Usability Study #1

I developed a research plan for the unmoderated study. I recruited 5 participants for this initial study.

Affinity Diagram

Synthesizing the findings

I created an affinity diagram using Google's Figjam to find patterns and identify insights.

Unclear navigation - Multiple users could notfigure out how to ‘get more hugs’ and did not complete the task to find more huggers.
Self and pet hugs - Users kept trying to clickthe ‘pet’ and ‘self’ hug buttons indicating they wanted that feature or those buttons were too prominent and they weren’t sure where to click next.
Mood/Journal feature - Some users suggested highlighting the mood/journal feature more which would appealto a broader audience.
Mood/Journal Hug report - expressed interest in seeing their hug history in more detail and being able to see trends, so they can learn and improve their routines.

Revising and refining the design

Designing mock-ups

Based on insights from the study I reorganized the navigation so ‘finding hugs’ was easier to access. Also added a ‘learn’ and ‘connect’ section so that users can stay connected even if they can’t hug in person.

Additional changes to the final prototype were highlighting the quick-check in feature. Originally it was just under the ‘journal’ navigation button, but after the study, I felt it was important to highlight a quick mood check in feature, so users would be enticed to check-in more often, which would contribute to their data and provide helpful insights to them.
After refining the navitgation and layout, I started working on the mock-ups using Figma.

Finalizing the design and prototype

High-fidelity prototype

The final prototype allowed the user to quickly add a hug, view their weekly progress and do a quick mood check-in right from the dashboard. Users could then navigate to find other hug buddies, learn more about hugs, and connect online with other users. Finally in the ‘me’ section, they have access to all their hug and mood data. It would showcase a history of hug counts, average daily emotion, journal entries, number of check-ins and time spent connecting with other users and then would overlay them on top of each other so they can see the trends.

HUG-A_BUD PROTOTYPE

View the final Hug-a-bud dedicated mobile app design

Accessibility considerations

Color - I used the Web Aim website to ensure there was enough contrast in the brand colors I used. I wanted the colors to be soft and bright, but needed the colors to still have enough contrast.
Button size - I wanted large enough buttons to easily click without accidentally pressing another button.
Icon labels - I added labels to the buttons so that screenreaders would be able to navigate the app.