heat
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.
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.
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.
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 :
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.
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 :
Elite athletes must track more factors than the average health conscious person. Current apps fail to provide a product that encapsulates the many different factors athletes need to record.
There is a basic group of monitored factors that athletes share between sports. However, there are special factors for every athlete, sport, etc.
Athletes may not regularly speak with their coach in person or even meet everyday.
Athletes may have one on one meetings only a couple times a year.
Athletes train everyday during the peak season, with multiple sessions a day. Routines in the off season can drastically change.
Athletes typically focus on different activities each day.
Since athletes have to sometimes train on their own, they still need feedback from their coaches.
Coaches are in charge of multiple athletes in different sports/divisions. This can be overwhelming for both when sharing or remembering lots of information regarding different individuals.
Coaches may have to enter in information for many different athletes in a short period of time.
Coaches can feel overwhelmed when corresponding with athletes outside of practice.
Coaches may be in charge of multiple athletes that may not require constant coaching. However, they fear they tend to ignore these athletes.
Coaches often compile workouts on word docs and send via email, text, or other document sharing platforms.
Athletes and coaches can feel overwhelmed with having their information spread out across different platforms.
Since athletes have to sometimes train on their own, they still need feedback from their coaches.
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.
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.
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 :
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.
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.
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 :
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.
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.
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 …
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.
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.
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.
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.
tunneled
onboarding
Brief but thorough onboarding process, pinpoints user needs and training elements. So dashboard can be ready and user can start right away.
customizable
dashboard
User choses widgets they believe are relevant to their training. Dashboard is their daily hub, providing info pertinent to the day’s training.
Coaching
profiles
Athletes can communicate more efficiently with their multiple coaches. They have the ability to upload videos, compile progress reports, schedule meetings, and much more.
workout
tracker
User is provided with general overview of their weekly workouts. With progress meters and completion statuses.
workout
viewer
Coaches can upload personalized workouts for their athlete to complete. Athlete can view and complete session in live mode or with overview.
goal
making
User has the ability to create custom and specialized goals pertaining to health or their sport/event.
Goal
tracking
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.
health
dashboard
Users can log health related figures into customizable widgets
