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>Published on <a href="http://ift.tt/2puV8Uv">| Prototyping: From UX to Front End &mdash; Medium</a> Anita Shim <img alt="" src="http://ift.tt/2qRgMqu"></p>
<p>I mean, really- how old you are you on the inside?</p>
<h4><strong>The client overview</strong>:</h4>
<p>Vancouver startup <em>VitalSines</em> recently caught a massive national buzz after going live on CBC’s Dragon’s Den with their product- <em>iHeart</em>. It is a personal health tracking wearable that combines the power of a pulse oximeter that measures aortic pulse velocity, to measure your “internal age”. The device clips on to the user’s finger while the companion mobile app guides them through their whole experience.</p>
<blockquote><p>iHeart’s mission: Help people live longer and healthier lives</p></blockquote>
<h3><strong>Our Opportunity</strong></h3>
<p>Sarah, the CEO approached our UX/UI team with the challenge of redesigning the entire iHeart app to better meet the needs of:</p>
<ul>
<li>their current customers- for user retention</li>
<li>the target audience- for higher conversion</li>
</ul>
<h3><strong>The Current App</strong></h3>
<p>Although the users are able test and track their internal age, some major problems were identified immediately. At first glance, it is a sea of dry medical information with no context of the data, nor guidance of what do with it going forward… But we needed to delve further with research.</p>
<p><img alt="" src="http://ift.tt/2puYuXr">test results page on the existing app</p>
<h3>User Research- Identify what people really want</h3>
<p>The team and I utilized several research methods dig at the brains of the people who would be using this product, so we can nail down the real concerns from their standpoint.</p>
<h4><strong>Contextual Inquiry:</strong></h4>
<p>We tested the existing iHeart device and app with various age groups, and found that users…</p>
<ul>
<li>found it confusing to set up wit device, that had no real instructions</li>
<li>didn’t understand why the numbers were fluctuating constantly</li>
<li>couldn’t interpret the medical result data properly</li>
<li>kept testing repeatedly to get lower ‘internal age’ numbers</li>
<li>didn’t know to what standards their results were matched</li>
</ul>
<p>So far, the common concern screams this…</p>
<blockquote><p>“What does this number mean? Why does this number keep changing? How is my internal age being measured? What is this number compared to?”</p></blockquote>
<p>This <strong>user journey map</strong> helps pinpoint the emotions typically experienced while using the app, from beginning to end. As you can see, “Bob” starts off with some confusion on directing through the app, and responds to the testing phases with excitement and skepticism. Depending on his results, he would feel a variety of emotions responses- surprised, disappointed, or relieved. Upon getting back his results, Bob is given little info on the rationale behind these numbers, and he doesn’t know what to do with it.</p>
<p>Ultimately, the underlying goal for Bob is to feel young and healthy, and to lower his internal age.</p>
<p><img alt="" src="http://ift.tt/2qR6G9e"></p>
<h4><strong>Survey Research:</strong></h4>
<p>We developed 2 surveys to validate our client’s target audience- one for baby boomers and the other for millennial adults. We were able to analyze current behaviours among these demographics regarding their relationships with personal health, as well as with digital health products.</p>
<p>Our findings are as below:</p>
<p><img alt="" src="http://ift.tt/2pveXeg"></p>
<p><strong><em>Baby Boomers (Primary Audience): </em></strong>This is the target demographic of the product, whose insight has the most weight in our research.</p>
<ul>
<li>The majority of respondents exercise, eat healthy, and want to improve overall health</li>
<li>Light activities (such as walking) were the most prevalent form of exercise</li>
<li>Almost no one currently uses a health wearable</li>
<li>47% use health apps for motivation, health tracking and management of medical history</li>
<li>No one has heard of iheart, yet 70% have expressed interest in using a device like it</li>
</ul>
<p><strong><em>Millennial Adults (Secondary Audience): </em></strong>This isn’t the target, but we wanted to see how much interest there would be out of our focal age range.</p>
<ul>
<li>The majority of respondents exercise, eat healthy, and want to improve overall health</li>
<li>The majority uses/has used a health app</li>
<li>Almost no one has heard of iheart, yet 75% have expressed interest in using a device like it</li>
</ul>
<h3>User Personas</h3>
<p>Based on the user research conducted, we have narrowed our focus to the baby boomers aged 45–60. These are users concerned about age-related illnesses and are keen on partaking in preventative measures to hinder future health complications.</p>
<p>There are two personas- one for an existing user of the current product, another for a new user who would be onboarded onto the new iHeart app. For each profile, I’ve noted 3 key motivations for using iHeart device / app.</p>
<p><img alt="" src="http://ift.tt/2qQF7gk"><img alt="" src="http://ift.tt/2puYvdX"></p>
<h3>Market Research- How are we gonna compete?</h3>
<p>In order to create the perfect product for our users, we wanted to navigate the playing field in which iHeart is located.</p>
<p>There are currently 165,000 health &amp; wellness apps on the iTunes store…</p>
<p><img alt="" src="http://ift.tt/2qR17rg"></p>
<p>and of that number…</p>
<p><img alt="" src="http://ift.tt/2pv6uI3"></p>
<p>Through an extensive <strong>comparative &amp; competitive analysis, </strong>I’ve highlighted 3 top competitors for their unique features and selling points.</p>
<p><strong>Lumosity: </strong>This product has a very friendly and colorful onboarding system for new users with bits of scientific and expert validation. Introducing science immediately establishes trust in the users’ first impressions of the app. Through personalized training programs and friendly language, the app builds rapport with its users, which helps with conversion and retention. Lumosity has successfully gamified its whole service via real games, which only adds on to its “fun” factor. The one disadvantage of Lumosity is that the depth of information such as personal progress, is limited unless the user pays for a premium account.</p>
<p><strong>Pacer:</strong> This app is a fitness/step tracker with gamified features and unique data visualization. With the sheer amount of information that Pacer offers, the UI and placement of data make it easy for users to absorb the content. The app however, does not have a form field system that is as intuitive as the others.</p>
<p><strong>LifeSum:</strong> Where it really shines for LifeSum is its effective system of acquiring necessary information from users, through sleek form fields. By introducing only one question per screen, the user is more likely to fill it out in order to reach the next step of the experience, rather than being overloaded with multiple questions and input fields, which may cause bouncing. This is a very smart and effective way to get users to give information that will help them invest in the app, and therefore return to it.</p>
<h3>The Product Design- prioritizing features</h3>
<p>Inspired by the the best designed and most popular competitors out there, these are the four features we have decided to implement in the new iheart app.</p>
<p><img alt="" src="http://ift.tt/2qRlu7P"></p>
<p>Keeping mind of the aforementioned user goals and the competitive functions to incorporate, the following features were also important considering of the aging user base:</p>
<ul>
<li>large text and icons</li>
<li>simple, casual wording</li>
<li>click-based navigation</li>
<li>more visuals, less words</li>
</ul>
<p>So this is how the brainstorming started…</p>
<p><img alt="" src="http://ift.tt/2puXkvc"></p>
<p>and we eventually ended up at these <strong>low-fidelity wireframes</strong>…</p>
<p><img alt="" src="http://ift.tt/2qR3E4L"></p>
<p>To make it easier to follow the steps of the user journey, this user flow tracks the entire process of using the new iheart app.</p>
<p><img alt="" src="http://ift.tt/2puXcvx"></p>
<p>The corresponding sitemap plans out the finalized screens to create.</p>
<p><img alt="" src="http://ift.tt/2qQHTlO"></p>
<h3>The New Design- high fidelity wireframes</h3>
<p>After all the researching, comparing, strategizing and drawing, these is the final product! We created something that we are proud of. To note some general offerings of the app, it…</p>
<ul>
<li>is available in portrait and landscape mode (the original app was in landscape only)</li>
<li>uses layman terms that is friendly, with less medical jargon</li>
<li>has bigger and bolder font to cater to older users</li>
<li>has clear instructions that guides users from start to finish</li>
</ul>
<h4>The Onboarding</h4>
<p>We made these to be personable and visually aesthetic to evoke the user motivations of feeling healthier and younger. It rouses images of youth and vitality through selected photos. Immediately the user learns…</p>
<ul>
<li>what iheart does</li>
<li>the science behind it</li>
<li>how to use it</li>
<li>why you should use it</li>
</ul>
<p><img alt="" src="http://ift.tt/2puUHcQ"></p>
<h4>Internal Age Testing</h4>
<p>One key user concern with the original app was the lack of clear instructions and guidance on how to properly test for accurate results. We solved this problem by adding a…</p>
<ul>
<li>2 minute sit-down suggestion prior to each test</li>
<li>30 second interactive count-down indicating the test process</li>
<li>overlay of latest results immediately after testing, with friendly message</li>
</ul>
<p><img alt="" src="http://ift.tt/2qQNxEc"></p>
<h4>User Progress</h4>
<p>After testing results, users are taken to the progress page that shows…</p>
<ul>
<li>baseline internal age data- by week, month, year</li>
<li>comparative result of your data to others in your age range</li>
<li>easy data visualization with clickable graph points</li>
<li>quantitative medical data is immediately accessible (as opposed to email results in the old app)</li>
<li>avatars that signify the user’s progress with iheart, they evolve as the users improve their internal age</li>
</ul>
<p><img alt="" src="http://ift.tt/2pv3AD7"></p>
<h4>Journal</h4>
<p>A notable offering of our new app is that it allows users to…</p>
<ul>
<li>regularly log data on their diet, exercise, mood</li>
<li>receive notifications around times of the day that are optimal for inputting aforementioned health info</li>
<li>visually see which dates they have or have not completed their journal info</li>
<li>see recommendations on how to improve internal age based on history of results</li>
</ul>
<p><img alt="" src="http://ift.tt/2qQF7wQ"></p>
<h3>Device and Case Redesign</h3>
<p>In addition to revamping the heart app, we went one step further to see how we could make the user experience even better. In collaboration with an industrial designer, Jasmine, she did two things. She…</p>
<ul>
<li>changed the material of the device to a matte-finish coat</li>
<li>created a new case that protects the iheart device and prevents users from accidentally pressing the on-button when not using the device</li>
</ul>
<p>These cases come in multiple colours to add an element of fun and personalization.</p>
<p><img alt="" src="http://ift.tt/2pv74Ft"><img alt="" src="http://ift.tt/2qRax6b"></p>
<h3>Future Considerations- What else could iheart do?</h3>
<p>Aside from the minimal viable product (MVP) that our team has produced for our client, we wanted to offer other strategies that iheart could implement in the future. Some recommendations include…</p>
<ul>
<li>syncing with other health apps (i.e. Apple Health, FitBit) for sleep, steps, and calories</li>
<li>connecting to social media platforms</li>
<li>creating challenges publicly and privately with other members, for further engagement</li>
</ul>
<h3>Overall Summary</h3>
<p>Our objective of this project was to create a mobile platform that current and new iheart users would want to use regularly. By addressing the user needs and merging with what top competitive products had to offer, we’ve produced an MVP that will serve current and new users of iheart. It’s been a rewarding experience to have a positive influence on people’s relationships with preventing age-related cardiac complications. I wish iheart users the best of luck with their individual health journeys!</p>
<p><img src="http://ift.tt/2pvfsov" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2qQMC6F">iheart — What is your internal age?</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


iheart — What is your internal age?

iheart — What is your internal age?

The client overview:

Top Stories