Halo Product Hero-Shot

Fit2B

Asthma & Weight Tracker

  • Role:

  • UX/UI Design
    Gamification
    Brand Identity

  • Category:

  • Internship @ UT Austin

  • Timeline:

  • Jan - June 2022

  • Tools Used:

  • Figma
    Adobe Illustrator

Role: UX/UI Design, Gamification, Brand Identity

Category: Internship @ UT Austin

Timeline: Jan 2022 - Current

Tools Used: Figma, Illustrator

Overview

At UT Austin I worked in the Simulation & Game Application Lab as a UX/UI Design Intern. The project I worked on was to build an app which would be used as part of a research study for the School of Nursing.

The Team

Fit2B Student Team

Problem

Our user personas targeted teens struggling to manage their asthma. The base and user flow of the app was designed prior to me joining, but it was bare-boned. We needed to conduct user interviews to elicit pain points with the current app flow.

User Pain Points

The top three pain points that I discovered through interviews were:


1. The app design was too "boring"

2. Users did not find the app very useful

3. The onboarding process was too long and unorganized

Brand Identity

In order to increase teen engagement, we needed to make the app inviting and visually appealing. We created mood boards to zero in on the direction we needed to go. Visuals that used primary colors, geometric shapes, and black outlines were particularly appealing to teens. This style also emphasized youthfullness while still maintaining a reasonable level of professionalism.

Fit2B Icon Variations

Brand Guidelines

Fit2B Brand Guidelines

Gamification

In order to increase the 'fun' factor for teens going through the onboarding process, I added elements of gamification to it.

While sketching the app interfaces, I was able to discern what screens and features from my initial brainstorm were valuable and what was superficious. I was also able to determine the navigation as well as figure out a basic idea of how I wanted the UI and visual aesthetics of the app to look. After several iterations, the design was polished enough that I could ask some potential users to go through the screens and flows. They were able to provide valuable feedback which I made notes of.

Progress Bar

I added a progress bar to give a visual cue of how much is left during each level of the onboarding. Encouraging messages pushed users to continue on.



Fit2B Progress Bar Gif

Levels

By using levels, I was able to turn the whole process of user interaction during onboarding into an exciting journey with different stages. I did this by grouping different questions and steps into three categories: setting personalized goals, medical information, and basic information. This was done tactfully, making the more tedious steps first, and the quick, easy personal questions at the end so users don't get bored.

Fit2B Onboarding Levels

Takeaways

I learnt a lot from this internship. Particularly, the value of teamwork and collaboration. I had to work with developers and convey my design ideas to them, to code. I also worked with end users and learned how to ask questions to get their true feedback without leading them to an answer.

Overall, the internship taught me the complex process that goes into creating a live app.

Back to top ↑