small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2mL1d2q">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2nduHSM" alt="1*jl8pG6ak64Vd-58qOHAx-w.png"></div>
</div>
<div>
<h2>The UX behind the habit of exercise</h2>
<p>There are generally three types of people in the world when it comes to exercising:</p>
<ol>
<li>the fitness freaks who exercise all day err’ day;</li>
<li>the couch potatoes whose walking from the front door to their car would be the extent of their exercise for the day; and</li>
<li>the people in between who want to be fit and healthy but need some motivation (aka a kick in the butt) to go to the gym.</li>
</ol>
<p>I, along with most people I know, are the third type of person. We are called the general consumers of the multi-billion dollar worth of wearable fitness tracker market. Over the years, I have tried a few fitness trackers and my current obsession is Fitbit. It’s a great tracker and motivates me to be more active, but I have encountered a few problems while using their iOS app. So I decided to put my UX designer hat on and venture into the wild to see if anyone else shares my problems and if I could make any improvements to the app.</p>
<h3>My Design Process</h3>
<p>I decided to follow IDEO’s Human-Centered Design and Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.</p>
<div><img src="http://ift.tt/2mLC87x" alt="1*CB7oGmqRl1lq-OjUqLR7LA.png"></div>
<h3>Persona</h3>
<p>To start off, I created a provisional persona of a potential Fitbit user based on online research and my understanding of people who I knew that used Fitbit. This persona was created with assumptions and not fully research-based but it was something that I came back to throughout my project to guide my design decisions and priorities.</p>
<div><img src="http://ift.tt/2ndrt1v" alt="1*z1EydrDCjj22DZwbcIklMw.png"></div>
<h3>Job Stories</h3>
<p>I used the <a href="http://ift.tt/2mLEZxt">Jobs To Be Done framework</a> to explore different contexts in which a user would use Fitbit and to understand their motivation and desired outcome.</p>
<p>I created the following job stories based on interviews with users of Fitbit:</p>
<div><img src="http://ift.tt/2ndafla" alt="1*gF7qdPdbfFLyD3ymOfSt_Q.png"></div>
<h3><strong>Guerrilla Usability Testing</strong></h3>
<p>Based on the job stories and my understanding of the core functions of the Fitbit app, I developed a few scenarios with a series of tasks, such as:</p>
<div><img src="http://ift.tt/2mLrOwa" alt="1*yucZJAL7IVqLQSH_tEXKEQ.png"></div>
<p>Now comes the fun part. What is a better way to get some quick and free usability results than carrying out a guerrilla usability test?</p>
<blockquote><p>Guerilla usability test is “the art of pouncing on lone people in cafes and public spaces, quickly filming them whilst they use a website for a couple of minutes.” — Martin Belam</p></blockquote>
<p>Here’s the game plan:</p>
<ol>
<li>Approach unsuspecting strangers in a shopping mall with a partner.</li>
<li>Explain to them you are working on a project and ask for 10–15 minutes of their time.</li>
<li>Give them a few scenarios with tasks to complete on your app.</li>
<li>Your partner takes a video over them using the app (just the phone not their faces and make sure you ask for their permission first!).</li>
<li>Smile a lot and encourage them to think out loud.</li>
<li>Take up more time than they bargained for and thank them genuinely for their help.</li>
</ol>
<p>With this plan, I headed to Westfield San Francisco Center to approach shoppers coming out of yoga and sports brand stores. I verified that they at least exercise once a week before starting the usability test. In the end, I tested the tasks with five individuals. Here is a breakdown of their familiarity with fitness trackers.</p>
<div><img src="http://ift.tt/2ndvpzy" alt="1*fQW0Zpp2DaIklSk97xFjcg.png"></div>
<h3>Identifying and Prioritising Pain Points</h3>
<p>The next day I reviewed the recordings of the tests and jotted down each user’s pain point onto a Post-It. Then I used affinity mapping to group the pain points into similar categories on a whiteboard.</p>
<div><img src="http://ift.tt/2mLndKx" alt="1*AKBohQcQJQOeMoqG6GPs0w.png"></div>
<p>Affinity mapping pain points on whiteboard, each colour represents a user</p>
<p>Then I prioritised each pain point based on its importance to the user as well as its importance to Fitbit. My assumptions of the importance to users were based on conversations with the existing and potential users. My assumptions of the importance to Fitbit were based on my analysis of their website and marketing materials. Tracking, logging and editing the exercise were core functions of the product and challenging a friend was a core feature that made Fitbit stand out as a social fitness app.</p>
<div><img src="http://ift.tt/2ndj66a" alt="1*q2JvhhOwlrlx5LfMpZBZmw.png"></div>
<p>Prioritising pain points on a 2&#215;2 matrix</p>
<h3>Defining the Problem</h3>
<p>I decided to tackle the four pain points that were both important to users and Fitbit. I redefined the pain points below.</p>
<p><strong><em>Pain Point 1: Discoverability issue with tracking and logging exercise</em></strong></p>
<p>There are two entry points to track or log an exercise on the app: through a floating action button on the dashboard page and through the exercise page, but both entry points have discoverability issues.</p>
<div><img src="http://ift.tt/2mLtiXe" alt="1*_G-YYLD0Dqa-Q2iaEiB1zQ.png"></div>
<p><strong><em>Pain Point 2: Users had difficulty finding the relevant exercise type to log</em></strong></p>
<p>Fitbit has a large database of over 100 exercises that users can use to log exercise (and only 19 exercises available for tracking). But the app does not show a list of all exercises (presumably because such a long list may be overwhelming). For a user trying to log a new exercise, she can only use the search function, but this poses a problem when the exercise that she is trying to search for does not match the exact exercise in Fitbit’s database.</p>
<p>For the usability test, the prompt was to log a chest and arms workout at the gym. The user could not find any matching result by searching “chest”, “workout”, “arms” or “gym”. The most relevant exercise type on the database is weights but this is unknown to the user.</p>
<div><img src="http://ift.tt/2ndubEp" alt="1*CM1yfpo_Ry1mv2ZiV8S1Gw.png"></div>
<p><strong><em>Pain Point 3: Users could not edit exercise records apart from exercise type</em></strong></p>
<p>There are four different ways to record an exercise onto the Fitbit app. I did some further research by visiting Fitbit’s online customer service forum and conducting user interviews to learn more about how an exercise can be recorded.</p>
<div><img src="http://ift.tt/2mLxnuA" alt="1*VtSMDZVxpdlBDRWFFocMEg.png"></div>
<p>User interviews revealed that keeping a (roughly) accurate record of exercises is important for a user to motivate her to achieve her fitness goal. Currently, a user can only change the exercise type after an exercise is recorded. The ability to edit the starting time and duration of exercise is equally important because a user may forget to start or stop recording on time and the auto-detection on the tracker, although helpful, is not always accurate. This leads to either an exaggerated or inflated exercise time which could be discouraging and frustrating to the user.</p>
<div><img src="http://ift.tt/2ndfVvm" alt="1*4IskScF652OFg3i6xpysRQ.png"></div>
<p><strong><em>Pain Point 4: Users had trouble finding how to challenge a friend</em></strong></p>
<p>Creating a challenge with friends is one of the standout features that made Fitbit so socially popular when it launched. Currently, to create a challenge, a user has to go to the Challenges tab, select a challenge, then pick friend(s) to compete with. In the usability test, 3 out of 5 users tried to look for how to create a challenge on a friend’s page and were frustrated when they couldn’t find a way. This showed that for a user who already had a friend in mind that she wanted to compete with, the current flow did not match their mental model. She would expect to be able to perform social actions (including challenging a friend) on the friend’s page.</p>
<div><img src="http://ift.tt/2mLtJ41" alt="1*U6ZLxbgaTLARogYzgMQtRA.png"></div>
<h4>Task Flow</h4>
<p>I also created a task flow to show the flow for a user who wants to accurately record her exercise on the Fitbit app. The highlighted areas represent the first 3 pain points which I will tackle in my design solutions.</p>
<div><img src="http://ift.tt/2ndsu9T" alt="1*2GqFgdzXwvpUikMx6_J6uw.png"></div>
<h3><strong>Ideating the Solution</strong></h3>
<p>Then it was time to start sketching. I came up with several potential solutions to each of the pain points and made some rough UI sketches.</p>
<div><img src="http://ift.tt/2mLxN4i" alt="1*eeeSLf8CslzzU9B14-GVow.png"></div>
<p>I did some preliminary validation on the Lo-Fi UI sketches and used the feedback to refine my sketches and narrow down my solutions for the Hi-Fi mockups.</p>
<h3>Prototyping and Validation</h3>
<p>I jumped into Sketch to create Hi-Fi mockups of my proposed solutions and used Marvel to create a clickable prototype. I tested the prototype with 5 new individuals. Insights from the validation test led me to reiterate on one of the screens. Below are the Hi-Fi mockups of my final solutions including the results of the user testing before and after implementing my design solutions.</p>
<p><strong><em>Pain Point 1: Discoverability issue with tracking and logging exercise on Fitbit app</em></strong></p>
<p><strong>Design solution: </strong>Make the two entry points on the dashboard and exercise page more easily discoverable and make the choice between track and log exercise more apparent.</p>
</div>
<div>
<div><img src="http://ift.tt/2ndz3t1" alt="1*e1C83rTWU35xy1i5HxIReg.png"></div>
</div>
<div>
<p><strong><em>Pain Point 2: Users had difficulty finding the correct exercise type to log</em></strong></p>
<p><strong>Design solution: </strong>Add a way for users to browse all exercise types.</p>
</div>
<div>
<div><img src="http://ift.tt/2mLjDjr" alt="1*Rq7LzXc8QbxR6RtGom06Ow.png"></div>
</div>
<div>
<p><strong><em>Pain Point 3: Users could not edit exercise records apart from exercise type</em></strong></p>
<p><strong>Design solution: </strong>Allow the user to be able to edit starting time and duration of an exercise.</p>
</div>
<div>
<div><img src="http://ift.tt/2ndyy24" alt="1*Yv7DkFwNsZ_btaRM0_ggWg.png"></div>
</div>
<div>
<p><strong><em>Pain Point 4: Users had trouble finding how to challenge a friend</em></strong></p>
<p><strong>Design solution: </strong>Allow a user to challenge a friend on the friend’s page.</p>
</div>
<div>
<div><img src="http://ift.tt/2mLxNBk" alt="1*j_-Ab8u0xoNnJew3QfHUtA.png"></div>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Here’s an overview of the results of my design changes.</p>
<div><img src="http://ift.tt/2ndlKZx" alt="1*0H05jd2Zdn4qw1iGj_hUxA.png"></div>
<p>You can also check out my <strong>prototype</strong> <a href="http://ift.tt/2mLtIx7">here</a>.</p>
<h3>Takeaways</h3>
<p>Fitbit is a great product with a grand mission to get people moving. To achieve this, it faces one of the biggest challenges — changing a person’s habit. It’s packed with a lot of powerful tools to do just that, such as setting personal goals, tracking and logging exercise and social fitness challenges. But changing a habit is painful, so it’s even more important to make it as easy and friction-less as possible for a user to use those tools. And sometimes a change as small as enlarging a button or changing an icon can make a difference.</p>
<p><em>Note: I do not work for, nor am I affiliated with, Fitbit. I did this UX case study as I am a product designer who likes to solve problems and Fitbit is one of my favourite products. I did this case study in February before Fitbit’s recent iOS update on 22 March which addresses Pain Point 3.</em></p>
<p><strong>Thanks for reading! If you want to collaborate, talk about product design, or just want to say hello, hit me up at stacey.ly.wang@gmail.com or connect via </strong><a href="http://ift.tt/2ndzTGh"><strong>LinkedIn</strong></a><strong>.</strong></p>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2mL1d2q">http://ift.tt/2mL1d2q</a></div>


Fitbit: A Usability Case Study

Fitbit: A Usability Case Study

The UX behind the habit of exercise

Top Stories

Top Stories