Hug-a-bud is a hug tracking app focused on improving health and mental wellness by encouraging users to hug more. 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 suicide in our local schools, and this motivated me to create an app in hopes to improve health and happiness in my city.

This was created as my final project in the Google Coursera UX Certificate program - the assignment was to create an app and responsive website for social good.

I was the UX Researcher and Designer. I recruited participants, conducted a screener survey and analyzed the results of the research. Then, I created paper and digital wireframes, determined the information architecture, created prototypes, conducted usability studies, iterated on the designs accounting for accessibility, and created the dedicated mobile app. After finalizing the mobile app. I created the ancillary responsive website designs for desktop, tablet and mobile devices.

After the screener survey I realized just how many locals were not getting the recommended amount of hugs. I began connecting for the hug-a-bud app. I also completed a competitor audit. As far as I know, there are no hug tracking apps, so I was only able to get inspiration from indirect competitors.

The next step in my design process was to create two user personas and their user journey maps, which helped me to identify some pain points.

Next up, was the ideation! I did a How Might We exercise and Crazy Eights to get the juices flowing: 

After deciding what features to include and the organizational structure, I created paper wireframes for each of the pages I wanted to highlight and then chose a direction to start on digital wireframes:

I was concentrating on the ‘ways to find hugs’ section, but after the initial usability study, I realized that ended up being hard to find and users didn’t understand how to access it. 

Here's the link to the original low-fi prototype that I used for the usability study: 

https://www.figma.com/proto/aVsAZJv0e89eUSMK3JWqef/Hug-a-bud.-Wireframe-Project-(Copy)?page-id=0%3A1&type=design&node-id=821-217&viewport=464%2C375%2C0.14&t=wKZsiN7jUUXgK6bA-1&scaling=scale-down&starting-point-node-id=821%3A217&mode=design

During the usability study I took notes and created an affinity diagram to look for insights.

After making changes to the lo-fi prototype the next step in the process was to begin creating mock-ups. This is where I'm very comfortable, however, seeing this was a project and not plans for a app that would go live, I did my best to keep it simple and not overthink and create a million iterations on the design. 

Based on insights from the study I reorganized the navigation so ‘finding hugs’ was easier to access. Also I added a ‘quick check-in’ for users to write a quick note about how they are feeling without having to add a hug, further adding to the data that would be shown in their trends.  Also added a ‘learn’ section and ‘connect’ so that users can stay connected even if they can’t hug in person.

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 count, 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.

Some accessibility features I concentrated on, was using WebAim to make sure the colors I used had enough contrast, and making sure buttons were large enough, and also adding icon labels for screenreaders.

The final prototype for the dedicated mobile app is at the top. 

The next phase of the project was to create a responsive website for mobile, tablet and desktop devices.

I decided I wanted to drive traffic to the dedicated mobile app and did not want the same features/account as the app. So I decided the website would showcase features of the app and include reviews and a blog. So first I built out the sitemap then created some sketches for the mobile website and then the digital wireframes for all three screen sizes:

After getting the homepage laid out for the three screens, I finalized the rest of the pages and connected screens for the final prototype.

If you read to the bottom of this page, thank you, sincerely, for reading about this project! Some key takeaways I learned from this project:

Thanks again!