Healthy HabitsApp: UX/UI Design from Wireframes to Hi-Fi Mockup

Sylvia Gonzalez

UX Designer

Researcher

UI Designer

Adobe XD

FigJam

Figma

Learn Why They're Important With Healthy Habits

Don't Just Track Your Habits

Access the deck

Timeline

November 2021 - January 2022

My Role

Solo project for Google UX Design Certificate program

PROBLEM

Adults fail to stick to their health-related goals simply by using habit trackers

THE SOLUTION

When you get to the reason behind your goal, the why, it becomes a mission.

This is the critical takeaway from Simon Sinek's best-selling book, Start With Why, and my solution to helping adults stick with their habits.

Whether using a habit tracker or just a pen and paper, adults are more equipped to stick to their healthy habits if they learn the reason why that habit is good for them in the first place.

Understanding the User

Learning the "why" behind a healthy habit allows adults to customize it to their lifestyle.

The feedback received through research made it very clear that respondents would like to learn about healthy habits and stick with them if they had access to a simple, easy-to-use tool that could help guide them.

Also, respondents are often hard on themselves to follow habits precisely as they've been described and feel like failures when they cannot follow through with them.

The competition largely focuses on tracking habits and not on educating

Most of what I found in my competitive analysis were indirect competitors, but they were taken into account as they could infringe on HH's profit and popularity.

The main areas of opportunity I observed were:

Apps were mainly concerned with tracking healthy habits. One top-rated app educated users about healthy habits, but the experience was prescriptive and non-customizable.

Most websites that included healthy lifestyle articles did so on non-dedicated blog pages. This meant users would have to dig around for content related to healthy habits.

A U.S. government website dedicated to nutrition did include many links to articles on health-related topics. But it was bulky, did not have a smooth user flow, and was visually unappealing.

Starting the Design

SKETCHES // READER MODE

I kept the elements minimal since my target audience is busy, working adults.

I start with the crazy 8s exercise and highlight key elements I want to incorporate into my final sketch. This is my final wireframe sketch for the reader flow.

SKETCHES // CONTRIBUTOR MODE

The contributor mode screens focus on the flow of drafting and posting an article.

I also included other crucial screens, like a profile and a contact page.

Sketches of the responsive website paper wireframes

My approach was mobile-first, and I aimed to keep the app simple and easy to use.

At the beginning of my design process, I used Adobe XD to create low-fidelity wireframes.

I completed two rounds of low-fidelity wireframes before I moved on to high-fidelity wireframes.

At this point, I began user testing.

Usability Study Results

⥥

Inconsistency. In some cases, I used a checkmark to bookmark articles; in others, I used the bookmark icon.

⥥

The category page was titled “Articles” and not the name of the category in which these articles were listed.

⥥

Users wanted to know the approximate read time of the articles, which has become an industry standard.

Refining the Design

UI DESIGN

I chose a light and fresh and fresh visual style as I wanted to evoke feelings of health and well-being.

Once I addressed usability pain points, I continued designing the final screens in Adobe XD using Spectrum, Adobe's design system, as my guide.

Final Designs

Going Forward

Takeaways

Impact

I think the app will be very impactful in helping adults understand why they should adopt certain habits. If they know the "why" behind a habit, they will stick with it when it gets tough. This knowledge also helps them modify their habit to fit their needs. This way, they don’t feel like a failure if they’re not following a habit prescribed.

What I Learned

I learned that when taking on a project for social good, it’s best to keep one’s designs simpler and easier to use than usual. This allows the highest number of users to benefit from using the app.

Next Steps

⥥

I would like to include a habit-tracking function. But I envision a feature on the article page that takes the habit mentioned and converts it into a button. This takes the user into the habit tracking area, where they can add or modify that habit to suit their needs.

⥥

We could add a function to convert speech to text in the “contributor mode,” which I did not showcase here. This way, we open creator access to those with dexterity issues.

⥥

I want to integrate a scheduled appointment or video call feature. Through this function, a reader can choose to get one-on-one coaching if they like the contributor's work.

Thanks for reading!

Like this project

Designed an app from scratch, including lo-fi wireframes to high-fidelity mockups, focused on encouraging users to build sustainable wellness routines.

Likes

Views