Published on <a href="https://blog.prototypr.io/sleeptracker-a-wellness-project-62dbeb6fe30d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Steve Nunez 
UX/UI Case Study
When seeking out the services of a UX/UI designer, typically a client has a particular project in mind that requires a solution be devised. The job of the designer is to create a solution that benefits both the client and user. In this case the client is The National Wellness Institutue.
<img alt="" src="https://cdn-images-1.medium.com/max/344/1*5KSXApIn9EIQyr1gSbNrYQ.png">
<h4>Briefly looking at the Brief</h4>
<a href="http://www.nationalwellness.org">The National Wellness Institute</a> was formed to realize the mission of providing health promotion and wellness professionals resources and services that fuel professional and personal growth. NWI wanted to expand their wellness offerings by seeking to have a suite of health applications available to their customer base. In this ‘suite’ would be many categories of which one was “Sleep Analysis or Sleep Tracking.” In seeking development for this app (and all it’s apps), goals were simple, to increase the overall health of its users and to allow its users to track the progress while doing so. In this case study I will expose the process of which I used in developing this “Sleep Tracker” app and the methodology used throughout.
<img alt="" src="https://cdn-images-1.medium.com/max/432/1*UwuXHms5VwIwcb7SS575uQ.gif">
<h4>The Methodology</h4>
The UX/UI design process is generally undertaken in 5 steps; empathize, define, ideate, prototype, and test . Of absolute paramount importance is the define or research phase where I adopt the mindset of “user centered design” where the user is front and center and is always at the heart of each of the 5 mentioned steps. In case you’re wondering about the client, rest assured the client’s goals and user’s goals will be overlapping and it’s in that “overlap” where the UX/UI process actually lives and where I aim to deliver a solution that satisfies both business and user.
<img alt="" src="https://cdn-images-1.medium.com/max/749/1*kLJyC-THCjPV-PrRzZspyg.jpeg">
My goal is to achieve the balance necessary to meet both sets of needs (client/user.) It is this balance and how designers go about achieving it that sets good designers and great designers apart. Starting with the “research” phase, developers must first take the time necessary to understand their end users. Conducting research helps developers get into customers’ mindsets. My research methods included listening to and observing customers; interviewing; and conducting online surveys. Since my app targeted the “sleep” phase of everyday life- and everyone sleeps, it was fairly easy to attain responses to my surveys and questions (despite a slow start to survey responses.) I posted (via Google Forms) a “<a href="https://goo.gl/forms/8eWyFArwD4nAgCXA2">sleep survey questionnaire</a>” to identify spots of difficulty or confusion as well as compile data which would come into play at later stages of app development, it is often amongst the first steps of the research phase and ideally is done as early as possible. A main drawback of this early survey distribution was the realization certain questions were omitted but could have contributed to the app at later stages of development. I could not simply modify or add questions as it would corrupt the data as collected and quantified due to reply offset and question altering- I had to stick with my original survey and add questions to personal interviews when possible at a later time.
<img alt="" src="https://cdn-images-1.medium.com/max/524/1*gEkvM5W4OPhJKuiMfSY60Q.png">
<h4>…”Survey Says”</h4>
So what did the survey reveal? Out of 124 responses, we can form a persona and use this “persona” as our primary target user and tailor the app to their needs as it will service a large demographic of potential users…..and the survey revealed; most respondants were, ages 45–55, mostly male, and most slept 5–6 hours, which is well below the optimum recommendation, clearly this app could reap benefits to those users who responded if used. There were a myriad of other questions answered which helped to further form the basis of the app. (This survey data, partially shown helped form the backbone of the app.)
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*IRO8s8XRM9pGYDihOK0etw.png">Persona, Sleep Tracker Ap<img alt="" src="https://cdn-images-1.medium.com/max/900/1*5sRAONq789UQ73Yyor2fNA.png">Lean UX Canvas
<h4>Ok, so where do we go from here?</h4>
OK, so with a basic persona realized, let’s begin with the most basic question of all- why a sleep tracker? Sleep plays an important role in your physical health. It’s involved in healing and repair of your heart and blood vessels. Ongoing sleep deficiency is linked to an increased risk of heart disease, kidney disease, high blood pressure, diabetes, and stroke. All you can hear today is hustle 24/7, outwork your competition and other similar statements diminishing the importance of sleep. Sleep is definitely not getting enough attention and that’s a bad thing- enter the realm of sleep trackers and my solution to this daily phase of our lives. While studies in sleep research are always ongoing, it’s clear we still don’t understand all aspects of sleep but we do know full health can’t be realized without a steady sleep cycle. I also learned optimum sleep cycles vary person to person and in general, guidelines have been recommended as to sleep times optimized for various age groups. My app would focus on these recommended sleep times and tracking them as it was one variable that is identifiable, quantifiable and absolutely vital to the sleep tracking process!
<img alt="" src="https://cdn-images-1.medium.com/max/751/1*CcWB-rwf2MoEmHdYoeqk1g.jpeg">Affects of sleep deprivation shown in the lower image
User Tasks Every step a user might take in using an app or using a similar device can be broken down into a “task analysis” and outlines any potential areas that can be addressed. While basic in nature these steps can often reveal a pain-point that can be addressed during app development. Although the “Alarm” feature is yet a single app feature, as a designer we have to consider the total experience a user undergoes in the seemingly simple task of setting an alarm as shown below in the “task analysis” chart. It is these small attention to detail observations, that help to form feature-sets and hinderance removals during app development and personifies the ideology of “user centered design.”
<img alt="" src="https://cdn-images-1.medium.com/max/971/1*ION5XiQZeETONdNIhUONsg.png">Simple Task Analysis for setting an alarm<img alt="" src="https://cdn-images-1.medium.com/max/901/1*TARcuVigMcsAQwbvwYC6gg.png">
<h4>The Competition!</h4>
So now that we know the importance of sleep, I went on to competitive analysis and researched how competitors solve this issue (sleep tracking) and seek to ideate my own solution with added benefits. In effect I’m performing a competitor analysis and look to offer my unique solution that adds improvements, enhancements or features others are not offering or addressing. A quick Google search revealed the top 6 “sleep tracking” apps were: “Pillow” “AutoSleep” “Sleep Time” “Sleep Cycle” “Twilight” and “Pzizz.” Many apps offered similar features and offered some variant of tracking sleep by monitoring sleep times…..since sleep technically is a time period of inactivity, I couldn&#8217;t reinvent the wheel here and also offered my variant of “time tracking” with the added feature of allowing detailed e-mailed reports if the user opted for it. This could provide crucial information for a user with a chronic problem that might want to have his/her sleep cycles checked by medical specialists- no other app offered this capability.
<img alt="" src="https://cdn-images-1.medium.com/max/266/1*Z8fBXOoDfKxCMM0sBJqAtw.jpeg">Sleep Tracking Results — E-mail option!
<h4>Testers Testing</h4>
To test the charted e-mail report feature and it’s potential appeal or usefulness to users I went on to desirability testing which consisted of 6 testers- which would account for most (85%+) usability issues if found. The users were handed a mobile phone with a working prototype and were given a set of simple tasks and were asked to think aloud and mention anything they thought (positive or negative- but targeting the negative remarks to enhance the app further) while using the app. Most of the users liked the interface and mentioned they liked the darkened blue colors as to match mental notions of nighttime. I was told the app could be further improved visually if I adopted a “morning” color-scheme for the “waking phase” of the app and modified the
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oD-jYN_UiuN8sgtTMGQA-w.png">
color scheme accordingly to universally positive review. During this testing I created a whimsical “user journey map” which would pictorially showcase the actions/emotions a user might experience when using the app.
<img alt="" src="https://cdn-images-1.medium.com/max/666/1*TJCtAQPmPKRU937_AcF2ZA.jpeg">
<h4>Going Back to Move Forward</h4>
So now that you’ve seen the current look, let’s go back and see how this began and what changes were made as a result of user feedback and testing. The app was initially designed using low-fidelity prototypes which are paper and pencil mockups of initial designs. In testing this prototype it became clear some changes were necessary to address small but persistent design errors testers made mention of. One change was the use of round icons for the categories as testers mistook them as app buttons.
<img alt="" src="https://cdn-images-1.medium.com/max/777/1*u1GLspnf-irmT4524tpHQg.jpeg">4-weeks, app design progression
Yet another change was the shifting of app icons to the left followed by text (to the right) as this is the common design practice today and follows proper convention and Gestalt design principles. Further testing revealed a change to rectangular icons would best suit the user as they could be shifted to the lower portion of the screen into the prime “thumb zone” area allowing for optimal 1-handed navigation and greatest usability.
Another interesting change during development was the deletion of the “start sleep timer” numbers screen as it was pointed out it would be simpler to have the app display the current time and initiate the timer from that point
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*qStD37gUt8fDyZRUjJSmnA.jpeg">
onwards which the user could then start sleep timing without the need to type in numerals. Amongst the numerous iterations was the text reporting of the “Sleep Monitoring Results.” Testing revealed it would be cumbersome to copy ‘results’ text and keep records, this was addressed by the implementation of “sleep graph” creation which would turn out to be the standout feature of this app- the ability to e-mail (graphed and text) results to the user (if desired)- a capability no other sleep app featured.
Multiple iterations were made and re-tested of which later became realized into the final prototype.
<h3>Final Prototype~</h3>
Shown below is an animation of the “Sleep Tracker” application in its final stage of development. It depicts a guest user initiating sleep tracking by the inputting of their age and is shown an aged optimized “Sleep Goal” of which they begin the sleep timer- which the user “ends” and is shown a “Sleep Graph” which is then e-mailed by having the user input their e-mail address and confirmation appears when the button is clicked. A very efficient and easy to use application which addressed all concerns during research and testing.
<img alt="" src="https://cdn-images-1.medium.com/max/330/1*E--2DNKZPuCKbppykdfl_Q.gif">Sleep Tracker Prototype
<h3>What comes next?</h3>
If I were to continue with development, I’d continue with further testing and user interface modifications to optimize the experience to allow for the recommendations that were not included in this finalized prototype. Enhancements such as ‘feature mixing’ where a user could combine the ‘tracker’ with the ‘mediation’ feature or any such mixing to allow a fully customized user experience. I would also look into Apple Watch integration to allow for blood pressure and pulse rate monitoring to be added to the results of sleep tracking to further add value to the sleep tracking.
Perhaps at a later point I can revisit this design and further improve it. Given more time using the UX/UI design principles of user centered design could help form this concept/application into a viable alternative to the present sleep tracker app market.
Thank you for taking this journey with me~
<img alt="" src="https://cdn-images-1.medium.com/max/495/1*X9ftIxt-VojMp4K6Hqe2tg.jpeg">
Steve Nunez steve@stevenunez.com
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=62dbeb6fe30d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/sleeptracker-a-wellness-project-62dbeb6fe30d">“SleepTracker”, A Wellness Project</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

“SleepTracker”, A Wellness Project

Top Stories