ux/ui research & design | 2020


Develop a health and well being application for a chosen target audience.



User Centered Design Process; with special emphasis on iteration and testing



A responsive web app for elite athletes in advanced or professional training.

some project context

For the largest and most in depth project of my CareerFoundry course, we were given a few options to choose from. I ended up choosing a project that I felt would challenge me the most : designing a health app. Health is a theme I tend to avoid in my personal life despite it being in my best interest. I rarely exercise and I often choose carb loading but without the running a marathon part. From my own design experience, most of my professional projects and clients deal with subjects I am unfamiliar with. I wanted a project that would mimic this experience and push me to build from the ground up. I also wanted to start with a fresh mindset where I wasn’t bringing any pre-conceived baggage or opinions with me. This is where the process began.

ux research

The task at hand was designing the UX/UI for a health app. Encouraged by my mentor and tutor, I was prompted to push the given brief further and explore alternate possibilities. So I sought out ways I could spice it up. Like most of my research based projects, I started by employing my common sense. While I may not be the resident expert or user of health apps, I also don’t live under a rock. I am familiar with the popular apps and tech that dominate the market like Apple Health, Fitbit, and MyFitnessPal. I knew these would be foundation products to my research but I wanted to gather some more options to round out my analysis. Luckily enough I have extensive connections to current or former elite athletes as well as friends involved in professional sports. I reached out to these friends hoping to gather some niche recommendations that might be unknown by the general public. Shockingly enough, this is where my research turned up short. They all reported back that they rarely used health apps or much of anything related due to a number of reasons. This was surprising to me. There were so many basic health apps making up an over saturated market. But not one useful resource for advanced athletes? This was my lightbulb moment and the direction I decided to pursue head on.

competitive analysis

While I learned there was slim pickings for advanced athletes, there was still lots to gather and learn from the basic available apps on the market. I needed to start with a competitive analysis by gathering the most well known or relevant apps to my project. I ended up extensively reviewing FitBit and Nike Training Club. I chose these two specifically because Fitbit is an affordable, wearable tech option and NTC is a free, standalone platform. Both at different points of the spectrum in terms of accessibility and purpose. I wanted to understand what has made these products so popular and take inspiration from their successes and mistakes. The key takeaways can be surmised by their SWOT analysis. Check out Nike’s below :

user research

Once I had a better idea of what was on the market, I had fully exhausted my knowledge of general health tech. It was time to get into the heads of my target users. I needed to start with user interviews to fully understand their experience: what they do, how they do it, and what they need. For the sake of acquiring as much relevant info as possible, my participants had to have a recent involvement in elite athletics. I chose three individuals who have competed or coached at the collegiate or professional level.

participant 1

Former NCAA, SEC Athlete

participant 2

Professional athlete, Olympic hopeful

participant 3

NCAA Dietician

I had distinct goals for my research :


Gather a better understanding of athletic training and how it encompasses their daily life


Document user opinions on competing and non-competing products


Determine users aspirations and their ultimate goals with training


Document how coaches and athletes correspond and interact


Understand how users stay up to date with research and news within their field

I also conducted a survey to gather additional insight on training. The interviews gathered more intimate information, while the surveys helped me confirm general experiences and motivations. The survey was also conducted with professional athletes and coaches. Check out the surveys here. My interviews and surveys were incredibly fruitful. I uncovered lots of interesting opinions and behavior. My most important takeaways were :

affinity mapping

I had a lot of great feedback but I was left with a lot of info to sort through. Right now my findings were a jumbled mess of quotes and notes, it was hard to know where to start. I needed to review what I uncovered and determine where exactly my problem and solution lied. I began organizing with an affinity map, grouping together and naming similar feedback from my participants. In each group I identified findings to reveal deeper insights.

problems & solutions

Based on the interviews, I now know there’s lots of challenges that athletes face. However, it’s a tall order to fix every problem that was addressed. For this first iteration I wanted to focus on points that were brought up multiple times in separate interviews. I felt those issues were the most pressing and would need more rounds of testing to work out the kinks. It seemed that a singular issue that faced both athletes and coaches was the frustration of maintaining clear and organized communication. With the need to keep track of schedules, stats, daily health, progress, videos, workouts, etc. It can all be very overwhelming to communicate with one athlete or coach, let alone multiple. This felt like a solid place to focus efforts and center this first iteration on.

User Personas

Moving forward, I needed to condense all my interviewed and surveyed personalities into user personas. This is an important step in ensuring I’m keeping the user at the center of all my design decisions. I came up with three personas that I believe encapsulated my target audience and gave me solid pillars to rally around for the remainder of the project. Let me introduce Daniella, Richard, and Julie :

User stories

Through the eyes of Daniella, Richard, and Julie. I came up with user stories to focus on their pain points, motivations, and desires. Thinking from their POV helped me to come up with the features/solutions that my product would consist of. Here are a few user stories I came up with : 

ux design

project decisions

At this point of the project, I had a clear direction and a list of potential features I wanted to implement. However, I was feeling rather overwhelmed in what I was going to be able to accomplish with my limited knowledge in nutrition. I could visualize the bigger picture but when it came to the small details, it was daunting. I decided to return back and review the competing products from my research a bit further. While they are technically indirect competition, they do feature some overlap and could help guide me in building out the more scientific points of the app.

To do this, I not only reviewed and personally used Fitbit and NTC daily to better understand the product. I also carried out a content audit with MyFitnessPal. Although MFP has its own usability errors and setbacks, its data organization and nutrition thoroughness is something to admire. For someone that was not sure where to begin with a complex topic, it was a great resource. Check out the Audit here.

I also reviewed the usability heuristics in a niche app that could be considered direct competition. One of the few, usable apps I had encountered. Fitbod was the only program that came close to catering to elite athletes by offering an advanced service with a decent UX/UI design. Check it out here.

information architecture

Once I had more confidence on nutrition and general organization. I was back in business. It was time to start blocking in the sections of my site. I decided for this first iteration, I would be designing the athletes version of the app. Through my interviews and surveys I felt I had gathered a lot of valuable athlete insight to confidently carry out my UX design. I felt coaching feedback fell short, and I should gather more user research in future iterations.

user flow

Taking each user story I began building out the pathway’s my personas would personally take to accomplish them. The purpose of a user flow is to build out an intuitive experience; thinking of the most ideal, simplified path users can take. As well as the alternate ways they could complete their desired action. To do so, I start with writing out a task analysis for each user flow, eliminating steps that feel unnecessary or prolong the path. I want to take as much work off of my user as possible. So the less clicking and reading I can implement while still making the path sensical is the goal to my work. Here are some flows :

site map

My site map has been an ever evolving element, as I learn more about my features and develop my designs further. But the skeleton remains pretty much the same. My product will consist of a dashboard which will serve as the user’s daily hub as they go throughout their day. The other portions of the app will consist of an activity, health, goals, and coaching section. How these sections are organized has been a challenge as the possibilities are endless. But which one is best? That is the question.


Once I had a semi-solid site map, it was time to start prototyping my user flows. The first prototypes would be centering around my onboarding experience, the coaching portal, goal making, and the dashboard. I started sketching out my initial designs to create low-fidelity wireframes.

rapid prototyping

Once I had my ideas on paper, I quickly moved to the computer to start rounds of rapid prototyping. Increasing my level of fidelity with each design, working out the kinks and improving the UI.

ux testing

I wanted to test with a mid-fidelity prototype to ensure a clear and concise test. Once I felt confident in my prototype that displayed a more advanced UI and fully realized user flows, then I was ready. I originally developed my test plan and script for 6 moderated, in-person sessions. Unfortunately, this was not that plan that came to fruition or with the demographic I preferred. Thanks to Covid I had to rethink my testing and participants as I had lost access to my first choice of people.

But if 2020 has taught me anything, it’s flexibility. I re-thought my test plan to better suit an online call. And as for my not so target demographic, this was ok too. After all, I would be providing the scenarios and just needed them to test the simple usability of my product. You can check out the full test plan and detailed results here.


After testing concluded I organized my participants feedback into another affinity map, creating a rainbow spreadsheet based on the shared experiences of my users. I would be basing issue severity on Jakob Nielsen’s Usabiilty Metrics from 0-5. Testing was overall very positive with only a few major issues. All other setbacks were minor and general quick fixes. My major problems were …

Issue #1

Users had difficulty locating where to add a goal and the progress bar’s presence after completion.

Solution : Goal should be resubmitted as a main navigation icon with a redesigned illustration. A progress bar should become available on the user’s dashboard (with the option to remove) after adding a goal.

Evidence : Upon questioning, 66% of participants expected goal making to be under the main navigation and mistook an existing icon to be a medal. 100% of participants had difficulty locating the ‘Add Goal’ button and felt it was not intuitive. 66% of participants also expected a progress type bar to be displayed automatically on the dashboard.



Issue #2

Main navigation icons were mis-identified across the board.

Solution : Main navigation icons should be re-designed to reflect the insight and guesses given by participants.

Evidence : 100% of participants mis-labeled the existing icons with many participants giving the same answers.



ui design

Once I had fixed my major issues, I was ready to start designing my high-fidelity wireframes and implementing iOS native elements. Overall, I set out to completely polish my prototype with the small details and flourishes that truly set a product over the top.

style guide/dls

My largest hurdle was completing my product’s style guide and DLS. I had kept this in mind all along, trying to implement an identity with every iteration. Improving on the look and feel with each increase in fidelity. And while this helped, I still had a lot to do. I started with organizing a color palette, as this is usually my biggest struggle as a designer. What I came up with was a family of colors that complimented the dark mode aesthetic I wanted, while preventing the heaviness that can sometimes accompany that style.

Since I had many families of elements that needed to be separate entities (i.e. health, activity, etc.), I was worried about maintaining a cohesive look throughout the app. I wanted to be as streamline as possible with my palette, so that I wouldn't have to use colors that deviated from the main hues. But would still have distinct and different looks to them for easy identification. To achieve this, I aimed to be super strategic by employing the use of gradients and varying opacity to double my color options. As you can see above, low opacity gradient usage is reserved for large containers, health and activity widgets. This allowed me to use those corresponding colors/gradients again by overlaying them with the bolder, full opacity colors.

My design has taken on an interesting blend of flat and 3D elements. I feel like 2020/2021 has been a major transition as design trends move away from flat design to neuromorphism. Either way, I want to design products that can look up to date for as long as possible. Part of that is resisting the temptation of utilizing too many trends. Finding that perfect balance of doing something interesting and different, while still implementing classic principles can be a challenge. I think I managed to churn out a decent mixture for HEAT with my use of gradients and subtle drop shadows. I believe the key to achieving a refined UI is employing fancy elements only when it supports the design. For example, I've utilized shadows to first increase legibility of certain elements. The dynamic look they give the interface is only an added perk.

HEAT’s DLS is a work in progress. As I complete more iterations, my system will become more and more sophisticated as I spot inconsistencies and usability errors. But for now, I have a solid foundation to work with as I move forward with additional testing.  

high-fidelity screens


Brief but thorough onboarding process, pinpoints user needs and training elements. So dashboard can be ready and user can start right away.


User choses widgets they believe are relevant to their training. Dashboard is their daily hub, providing info pertinent to the day’s training.


Athletes can communicate more efficiently with their multiple coaches. They have the ability to upload videos, compile progress reports, schedule meetings, and much more.


User is provided with general overview of their weekly workouts. With progress meters and completion statuses.


Coaches can upload personalized workouts for their athlete to complete. Athlete can view and complete session in live mode or with overview.


User has the ability to create custom and specialized goals pertaining to health or their sport/event.


App features behavior elements that encourage user to work towards result (i.e. streaks, milestones, etc). They also have the ability to make and track multiple goals.


Users can log health related figures into customizable widgets

next steps

I consider my first iteration to be a huge success. I identified a huge gap in the market, recognized major pain points for athletes, developed the UX for four major features, and established a solid brand identity with a style guide and design language system. While I’m so proud of everything I’ve accomplished, I recognize that there is still much to do before this app can be considered “complete.”

My second iteration will consist of continuing improvements with my existing designs. As well as starting the development of new features. I will need to begin designing the responsiveness of the product so it can be accessible for tablet and desktop portals. And of course, continue testing at regular intervals. While the athlete’s side of HEAT has some additional polishing. I believe I’ve made great headway with its development. Next steps would include building out flows for more sports and athletes. The next chunk I’ll need to tackle is starting on the coaches UX. While I discovered interesting and valuable coaching insights during my initial research, I believe I need to dig a little deeper within their sphere. That includes interviewing a few more coaches across multiple fields. I can begin implementing my original user stories while I conduct additional interviews.

what i learned

This has been a huge project for me, packed with a new lesson at every step. With this project I was able to really dig deep into the UX process while applying my strengths in UI and visual design.