https://tophermacdonald.io Topher MacDonald UI UX Mon, 26 Apr 2021 23:35:02 +0000 https://tophermacdonald.io en https://tophermacdonald.io/Homepage Thu, 07 Jan 2021 23:49:32 +0000 Topher MacDonald UI UX https://tophermacdonald.io/Homepage 🌈️ Art Director &amp; 🔨️ Product Designer https://tophermacdonald.io/Mental-Health-Net-App Fri, 08 Jan 2021 00:17:10 +0000 Topher MacDonald UI UX https://tophermacdonald.io/Mental-Health-Net-App Case Study: An App that helps Therapists help their Clients <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/8d70fb49bbbf52ef94a9c5fd9dee738474c481f8ef6915d541febb7abde07bae/Case_Study_Hero.png" data-mid="97024995" border="0" src="https://freight.cargo.site/w/1000/i/8d70fb49bbbf52ef94a9c5fd9dee738474c481f8ef6915d541febb7abde07bae/Case_Study_Hero.png" /> The Problem:The coronavirus pandemic has brought on a mental health crisis which requires new tools and approaches to help both therapists and their clients to succeed. The Solution:A mobile app that improves communication between patient and client by leveraging therapist-designed exercises and articles to help patients take charge of their own mental health. My Role: - UX Research&nbsp; - User Research &amp; Interviewing - Ideating - Information Architecture and&nbsp;Wireframing&nbsp; - Brand Guidelines - Prototyping - Usability Testing - Interaction Design - Visual Design <img width="2000" height="843" width_o="2000" height_o="843" data-src="https://freight.cargo.site/t/original/i/fdd1fd81f27f1cd41c2bb4b772879f07d2e41cac3641733ce4eef381ec9dbdaf/Headlines.png" data-mid="94748511" border="0" src="https://freight.cargo.site/w/1000/i/fdd1fd81f27f1cd41c2bb4b772879f07d2e41cac3641733ce4eef381ec9dbdaf/Headlines.png" /> Research We experienced a mental health crisis in the wake of the coronavirus pandemic. Clients, unable to leave their homes to make their in-person therapy appointments, struggled to access counseling when they needed it the most. At the same time, therapists scrambled to meet the sudden demand for remote counseling. A glance at the headlines suggested the current patient/therapist system was not adequately meeting people’s needs in this new paradigm. We needed to create new tools to meet this challenge to provide mental health care to as many people as possible, as quickly as possible. Of the range of therapy styles in practice, there is a framework that may help to provide solutions. Rational Emotive Behavioral Therapy (REBT)This method of psychotherapy developed by Dr. Robert Ellis, teaches an efficient process which patients can use to diagram their own negative feelings with the help of a licenced practitioner. REBT is the original form of Cognitive Behavioral Therapy (CBT), which has been shown to improve outcomes in clients suffering from PTSD, anxiety disorders, somatoform disorders, bulimia and anger control problems, to name a few.Maslow’s Hierarchy of Needs We can also refer to an up-to-date model of this motivational theory, represented visually as a pyramid, to provide additional help to clients assess where their needs are not being met. <img width="560" height="315" width_o="560" height_o="315" data-src="https://freight.cargo.site/t/original/i/3ea8873d4dc2209f17fc6cf57a83714a9740d3120d2e4b53eb8879c51325b074/0_G2f9WBUoK3UZIpuo.png" data-mid="97548388" border="0" data-scale="59" src="https://freight.cargo.site/w/560/i/3ea8873d4dc2209f17fc6cf57a83714a9740d3120d2e4b53eb8879c51325b074/0_G2f9WBUoK3UZIpuo.png" /> We can leverage these methods to create an exercise that actively teaches clients how to identify their reactions to events (negative or positive), how to assess if they are an accurate depiction of reality and, if they are not accurate, how to overcome them. Primary ResearchOnce our secondary research shed light on a viable therapy framework for our product, we began to collect primary data to help guide our design process. We surveyed and interviewed potential users to understand the pain points of their therapy experiences. User Interviews A product that connects therapists to their clients has two distinct set of stakeholders, and, therefore, needs two distinct user experiences. We sent out screener surveys to fill two pools of user types based on this criteria: <img width="1422" height="468" width_o="1422" height_o="468" data-src="https://freight.cargo.site/t/original/i/f4eeb2bfeaeda3913ce5c4fd0b6d9374534d4ab672cb2ab5b73c98a871f98a8e/Screen-Shot-2021-01-27-at-3.25.59-PM.png" data-mid="96744389" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/f4eeb2bfeaeda3913ce5c4fd0b6d9374534d4ab672cb2ab5b73c98a871f98a8e/Screen-Shot-2021-01-27-at-3.25.59-PM.png" /> Each interview was conducted remotely using Zoom, Skype or Jitsi and lasted around 30 minutes each, though a few spread to over an hour - everyone has a lot to say about therapy, which is very exciting! Synthesizing the Data After the interviews were completed, we created an affinity map to begin processing all that we had learned about our users. At this stage we began to discover patterns, common connections, and misconceptions about therapy. <img width="2000" height="1206" width_o="2000" height_o="1206" data-src="https://freight.cargo.site/t/original/i/c048fb199628b84d61574cf39e94d0e30cd1662115974bc59788d229be71f936/Affinity_Map_Full.jpeg" data-mid="94749065" border="0" src="https://freight.cargo.site/w/1000/i/c048fb199628b84d61574cf39e94d0e30cd1662115974bc59788d229be71f936/Affinity_Map_Full.jpeg" /> We were then able to create empathy maps for our potential users, further defining the thoughts, feelings and actions of both sets of stakeholders. <img width="3000" height="3246" width_o="3000" height_o="3246" data-src="https://freight.cargo.site/t/original/i/76ec4455c750d26a601c15f7c7e30cb4009b979dda1477426319f27446b61563/MacDonald_EmpathMap_Patient.jpg" data-mid="94883681" border="0" data-scale="74" src="https://freight.cargo.site/w/1000/i/76ec4455c750d26a601c15f7c7e30cb4009b979dda1477426319f27446b61563/MacDonald_EmpathMap_Patient.jpg" /> Empathy Map: Client <img width="3000" height="3246" width_o="3000" height_o="3246" data-src="https://freight.cargo.site/t/original/i/65abcc71e3f315978032d65d27e63332c49d57905530aff6b3a9f5b4783da129/MacDonald_EmpathMap_Therapist.jpg" data-mid="94883683" border="0" data-scale="74" src="https://freight.cargo.site/w/1000/i/65abcc71e3f315978032d65d27e63332c49d57905530aff6b3a9f5b4783da129/MacDonald_EmpathMap_Therapist.jpg" /> Empathy Map: Therapist User Personas The empathy maps eventually boiled down to two user personas. The first of which is the Client persona. This is a user who is not currently in therapy, but has been in the past. They are interested in starting therapy again, but have developed a laundry list of pain points from their experiences. They think the process of finding a therapist is always stressful because they feel they have to find the ‘right’ one, or else it’s a waste of time. In past therapy experiences, they have received feedback, but were unable to implement it successfully. They value empirical feedback and believe therapy could help them get on a more positive path, but they just haven’t found the ‘magic moment’ in therapy that they’re looking for. <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/166085a4b8950d7e66a26fbf0ef6028033f040f183457e3a71226ffae3a4315f/Client_UserPersona.jpg" data-mid="94884092" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/166085a4b8950d7e66a26fbf0ef6028033f040f183457e3a71226ffae3a4315f/Client_UserPersona.jpg" /> &nbsp; &nbsp; User Persona: Client We also have the Therapist user persona. They have a range of therapy styles at their disposal, though they primarily using Cognitive Behavioral Therapy (CBT) &amp; REBT in sessions. They have some pain points regarding the behind the scenes aspects of therapy (such as paperwork and dealing with no-shows), but their primary concern is with doing what is best for the client. They want the patient to feel as if they are on the same team as the therapist. They want the client to learn how to self-regulate their emotions, and to take part in their own success. <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/8a020be2d52a2ccaef118cd9ff3ea5eedba846203bad8d29e5f39140fa237126/Therapist_UserPersona.jpg" data-mid="94884091" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/8a020be2d52a2ccaef118cd9ff3ea5eedba846203bad8d29e5f39140fa237126/Therapist_UserPersona.jpg" /> &nbsp; &nbsp; User Persona: Therapist Restating the Problem After synthesizing our research we are able to reframe and restate the problem our product should solve in the form of a ‘how might we’ statement. We went through a few iterations:How might we facilitate the exchange of feedback between patient and therapist? How might we streamline the therapist’s time gathering materials for their patients? How might we make remote therapy sessions more personal and supportive for patients? These statements would individually solve some of the pain points we discovered from our research. Zooming out even further, though, a possible solution might readily reveal itself if we ask that question a bit differently. <img width="1688" height="940" width_o="1688" height_o="940" data-src="https://freight.cargo.site/t/original/i/ca20ed175f6938efa74ef75db678cc8b4b6ab57943d3fe0cf50b4e625290778f/Screen-Shot-2021-01-12-at-5.38.11-PM.png" data-mid="94886236" border="0" data-scale="74" src="https://freight.cargo.site/w/1000/i/ca20ed175f6938efa74ef75db678cc8b4b6ab57943d3fe0cf50b4e625290778f/Screen-Shot-2021-01-12-at-5.38.11-PM.png" /> A common assumption we saw in our research is that those seeking therapy are overly-focused on the therapist being the “right” therapist, or that therapy is easier in person, and that therapy is for LIFE. But what if you don’t have access to therapy? What if another pandemic hits and we go back into quarantine? What if we never find the “right therapist” in person, remotely or otherwise? Is there a way to teach people to process their own negative feelings and engineer their own, more positive outcomes, in the midst of ANY situation they face?To be clear, we are not advocating that anyone and everyone can or should become a licenced therapist! However, if a framework exists to help people address their own distortions, and this framework can be taught, the priority is to give this framework to whomever needs it. Restating the SolutionWe focused on creating a mobile app that better facilitates interactions between therapists and their clients while helping clients learn the REBT framework to buttress their own mental health efforts. In our research, we also discovered the therapy app space is a crowded one - a quick search on your app store of choice could yield 30 or more products. To further understand how our app might stand out from the rest, we conducted a heuristic analysis of our competitors. <img width="928" height="538" width_o="928" height_o="538" data-src="https://freight.cargo.site/t/original/i/75ff1607c49f27c1dcaea6e2eb164fa6a771feaafa1884986bdee3a1ef92804e/Screen-Shot-2021-01-27-at-4.13.16-PM.png" data-mid="96748115" border="0" data-scale="49" src="https://freight.cargo.site/w/928/i/75ff1607c49f27c1dcaea6e2eb164fa6a771feaafa1884986bdee3a1ef92804e/Screen-Shot-2021-01-27-at-4.13.16-PM.png" /> Seeing other apps struggle in the areas of consistency and aesthetic design, we were encouraged to focus on these areas as we designed our product. <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/1ba6fa72119c55d7b07e59ecc7622ca06a2ac05606783846395ebca600330505/Information_Architecture_Hero.png" data-mid="96873048" border="0" src="https://freight.cargo.site/w/1000/i/1ba6fa72119c55d7b07e59ecc7622ca06a2ac05606783846395ebca600330505/Information_Architecture_Hero.png" /> Information ArchitectureWith research to support our approach and a long list of pain points to address, we set out to define exactly how a useful app should function as a solution. We created a series of user stories, a list of features that our app should include in order to foster desired outcomes for our users. We narrowed that list down to the features that would make up our MVP, or Minimum Viable Product. Knowing these necessary features allowed us to create a Sitemap to establish the geography of our product, and helped us establish our Red Route user flows for both Client and Therapist experiences- the routes of critical tasks in an app that deliver the most value. <img width="1854" height="1318" width_o="1854" height_o="1318" data-src="https://freight.cargo.site/t/original/i/b8a8aa678b0e5fb738c09dd0055ceaa0a1019071fdfa690455a5b457e4043d47/Therapy_App_RedRoute_UserFlows.jpg" data-mid="95465673" border="0" src="https://freight.cargo.site/w/1000/i/b8a8aa678b0e5fb738c09dd0055ceaa0a1019071fdfa690455a5b457e4043d47/Therapy_App_RedRoute_UserFlows.jpg" />Red Route User Flows <img width="940" height="755" width_o="940" height_o="755" data-src="https://freight.cargo.site/t/original/i/dc83900156f46286f95dbc7a87f2e079c915382d5db71c571ed40e4abe621718/12.3_MacDonald_Capstone_Project_Sitemap.png" data-mid="95465738" border="0" data-scale="89" src="https://freight.cargo.site/w/940/i/dc83900156f46286f95dbc7a87f2e079c915382d5db71c571ed40e4abe621718/12.3_MacDonald_Capstone_Project_Sitemap.png" />Sitemap Sketching With our red routes established we began to sketch out our ideas for how each step in the flow could work for the user. The most important feature for both user experiences would be the Exercise Entry that a client could complete in the app, share with their therapist, who can then review it on their end. For the client, this exercise is designed to reinforce what the therapist practices with their clients in session, and is the cornerstone of the product. <img width="3000" height="1941" width_o="3000" height_o="1941" data-src="https://freight.cargo.site/t/original/i/7a3ac89a010e5d15b69acd84e79b5a166deb24886fab31dfe1a26e9bd95a8563/Redroute_Sketches_Therapist_1.png" data-mid="225423520" border="0" src="https://freight.cargo.site/w/1000/i/7a3ac89a010e5d15b69acd84e79b5a166deb24886fab31dfe1a26e9bd95a8563/Redroute_Sketches_Therapist_1.png" /> <img width="3000" height="1941" width_o="3000" height_o="1941" data-src="https://freight.cargo.site/t/original/i/7a729351d446db4ddf3a52aee94ae3e255613d4a74d34675979a6a292d415aa2/Redroute_Sketches_Patient_1_.png" data-mid="225423372" border="0" src="https://freight.cargo.site/w/1000/i/7a729351d446db4ddf3a52aee94ae3e255613d4a74d34675979a6a292d415aa2/Redroute_Sketches_Patient_1_.png" /> <img width="3000" height="1941" width_o="3000" height_o="1941" data-src="https://freight.cargo.site/t/original/i/7d88d8762cf94767219f83994889095ca8a17a1f1e0954c9077bb42e289848a7/Redroute_Sketches_Therapist_2_.png" data-mid="225423375" border="0" src="https://freight.cargo.site/w/1000/i/7d88d8762cf94767219f83994889095ca8a17a1f1e0954c9077bb42e289848a7/Redroute_Sketches_Therapist_2_.png" /> <img width="3000" height="1941" width_o="3000" height_o="1941" data-src="https://freight.cargo.site/t/original/i/2c544ec787363adee590136e0f7e539b77204ce5a7ff21d385b7d8370892dcb8/Redroute_Sketches_Patient_2.png" data-mid="225423519" border="0" src="https://freight.cargo.site/w/1000/i/2c544ec787363adee590136e0f7e539b77204ce5a7ff21d385b7d8370892dcb8/Redroute_Sketches_Patient_2.png" /> In addition to enabling the therapist to easily review their client’s exercises, we wanted to make sure their interface was clear and uncluttered and serviced the day-to-day practice of seeing and advising clients. Guerilla Usability Testing We created a simple interactive prototype using our red route sketches which we used to conduct remote usability tests to see where functionality improvements could be made. We asked users in both pools to complete our most critical tasks using the prototype as if it were an actual product. Users generally found the prototype to be appealing in its function and easy to understand. All users were able to recognize navigation patterns (back buttons, x buttons to close out) and could move throughout the app easily. <img width="500" height="852" width_o="500" height_o="852" data-src="https://freight.cargo.site/t/original/i/82416f8148c605f0829927b042501fa043234a1ac40ad6b63f154fe6ae339069/MHN_Screens_Prototype_3.png" data-mid="225267858" border="0" data-scale="57" src="https://freight.cargo.site/w/500/i/82416f8148c605f0829927b042501fa043234a1ac40ad6b63f154fe6ae339069/MHN_Screens_Prototype_3.png" /> However, these tests revealed some critical issues with our prototype. A key example being with the Therapist red route - “assign a client a piece of content to read”. Initially, every user was confused by how to complete this task, not knowing where to go or what to do when they got there.<img width="1436" height="804" width_o="1436" height_o="804" data-src="https://freight.cargo.site/t/original/i/0f2d8da90c403b3e761655d08a312393be880d21e7c700b31f25b3e44237367a/Screen-Shot-2021-01-28-at-1.45.43-PM.png" data-mid="96892279" border="0" src="https://freight.cargo.site/w/1000/i/0f2d8da90c403b3e761655d08a312393be880d21e7c700b31f25b3e44237367a/Screen-Shot-2021-01-28-at-1.45.43-PM.png" />Fortunately, this is what prototype testing is for! We were delighted to discover this issue (along with many others) that would be addressed during the next design phase. Wireframing &amp; WireflowsTaking what we learned in our guerilla usability tests of our sketch prototype, we set to work on our wireframes, which gave us an opportunity to restructure some key experiences in our product while laying a stronger framework for our visual design. We reimagined what our most problematic red route could look like, adding in clearer prompts and a simpler interface to complete the task.&nbsp; <img width="1466" height="762" width_o="1466" height_o="762" data-src="https://freight.cargo.site/t/original/i/b4a3189f94c6f60631322639890e493de992a626f9a95d9254c2c567e16a0e30/Screen-Shot-2021-01-28-at-3.36.21-PM.png" data-mid="96901340" border="0" src="https://freight.cargo.site/w/1000/i/b4a3189f94c6f60631322639890e493de992a626f9a95d9254c2c567e16a0e30/Screen-Shot-2021-01-28-at-3.36.21-PM.png" /> In another instance, we decided that the experience needed to be much more fleshed out for the user. For the client exercise, our sketch showed the entire process on the same screen. For the wireframe phase, we split the exercise up into sections, added screens, and included additional functions to add delight to the experience. <img width="1676" height="948" width_o="1676" height_o="948" data-src="https://freight.cargo.site/t/original/i/97f11e1bea2254a7de938ddabd2a81a189c4e6a8212bd48c19b3df79cec82a07/Screen-Shot-2021-01-17-at-10.58.10-PM.png" data-mid="95472132" border="0" src="https://freight.cargo.site/w/1000/i/97f11e1bea2254a7de938ddabd2a81a189c4e6a8212bd48c19b3df79cec82a07/Screen-Shot-2021-01-17-at-10.58.10-PM.png" /> Edge Cases It was important for us to anticipate every snag a user could possibly encounter when completing a task in our product. For example, what if a user’s name took up more than 2 lines? Or what if the user scrolls past a key button without acting? We did an edge case review and subsequent iteration of our wireframes to ensure our user experience could hold up in an unusual scenario. <img width="2034" height="1086" width_o="2034" height_o="1086" data-src="https://freight.cargo.site/t/original/i/ebc93ef01569d836413d6b3bfe078e99fb5c088c38dfde663ad9318addfe3b68/Screen-Shot-2021-01-28-at-3.56.48-PM.png" data-mid="96903245" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/ebc93ef01569d836413d6b3bfe078e99fb5c088c38dfde663ad9318addfe3b68/Screen-Shot-2021-01-28-at-3.56.48-PM.png" /> By this point in the design process we were feeling confident we had the bones of a product that could effectively help people during a mental health crisis. Next, we set our sights on creating a compelling brand that would shepherd our users through the therapy process. <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/11da374a3cd8b4930ca81e4fdfa79b17fc64f6f189dcea1ba6010be45ab2ccf6/Style_Guide_Hero.png" data-mid="96904217" border="0" src="https://freight.cargo.site/w/1000/i/11da374a3cd8b4930ca81e4fdfa79b17fc64f6f189dcea1ba6010be45ab2ccf6/Style_Guide_Hero.png" /> Brand &amp; Style GuideAs we moved closer towards working on the high-fidelity design of our product, we knew we needed to create a strong visual brand experience that felt tactile, vibrant, courageous, fun and loose - something that mirrored a bit of what we’d like to think the experience of therapy can be like. <img width="1660" height="806" width_o="1660" height_o="806" data-src="https://freight.cargo.site/t/original/i/00953c97967cdb0a222b30fd3a463d6af07d91a6ccec86c3bdf9dc57e1f1de08/Screen-Shot-2021-01-18-at-2.25.37-PM.png" data-mid="95576653" border="0" src="https://freight.cargo.site/w/1000/i/00953c97967cdb0a222b30fd3a463d6af07d91a6ccec86c3bdf9dc57e1f1de08/Screen-Shot-2021-01-18-at-2.25.37-PM.png" /> &nbsp; At top of mind was this quote by the french expressionist artist Henri Matisse, whose work and philosophy were of great inspiration at this stage.We wanted our branding and visual design to reflect the excitement and optimism that comes from complete self-acceptance. The therapy process can feel challenging and maybe even a bit messy - and that’s ok! We found it helpful to further define the most important parts of what we wanted to accomplish using our Brand Platform. Our Mission Teach clients to be active in their own mental health, learning to become their own therapists. Our Personality Therapy can be uncomfortable and enlightening, difficult and rewarding, direct and kind, full of ups and downs, but the process should always be hopeful and validating and lead to self-acceptance. Our Attributes Trustworthy, friendly, hopeful, honest, engaging, thoughtful Style Guide We created several moodboards using work our studio had produced alongside other images we were inspired by. Eventually, we settled on a collage-influenced, hand-made style, and minimizing use of photography, visually showing that the therapy process can be messy and beautiful and rewarding all at the same time. <img width="1191" height="674" width_o="1191" height_o="674" data-src="https://freight.cargo.site/t/original/i/c3d12cc7ad52a933648de30421a0937e87cc6d83a9f6e731766c6d9f3d8971c3/Brand-Imagery-Copy-2.png" data-mid="95576911" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/c3d12cc7ad52a933648de30421a0937e87cc6d83a9f6e731766c6d9f3d8971c3/Brand-Imagery-Copy-2.png" /> Logo We chose to incorporate a few key images from our therapy practice into a one-lined, simple logotype. The Triangle - symbolizing Mazlow’s Hierarchy of Needs The Puzzle Piece - to speak to (and gamify) the goal of solving the problem of your own distortions The Heart - because duh! <img width="1191" height="476" width_o="1191" height_o="476" data-src="https://freight.cargo.site/t/original/i/ea6cb31d0d383ee8db14339d83a2828334bec75cf6dfb344bdecb8ce1c0716ab/Logo-Specs-A3-Copy.png" data-mid="95582900" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/ea6cb31d0d383ee8db14339d83a2828334bec75cf6dfb344bdecb8ce1c0716ab/Logo-Specs-A3-Copy.png" /> Brand Colors Since there are two distinct user groups, each has its own primary color experience - clients see a warm, energizing coral, while Therapists see a cool, medicinal teal. Both experiences utilize the same secondary and gray palettes. <img width="1191" height="842" width_o="1191" height_o="842" data-src="https://freight.cargo.site/t/original/i/8976ad2c256b4e8ede67178fed735d98a1e4891f46f739b28bd1ee07dcad8103/Brand-Colors.png" data-mid="95583890" border="0" src="https://freight.cargo.site/w/1000/i/8976ad2c256b4e8ede67178fed735d98a1e4891f46f739b28bd1ee07dcad8103/Brand-Colors.png" /> Typeface We chose Poppins to be our primary typeface across product and branding because it lent a distinctly clean and modern anchor to our otherwise textured and painterly branding. <img width="1191" height="842" width_o="1191" height_o="842" data-src="https://freight.cargo.site/t/original/i/dca50fbc36f6de15f07d8f361dd612e4e96f42774c44620e438d2d5da6987c06/Primary-Typeface.png" data-mid="95585054" border="0" src="https://freight.cargo.site/w/1000/i/dca50fbc36f6de15f07d8f361dd612e4e96f42774c44620e438d2d5da6987c06/Primary-Typeface.png" /> <img width="1000" height="546" width_o="1000" height_o="546" data-src="https://freight.cargo.site/t/original/i/f7a6b5e1bf4a879a08a7fbe993ad40d1a0bc1cee33556b5d3c0f41facc09ec53/Article_Illustration_1.png" data-mid="95585999" border="0" src="https://freight.cargo.site/w/1000/i/f7a6b5e1bf4a879a08a7fbe993ad40d1a0bc1cee33556b5d3c0f41facc09ec53/Article_Illustration_1.png" /> <img width="1000" height="546" width_o="1000" height_o="546" data-src="https://freight.cargo.site/t/original/i/bbc4fba232059b1edcb3582301f91f76f7de9b29cf544d1ad627b5edfe937382/Article_Illustration_3.png" data-mid="95585997" border="0" src="https://freight.cargo.site/w/1000/i/bbc4fba232059b1edcb3582301f91f76f7de9b29cf544d1ad627b5edfe937382/Article_Illustration_3.png" /> <img width="1000" height="546" width_o="1000" height_o="546" data-src="https://freight.cargo.site/t/original/i/fc37e695eef20ad1c5aa9de4633b59aeec305be52ae8863f8606bb1d4a6afc46/Article_Illustration_4.png" data-mid="95585996" border="0" src="https://freight.cargo.site/w/1000/i/fc37e695eef20ad1c5aa9de4633b59aeec305be52ae8863f8606bb1d4a6afc46/Article_Illustration_4.png" /> <img width="1000" height="546" width_o="1000" height_o="546" data-src="https://freight.cargo.site/t/original/i/110d8fe4500160cbcc121958efbdb314ac3075603c0b2d8d7d980c467408ef2b/Article_Illustration_2.png" data-mid="95585998" border="0" src="https://freight.cargo.site/w/1000/i/110d8fe4500160cbcc121958efbdb314ac3075603c0b2d8d7d980c467408ef2b/Article_Illustration_2.png" /> Illustration Using a textured and rough approach to our imagery contributed to our user’s sense of adventure, accomplishment and support while using the product. We focused on developing a small library of textured shapes that could be collaged together with loosely drawn characters to create landscapes and narratives in support of our article content and UI. <img width="1191" height="842" width_o="1191" height_o="842" data-src="https://freight.cargo.site/t/original/i/83a84a6dfe1e68f11623f9d98425e944c28683aecd148bce616a79950ce0d6cd/UI-Elements---Cards--Chips--Dropdowns.png" data-mid="95585207" border="0" src="https://freight.cargo.site/w/1000/i/83a84a6dfe1e68f11623f9d98425e944c28683aecd148bce616a79950ce0d6cd/UI-Elements---Cards--Chips--Dropdowns.png" /> <img width="1191" height="842" width_o="1191" height_o="842" data-src="https://freight.cargo.site/t/original/i/5bec49fc130e2b12a875beefc933fc6721f38da40f8391a03774eef16423106f/UI-Elements---Buttons.png" data-mid="95585208" border="0" src="https://freight.cargo.site/w/1000/i/5bec49fc130e2b12a875beefc933fc6721f38da40f8391a03774eef16423106f/UI-Elements---Buttons.png" /> UI Elements Our UI elements needed to be a mid-point between the rational typeface and our off-the-wall illustration. The shapes are recognizable and functional while remaining bright and fun to interact with. &nbsp; &nbsp; <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/b402a4588ee91874d5fe44a9f6b55bfa89b81031688e2d690e4d864bef202145/Visual_Design_Hero.png" data-mid="97012696" border="0" src="https://freight.cargo.site/w/1000/i/b402a4588ee91874d5fe44a9f6b55bfa89b81031688e2d690e4d864bef202145/Visual_Design_Hero.png" /> Visual Design Putting together the final screens felt a bit like a victory lap; our research solidly defined our problem and our approach to a solution, we put a lot of thought and time into crafting our information architecture to best solve our problem, we felt confident about our branding approach, and now we got to put all the pieces together and test. High-Fidelity Prototype We took great care implementing our branding into a first pass of high-fidelity designs and were perhaps overly cautious at first, ensuring the content and architecture were legible and clean. <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/968eb20726a8b4ead545f84c286a2eb924290cc5f97d79ad85a33925cd7789df/Patient-Home-Copy-3.png" data-mid="97019427" border="0" data-scale="54" src="https://freight.cargo.site/w/375/i/968eb20726a8b4ead545f84c286a2eb924290cc5f97d79ad85a33925cd7789df/Patient-Home-Copy-3.png" /> <img width="375" height="706" width_o="375" height_o="706" data-src="https://freight.cargo.site/t/original/i/0d5ee82bd0739c90b39633106de39c32bb9d4ae49b9e1d822ee0a91044415819/Therapist-Articles-Copy.png" data-mid="97019426" border="0" data-scale="49" src="https://freight.cargo.site/w/375/i/0d5ee82bd0739c90b39633106de39c32bb9d4ae49b9e1d822ee0a91044415819/Therapist-Articles-Copy.png" /> <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/061309e9ec1ae58345e03341e1c4993631be976021e7238b92d51da250b987f9/Journal-Q1-Copy-2.png" data-mid="97019428" border="0" data-scale="54" src="https://freight.cargo.site/w/375/i/061309e9ec1ae58345e03341e1c4993631be976021e7238b92d51da250b987f9/Journal-Q1-Copy-2.png" /> As we went through the design process we took note of little opportunities to add delight to the experience. Certain UI elements we thought could benefit from a little bit more of that fun illustration style. Our icons felt a bit too serious. Some of the color choices were counter intuitive to their use-case. In other instances we found that our style guide needed to be adjusted to ensure our product was as easy to use as possible. For example, when we conducted an accessibility audit of our designs, we found our primary coral and turquoise colors were too light to read white text on top of, and did not meet the standards as defined by WCAG (Web Content Accessibility Guidelines). This was a small but critical fix that would scale the entirety of our product. In the future we will consider these accessibility guidelines earlier in the design process. Fortunately we had built in time to complete several iterations of our design, and we were able to quickly address these issues! Usabilty TestingIn order to ensure we were still on the right track with the updates we made to our information architecture, we conducted 2 rounds of 5 remote moderated usability tests using video chat apps like Zoom, Skype and Jitsi. Participants in this study had prior knowledge of this project, and either had some experience as a client receiving therapy OR have some experience as a practicing therapist seeing clients. Each session was approximately 20-30 minutes long. We asked participants to complete tasks as if they were a “Therapist” user and a “Client” user, indicating which experience or “mode” they were in before detailing the tasks to them. In between these two rounds, we did one design iteration using the feedback from the first round. The objectives of these tests were to: Gather impressions of general branding related to project mission Uncover usability issues in red routes Compare and contrast behaviors of Client users to Therapist users We compiled a list of all notable issues to solve and ordered them by priority, ensuring that our final round of design iteration would be impactful to the product. <img width="1002" height="944" width_o="1002" height_o="944" data-src="https://freight.cargo.site/t/original/i/39595d5d343879729d4ec684adf67a6fe7ba7b94a670bfca192fffa6b36030ef/Screen-Shot-2021-01-21-at-4.47.49-PM.png" data-mid="96013445" border="0" data-scale="72" src="https://freight.cargo.site/w/1000/i/39595d5d343879729d4ec684adf67a6fe7ba7b94a670bfca192fffa6b36030ef/Screen-Shot-2021-01-21-at-4.47.49-PM.png" /> Final Iteration As we got closer to the final designs of our product, we were able to refine the experiences and be a bit bolder with our imagery. We addressed the list of improvements we made from the first interaction, along with the pain points from our rounds of usability testing. These included type size, adjusting our treatment of notifications, adding in clearer prompts to complete tasks, and unclear nomenclature using extensive insight from practicing therapists. We are really excited about the result! <img width="744" height="1268" width_o="744" height_o="1268" data-src="https://freight.cargo.site/t/original/i/261be7923dddf7ef9545199976aac455426157722ef3707ce7870789ee94a4e8/MHN_Screens_Final_1.png" data-mid="225266409" border="0" data-scale="87" src="https://freight.cargo.site/w/744/i/261be7923dddf7ef9545199976aac455426157722ef3707ce7870789ee94a4e8/MHN_Screens_Final_1.png" /> <img width="744" height="1268" width_o="744" height_o="1268" data-src="https://freight.cargo.site/t/original/i/009cff3140764747b9a176075d5008d4e5e9bc44788f187dd8ec5fca3c190c8e/MHN_Screens_Final_2.png" data-mid="225266410" border="0" data-scale="87" src="https://freight.cargo.site/w/744/i/009cff3140764747b9a176075d5008d4e5e9bc44788f187dd8ec5fca3c190c8e/MHN_Screens_Final_2.png" /> <img width="744" height="1268" width_o="744" height_o="1268" data-src="https://freight.cargo.site/t/original/i/a3edde164977c064576f49de7c9afe97b525c731289282a0ad2972846bb06025/MHN_Screens_Final_3.png" data-mid="225266411" border="0" data-scale="87" src="https://freight.cargo.site/w/744/i/a3edde164977c064576f49de7c9afe97b525c731289282a0ad2972846bb06025/MHN_Screens_Final_3.png" /> Reflection &amp; Next Steps We are excited to take next steps in developing this app to be used in conjunction with our therapy clinic, and have high hopes it will help clients and therapists do the work that is so crucial for us to be doing amidst a mental health crisis. https://tophermacdonald.io/Sounds-of-Earth Mon, 26 Apr 2021 23:34:59 +0000 Topher MacDonald UI UX https://tophermacdonald.io/Sounds-of-Earth Case Study: Boosting Checkout for a Record Player Store <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/0a93dff494e5b912a37da709325b7c953c0a74b82e7b8c7204db37039869a61d/SoundsofEarth_Case_Study_Hero.png" data-mid="106669821" border="0" src="https://freight.cargo.site/w/1000/i/0a93dff494e5b912a37da709325b7c953c0a74b82e7b8c7204db37039869a61d/SoundsofEarth_Case_Study_Hero.png" /> The Problem:Sounds of Earth, a medium-sized record player store, uses both desktop and mobile-web experiences to sell online. However, they are struggling to ensure customer conversion. Several key metrics indicate that poor site usability may be preventing the company from achieving its sales goals. The Solution:I spearheaded a 2 week mobile-first design effort to bring the web store up to best practice standards, while also introducing several features designed to boost company key performance indicators. My Role:UX Research Information Architecture and WireframingPrototypingUsability TestingInteraction DesignBrandingVisual Design <img width="2350" height="864" width_o="2350" height_o="864" data-src="https://freight.cargo.site/t/original/i/aef2007ad620668e20759a6f353f335e274e3601c20e165545a64c35a816ec2c/Research_Hero.png" data-mid="106534687" border="0" src="https://freight.cargo.site/w/1000/i/aef2007ad620668e20759a6f353f335e274e3601c20e165545a64c35a816ec2c/Research_Hero.png" /> Research Early on, I had visibility into the site’s main performance issues. The project manager had shared data that shows 50% of users opened on average 7 item pages and then abandoned the site without moving any items into the cart. The project manager’s hypothesis was that users are unable to determine which product is best for them based on relative features. Additionally, 70% of users who placed an item in the cart did not purchase. Data shows that customers abandon the cart at the registration page, where they had no choice but to create an account to complete checkout. With these insights in mind, I conducted further research to start ideating possible solutions. My research surfaced several key elements that could be readily implemented to increase Add-to-Cart, such as cross selling other products on the Product Detail Page, incorporating Reviews and eliminating use of dark patterns which lead to surprise fees (often relating to shipping costs). Minimizing the number of screens a user goes through when adding a product to the cart could make for an easier (and more successful) shopping experience. Enabling customers to purchase as a Guest is a common best practice and should be the first step to reduce Cart Abandonment. Increasing the number of pay options to include products like PayPal and Venmo also makes it easier for the customer to convert. Also, adding progress indicators to the checkout experience might help the experience feel easier and quicker. With these best practice concepts at top of mind, I then analyzed 3 outstanding competitors in the record player ecommerce space. The goal of this research was to ideate ways in which we could deliver an excellent experience for our customers they wouldn’t be able to get anywhere else. I discovered that we needed to maintain a clear and clean aesthetic that reflects the uniqueness of the brand and product, while still orienting the user through a simple Add to Cart and Checkout process. Other companies struggle slightly with consistency and standards, these issues may be resolved more readily with our product, since we are selling a narrower category than these competitors. To gather direct user feedback I sent out screener surveys asking potential users about their shopping habits and expectations for buying record players online - here are some key takeaways: <img width="1208" height="550" width_o="1208" height_o="550" data-src="https://freight.cargo.site/t/original/i/b8791ba786828cddcd7141d1d220a69505d24e06802e144b1c49664c137aea6e/Shop_For_Electronics_Survey.png" data-mid="106666567" border="0" src="https://freight.cargo.site/w/1000/i/b8791ba786828cddcd7141d1d220a69505d24e06802e144b1c49664c137aea6e/Shop_For_Electronics_Survey.png" /> 50% of respondents said they would prefer to check out as a guest when shopping for electronics online, further establishing that this option could be holding users back from completing a checkout. <img width="1311" height="602" width_o="1311" height_o="602" data-src="https://freight.cargo.site/t/original/i/087f3deb474dd08584b765b2ad73f221a69f7e9567fefc877622291617c5d75a/Which_Features_Survey.png" data-mid="106666569" border="0" src="https://freight.cargo.site/w/1000/i/087f3deb474dd08584b765b2ad73f221a69f7e9567fefc877622291617c5d75a/Which_Features_Survey.png" /> Bluetooth was a key feature respondents would look for when shopping for a record player - indicating this and other high-ranking features prominently on PDP could boost Add to Cart. <img width="1266" height="590" width_o="1266" height_o="590" data-src="https://freight.cargo.site/t/original/i/d4ac6f9a27b442145bae6202b075eaf9a9158dd8e61eeca6f18b480bbdcfa5f0/Which_Devices_Survey.png" data-mid="106666568" border="0" src="https://freight.cargo.site/w/1000/i/d4ac6f9a27b442145bae6202b075eaf9a9158dd8e61eeca6f18b480bbdcfa5f0/Which_Devices_Survey.png" /> 90% of respondents use a smartphone or tablet to listen to music, making bluetooth connectivity all the more desirable to customers.Using insights both provided by the brief and by primary research, I was able to generate our problem statements: How might we improve Add-to-cart metrics?How might we decrease Cart Abandonment / improve Conversion?How might we incorporate a Guest Checkout to reduce Checkout Abandonment?I could use these main problems to map a journey to a possible solution. Information ArchitectureAfter researching and understanding the problem I began to design an experience that could deliver on the key performance indicators that mattered most to the business. The next step was to design a simple user flow that mapped to those priorities: <img width="3944" height="2130" width_o="3944" height_o="2130" data-src="https://freight.cargo.site/t/original/i/074aa631ad3ddf80f7aa23f07aa8e542ed3fb998e848d4a676f7cf10cefb746d/Capstone-2-User-Flows.png" data-mid="225268360" border="0" src="https://freight.cargo.site/w/1000/i/074aa631ad3ddf80f7aa23f07aa8e542ed3fb998e848d4a676f7cf10cefb746d/Capstone-2-User-Flows.png" /> Once this basic flow was established, I created low fidelity wireframes for each of the flow’s screens. The client had provided a few simple wireframes of their desktop experience ideating some possible solutions. However, my research indicated that over 50% of online shopping is now done using a mobile device. With this in mind, I decided it would be efficient to design this flow using a mobile-first approach. If the new experience could be validated on a mobile device, it could readily be scaled to the desktop experience. <img width="3472" height="4083" width_o="3472" height_o="4083" data-src="https://freight.cargo.site/t/original/i/00ab16645a14ffb4586b8b59cdd55af6813ec4505eda34282ff865212810857b/Capstone-2-Wireframes-Preso.png" data-mid="225268373" border="0" src="https://freight.cargo.site/w/1000/i/00ab16645a14ffb4586b8b59cdd55af6813ec4505eda34282ff865212810857b/Capstone-2-Wireframes-Preso.png" /> My research lead to the addition of several features and updates to these new wireframes: Added reviews to PDPAdded carousel showing multiple product photos on same pageHomepage shows cross sells of product categories above foldAdded collapsible drawers for Product Specs, Shipping, Return PolicyUser confirms add to cart with dismissable modal that offers quick road to checkoutAdded distinct Guest Checkout option to flow along-side usual ‘Sign-in’ or ‘Sign-up’ optionsAdded PayPal as a payment option in checkoutI was then able to compile these wireframes into an InVision prototype and test my solutions with real people! I conducted 5 remote moderated usability tests using video chat apps like Zoom, Skype and Jitsi with the following goals in mind: Implement and test ecommerce best practicesTest ideas for solutions that could improve Add to cartImplement and test Guest Checkout flow Once the usability tests were completed, I generated a list of the most common problems users identified with the prototype. <img width="1474" height="926" width_o="1474" height_o="926" data-src="https://freight.cargo.site/t/original/i/d26501d444e9ce1e4306193a4213fed2c08b0c92957e471a12ffa5b2cd3e53df/Usability_Issues_Capstone_2.png" data-mid="106667435" border="0" src="https://freight.cargo.site/w/1000/i/d26501d444e9ce1e4306193a4213fed2c08b0c92957e471a12ffa5b2cd3e53df/Usability_Issues_Capstone_2.png" /> Visual Design I attempted to solve the issues revealed in the Wireframe usability tests moving into the High Fidelity prototype. <img width="3472" height="5523" width_o="3472" height_o="5523" data-src="https://freight.cargo.site/t/original/i/cc82bbc1bfc7479546d5c62ee7be090867d27b113918f1eb96614f18fc7dde1b/Capstone-2-High-Fidelity-Preso-R1.png" data-mid="225268309" border="0" src="https://freight.cargo.site/w/1000/i/cc82bbc1bfc7479546d5c62ee7be090867d27b113918f1eb96614f18fc7dde1b/Capstone-2-High-Fidelity-Preso-R1.png" /> Once the High Fidelity Prototype was completed, I completed another round of user tests with new subjects. These tests showed the issues raised in the wireframes had been addressed successfully. These tests also built a stronger case for more features that helped users decide between similar-looking products, such as a Compare feature, and led to a rethink of the shopping process. <img width="4000" height="4992" width_o="4000" height_o="4992" data-src="https://freight.cargo.site/t/original/i/8e97660d14f3402808635c45682d87498087c0c857595f4cece9803fe69a66e1/Capstone-2-High-Fidelity-Preso-R2.png" data-mid="225268337" border="0" src="https://freight.cargo.site/w/1000/i/8e97660d14f3402808635c45682d87498087c0c857595f4cece9803fe69a66e1/Capstone-2-High-Fidelity-Preso-R2.png" /> In addition to adding the Compare feature, I used this opportunity to tighten up the overall experience: Implemented a more refined branding and further unified the component libraryIn Checkout, I updated the nav to limit icons to just the shopping cartClarified Guest path when selected in Checkout flowAdded prompts to return to site from Receipt pageOn the Product Description Page, I revealed the Reviews section, made product description a bullet point list <img width="2152" height="1931" width_o="2152" height_o="1931" data-src="https://freight.cargo.site/t/original/i/7f759f7c8b9e0281e024f9f81bff7f330d7b4e14afda8b6763bf83b247b4aefb/Artboard.png" data-mid="106668379" border="0" src="https://freight.cargo.site/w/1000/i/7f759f7c8b9e0281e024f9f81bff7f330d7b4e14afda8b6763bf83b247b4aefb/Artboard.png" /> <img width="2152" height="3016" width_o="2152" height_o="3016" data-src="https://freight.cargo.site/t/original/i/4dee93206ca8de1c2ddd45ae273a2d1dbc133be04d30644a17e29a3894d4ede8/Artboard-Copy-2.png" data-mid="106668377" border="0" src="https://freight.cargo.site/w/1000/i/4dee93206ca8de1c2ddd45ae273a2d1dbc133be04d30644a17e29a3894d4ede8/Artboard-Copy-2.png" /> <img width="2152" height="1748" width_o="2152" height_o="1748" data-src="https://freight.cargo.site/t/original/i/17cb9a9e5a9698fd0fbba35eca48b4c4ad0cada456235c6ccab18b3c710cd19f/Artboard-Copy.png" data-mid="106668378" border="0" src="https://freight.cargo.site/w/1000/i/17cb9a9e5a9698fd0fbba35eca48b4c4ad0cada456235c6ccab18b3c710cd19f/Artboard-Copy.png" /> In ReviewThis project was a great experiment that shows it does not take a long time to understand a business problem, deeply research the industry space, create solid design solutions and validate them through user testing. With an approach like this companies can see a significant increase in key metrics and a substantial ROI. https://tophermacdonald.io/Virufy-Collection-Study Mon, 26 Apr 2021 23:35:02 +0000 Topher MacDonald UI UX https://tophermacdonald.io/Virufy-Collection-Study Case Study: Screen for COVID-19 using AI technology <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/c22ce9041918b8a56eb451173589175638d0df6b0d64ebc15320054450d2eedb/Virufy_Case_Study_Hero.png" data-mid="106655954" border="0" src="https://freight.cargo.site/w/1000/i/c22ce9041918b8a56eb451173589175638d0df6b0d64ebc15320054450d2eedb/Virufy_Case_Study_Hero.png" /> The Problem:Virufy, a small non-profit, needed to refine it’s experience for gathering data vital to its mission. The Solution:I provided a focused, multi-round usability audit of the existing form and recommended key UX and UI updates to refine and clarify the experience. My Role: - UX Research&nbsp; - Prototyping - Usability Testing - Interaction Design - Visual Design The Brief Virufy is a nonprofit research organization which, - with the help of cutting edge research from Stanford, Princeton and Cambridge - is developing artificial intelligence (AI) technology to screen for COVID-19 by analyzing cough patterns, rapidly and at no cost through use of a smartphone. In order to build the most robust algorithm possible, Virufy created a collection study to allow users to easily contribute a recording of their cough to their database, which directly informs the diagnostic model. Virufy’s mission is to ensure greater racial and spatial inclusivity through data that includes a range of ethnicities and community-specific phonological differences. To meet this goal, Virufy needed help to refine this collection study experience to ensure ease-of-use, clarity and reflect best practice UX principles to help it succeed on a massive scale. The Approach In order to ensure maximum impact on a short timescale, I conducted two rounds of remote usability testing with potential users on apps like Zoom and Jitsi, and two rounds of design iterations on the collection study informed by user feedback. Usability Testing Over the course of these two rounds of usability testing, I uncovered several high priority usability issues that needed solutions: <img width="2633" height="1130" width_o="2633" height_o="1130" data-src="https://freight.cargo.site/t/original/i/45d021c27586c5c8b157a13479c208bd4c3421214a971bedf9c7997e5e0cc988/Cough_Recording_Virufy_Case_Study_Issues_.png" data-mid="106656506" border="0" src="https://freight.cargo.site/w/1000/i/45d021c27586c5c8b157a13479c208bd4c3421214a971bedf9c7997e5e0cc988/Cough_Recording_Virufy_Case_Study_Issues_.png" /> One of the biggest issues was that users had difficulty completing the cough recording step; the buttons to ‘record’ and ‘stop’ were too close together and might be difficult to be completed on mobile. The playback experience was also reported as being confusing. As the key component of this collection study, any issues with the cough recording experience automatically became high-priority. From this user feedback, I streamlined the cough recording experience by combining features previously on several screens to one screen, while increasing legibility of instructions and the accompanying illustrations. The results tested favorably! <img width="2203" height="788" width_o="2203" height_o="788" data-src="https://freight.cargo.site/t/original/i/bb2a7ec1ff626f45e52006ab53a9b3da6a71ff8296a560c0ceddb9bbf96236ef/Gender_Survey_Virufy_Case_Study_Issues_.png" data-mid="106656597" border="0" src="https://freight.cargo.site/w/1000/i/bb2a7ec1ff626f45e52006ab53a9b3da6a71ff8296a560c0ceddb9bbf96236ef/Gender_Survey_Virufy_Case_Study_Issues_.png" /> Another high-priority issue was with the survey questions following the cough recording step - the user is asked to self-identify their sex and gender identity. This data is important to collect for the algorithm to be validated, but it was asked for in a somewhat limited and exclusionary way. It is important that this tool be used to help as broad a range of lived experiences as possible, and so gathering this data in as respectful and efficient a manner is key to product success. I researched best-practice solutions for gathering gender identity data in a clinical setting and found that preserving the two-step approach (asking gender identity separately from sex) was suitable. The solution was in updating the language to respect and represent the broadest extent of gender expression possible. <img width="1626" height="1507" width_o="1626" height_o="1507" data-src="https://freight.cargo.site/t/original/i/9bb5bf85a2cf6dae394215baf004dc9190b04c48909a124b94e8f00d9ad8093d/Confirmation_Screen_Virufy_Case_Study_Issues_.png" data-mid="106664613" border="0" src="https://freight.cargo.site/w/1000/i/9bb5bf85a2cf6dae394215baf004dc9190b04c48909a124b94e8f00d9ad8093d/Confirmation_Screen_Virufy_Case_Study_Issues_.png" /> Several common pain-points for our users were on the final confirmation screen. Here I wanted to reassure the user that we had received their cough submission while also surfacing various ways they might keep in touch with Virufy. The ‘Donate’ module was confusing to users at first glance, as they assumed that they had already donated a cough. Users were also unsure of the best way to save their unique Submission ID. Adding a save to clipboard feature gives the user an extra option to save their unique submission ID, and tested well when implemented. An additional ‘Contribute Another Cough’ module was introduced to separate the concept from donating money, but also adding another reason to continue using the app! Final Iteration <img width="375" height="841" width_o="375" height_o="841" data-src="https://freight.cargo.site/t/original/i/2aa47afa94ab80d7c98b0a0734e9b604b67077cf28ce1a06a130155f8ad340ca/Virufy_Prototype_Confirmation_Screen.gif" data-mid="106665070" border="0" data-scale="50" src="https://freight.cargo.site/w/375/i/2aa47afa94ab80d7c98b0a0734e9b604b67077cf28ce1a06a130155f8ad340ca/Virufy_Prototype_Confirmation_Screen.gif" /> <img width="374" height="841" width_o="374" height_o="841" data-src="https://freight.cargo.site/t/original/i/a299bec0285e56d11d7267374ab61cde3fa5696861bd36b78c558582c3d245eb/Virufy_Prototype_Record_Cough.gif" data-mid="106665071" border="0" data-scale="48" src="https://freight.cargo.site/w/374/i/a299bec0285e56d11d7267374ab61cde3fa5696861bd36b78c558582c3d245eb/Virufy_Prototype_Record_Cough.gif" /> <img width="375" height="811" width_o="375" height_o="811" data-src="https://freight.cargo.site/t/original/i/04ea2cdb06d43cd0f0aa68ed1281c9864312049501398587ebaa4e30b725b1de/Virufy_Prototype_Survey_Questions.gif" data-mid="106665072" border="0" data-scale="50" src="https://freight.cargo.site/w/375/i/04ea2cdb06d43cd0f0aa68ed1281c9864312049501398587ebaa4e30b725b1de/Virufy_Prototype_Survey_Questions.gif" /> This short research and design effort led to significant improvements to Virufy’s collection study, reducing user error and cognitive load, more accurately aligning their data collection methods with their mission, and increasing potential user engagement. Next StepsVirufy will use this collection study to build a massive dataset of COVID cough sounds. This dataset will help inform the function of a globally-launched app, which will be an effective replacement for costly COVID testing measures. Once approved by local health authorities, the smartphone app will be released in low-income countries and will allow for mass-scale, anonymous testing to help to slow the virus’ spread. Beyond COVID, Virufy hopes to collaborate with partners around the globe to help create a future where anyone with a smartphone can detect serious illnesses before they spread. Thank you! https://tophermacdonald.io/Tiny-Tales-App-Case-Study Wed, 03 Feb 2021 17:55:31 +0000 Topher MacDonald UI UX https://tophermacdonald.io/Tiny-Tales-App-Case-Study Case Study: An App That Helps Parents Find Stories to Read to Their Kids <img width="2350" height="1143" width_o="2350" height_o="1143" data-src="https://freight.cargo.site/t/original/i/8645126a0b903593d23193852887df09ed39cb53dfdcf82822033a296b1cc41a/Tin_Tales_Headline_Hero.png" data-mid="97813999" border="0" src="https://freight.cargo.site/w/1000/i/8645126a0b903593d23193852887df09ed39cb53dfdcf82822033a296b1cc41a/Tin_Tales_Headline_Hero.png" /> The Problem:Tiny Tales, a startup with a library of unique children’s books, needs an app to make it easier for parents to find a story to read to their kids. The Solution:A week-long&nbsp;modified GV Design Sprint resulting in a validated prototype which addresses the key user pain points. My Role:UX DesignInformation Architecture&nbsp;Wireframing UI Design Visual DesignPrototypingUsability Testing <img width="2350" height="864" width_o="2350" height_o="864" data-src="https://freight.cargo.site/t/original/i/aef2007ad620668e20759a6f353f335e274e3601c20e165545a64c35a816ec2c/Research_Hero.png" data-mid="97834848" border="0" src="https://freight.cargo.site/w/1000/i/aef2007ad620668e20759a6f353f335e274e3601c20e165545a64c35a816ec2c/Research_Hero.png" /> The Brief Tiny Tales is a start-up built around a library of unique children’s short stories, picture books and educational books for kids aged 4-9. As they have grown their library of stories, parents say it has become difficult and time consuming to sort through all of the stories to find the right one to read to their children. I was asked to conduct a 5 day modified GV Design Sprint to design and test a possible solution.There were some existing design constraints from the client to consider: The client is asking for an iPad or Tablet app - as they are the go-to devices for their users.Stories are already contributed to the app by writers and illustrators, so the focus of the design sprint should center on how a parent can use the app to find the right story and read it to their kid - no hard copies of books are involved. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/e6c2eab1d8825b2896980a1a465ec146b63ae1b1971588f5ed569317e05add88/Screen-Shot-2021-02-03-at-10.35.31-AM.png" data-mid="97661042" border="0" src="https://freight.cargo.site/w/1000/i/e6c2eab1d8825b2896980a1a465ec146b63ae1b1971588f5ed569317e05add88/Screen-Shot-2021-02-03-at-10.35.31-AM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/e0cc0b4bba5c334fe84472882fbe094c28154e268c144f7baff1974c9d8dfc49/Screen-Shot-2021-02-03-at-10.35.38-AM.png" data-mid="97661041" border="0" src="https://freight.cargo.site/w/1000/i/e0cc0b4bba5c334fe84472882fbe094c28154e268c144f7baff1974c9d8dfc49/Screen-Shot-2021-02-03-at-10.35.38-AM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/73924c1aa2a18087df6318f2bff52ff2b7386826b7ddb8243bcb224ad236abef/Screen-Shot-2021-02-03-at-10.36.00-AM.png" data-mid="97661040" border="0" src="https://freight.cargo.site/w/1000/i/73924c1aa2a18087df6318f2bff52ff2b7386826b7ddb8243bcb224ad236abef/Screen-Shot-2021-02-03-at-10.36.00-AM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/63a099079930de8d665dd0ac8f2c95db6d542f8d8430bfddb2a3a816c7c0478b/Screen-Shot-2021-02-03-at-10.47.02-AM.png" data-mid="97661039" border="0" src="https://freight.cargo.site/w/1000/i/63a099079930de8d665dd0ac8f2c95db6d542f8d8430bfddb2a3a816c7c0478b/Screen-Shot-2021-02-03-at-10.47.02-AM.png" /> Research The research provided by the client included user interviews and a user persona. These showed that finding the right story(s) to read is often tricky and overly time-consuming because: It’s difficult to find relevant stories their kids are interested in, and those interests change oftenIt’s difficult to find the right ‘length’ of story, especially if reading around bed timeIt’s difficult to find stories that are age appropriate for one or sometimes several kids of different ages or comprehension levelsSometimes parents will need to have 3 or 4 books per reading session Further key insights gleaned from the research: Kid’s may pick a topic, and parents may search using this topic and pre-read a story for a few pages to see if it’s a good fit and to check the lengthOnline reviews of books are helpful to assess a story’s age level and enjoyment levelSome parents get their book recommendations from other parentsIf their kid likes a particular story, a parent may try to find other titles by that author to check out Synthesizing the Data <img width="1000" height="750" width_o="1000" height_o="750" data-src="https://freight.cargo.site/t/original/i/cb6dd0ede9cccbffd2e0dc9e2d0737c9e32ece101df3357c5260e74d66c23655/IMG_1868.png" data-mid="97691685" border="0" src="https://freight.cargo.site/w/1000/i/cb6dd0ede9cccbffd2e0dc9e2d0737c9e32ece101df3357c5260e74d66c23655/IMG_1868.png" /> After downloading all of the research into an affinity map to organize user’s thoughts, I created an end to end user experience map of the product’s main red route and desired outcome. <img width="2350" height="864" width_o="2350" height_o="864" data-src="https://freight.cargo.site/t/original/i/c647183b02527fc9ba28b502920a8971c1d0b50ac7d353f4ea6757f63ec54096/Sketching_Hero.png" data-mid="97835449" border="0" src="https://freight.cargo.site/w/1000/i/c647183b02527fc9ba28b502920a8971c1d0b50ac7d353f4ea6757f63ec54096/Sketching_Hero.png" /> Sketching Once our main design problem and user experience map were established, I set to quickly sketching out some possible design solutions related to the primary screen of the experience - the product detail page. <img width="1000" height="1333" width_o="1000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/82a4a7d0f87451acb01a32c4eb68820bcaebbafbfab623a29db344fa0ccde4a2/Crazy8s_exercise.png" data-mid="97693026" border="0" src="https://freight.cargo.site/w/1000/i/82a4a7d0f87451acb01a32c4eb68820bcaebbafbfab623a29db344fa0ccde4a2/Crazy8s_exercise.png" /> Using the Crazy 8’s method I created quick ideations of what this important screen could look like. I leveraged the findings from a Lightning Demo I conducted to to explore other relevant products in the space. This process gave me a good overview of how competitors with similar experience maps achieve the desired outcome, while also giving me some ideas to help make the experience of this app even better than those competitors. <img width="4032" height="1163" width_o="4032" height_o="1163" data-src="https://freight.cargo.site/t/original/i/4e6ac4732841646a9007f1830f0a18182b43c35fbc57131163139e528926d868/Solution_Sketch.png" data-mid="97694491" border="0" src="https://freight.cargo.site/w/1000/i/4e6ac4732841646a9007f1830f0a18182b43c35fbc57131163139e528926d868/Solution_Sketch.png" /> I chose the best sketch from my Crazy 8’s exercise to create the above solution sketch for our primary screen, along with the screens immediately before and after in our user experience map. The solution uses a product detail modal that displays all of the information our users told us was important to them. The design is easily scannable and has a clear call-to-action.<img width="1000" height="1333" width_o="1000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/467413d28c1faa686048ecf733fd8ff02d009caf2bc867dd6698f2855a7954e9/TinyTales_Storyboard.png" data-mid="97695004" border="0" src="https://freight.cargo.site/w/1000/i/467413d28c1faa686048ecf733fd8ff02d009caf2bc867dd6698f2855a7954e9/TinyTales_Storyboard.png" />I then sketched a tighter storyboard of the full experience. Here is where I had a chance to iron out any glaring errors in the information architecture, and where I started to get a clearer idea of the visual hierarchy our users would find the most helpful to finding a book to read to their child. <img width="1500" height="686" width_o="1500" height_o="686" data-src="https://freight.cargo.site/t/original/i/0bc576630a0b97569dfae453b3338b6db713afc8a0aee521f9b30091c2a9c9e3/Tiny_Tales_Prototype_Animation2.gif" data-mid="97812856" border="0" src="https://freight.cargo.site/w/1000/i/0bc576630a0b97569dfae453b3338b6db713afc8a0aee521f9b30091c2a9c9e3/Tiny_Tales_Prototype_Animation2.gif" /> PrototypeUsing the storyboard as a framework, I used Sketch to create all of the screens at low to medium fidelity. I used these screens to create a testable prototype, which was assembled in InVision.While the general flow remained unchanged, as I worked through the prototype screens I adjusted the hierarchy of some elements - especially on the critical screen. <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/7d273c543e32f44d3855334e3ca19e6f8810e4db513c9999c14aa2ad73c86a2b/Search-Results---Modal.png" data-mid="97695734" border="0" src="https://freight.cargo.site/w/1000/i/7d273c543e32f44d3855334e3ca19e6f8810e4db513c9999c14aa2ad73c86a2b/Search-Results---Modal.png" /> Thinking back to the user research we synthesized at the beginning of the sprint, I saw an opportunity to enable users to quickly peruse the contents even before tapping the ‘Read’ CTA by adding a carousel element to the modal. Also, users could quickly get a sense of the number of words on each page while comparing it to the age range and page number information. <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/c9c577a0c188afac07bd5d01c4277b4acd685040f372b1e5e58db2d709afe293/Search-Results.png" data-mid="97696298" border="0" src="https://freight.cargo.site/w/1000/i/c9c577a0c188afac07bd5d01c4277b4acd685040f372b1e5e58db2d709afe293/Search-Results.png" />I also added category tags in the search results page, which would lead to that category’s landing page. This solution adds a new level ofn case the user was searching for something more general. Usability TestingI was excited to test out the prototype, which was the result of a week of fun but rigorous research, thought and experimentation!The scope of this prototype was limited, with not a lot of functionality built out. Still I was interested in seeing how users navigated the experience, but was also curious to see if the search path would be preferred over the category path.3 of the 5 interviewees were parents or grandparents who read books to children - one of these used a similar app to read books to their grandchildren. After giving each participant a brief background of the project and resulting app, I asked them to find a book about Nature to read to a child. The first choice everyone made was to click on the ‘Nature’ category button, click on the first book in the landing page carousel, from which everyone immediately knew to click the ‘Read’ CTA.I was surprised no one thought to use the search bar or search icon. This could possibly be because the interview question was too specific, I would like to try to ask users to ‘find a book about seasons’ for example to see what the results would be. Generally everyone found the task to be simple to complete and had little to no confusion using the prototype. One of the most interesting suggestions was to add an “estimated read time” on the book detail modal. <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/5be0be1c94e1b044448525e178d4785e08648d941b0565de7fada88012c55a58/Category-Screen---Modal.png" data-mid="97835925" border="0" data-scale="52" src="https://freight.cargo.site/w/1000/i/5be0be1c94e1b044448525e178d4785e08648d941b0565de7fada88012c55a58/Category-Screen---Modal.png" /> <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/36ffa6dc731d58a1441ab400e592674d6e6b08cbde3fd36630c153d606b5b47a/Search-Results.png" data-mid="97835920" border="0" src="https://freight.cargo.site/w/1000/i/36ffa6dc731d58a1441ab400e592674d6e6b08cbde3fd36630c153d606b5b47a/Search-Results.png" /> <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/6111eaa9cc33b5306ed0fa9036a367fd1778433918cd74be039430cd108529e1/Home-Screen.png" data-mid="97835922" border="0" src="https://freight.cargo.site/w/1000/i/6111eaa9cc33b5306ed0fa9036a367fd1778433918cd74be039430cd108529e1/Home-Screen.png" /> <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/82b9ba011311de5832cb7c80ed82d8fbc290c200c3f6e1d3e6769adc0c7d0790/Readin-Screen.png" data-mid="97835923" border="0" src="https://freight.cargo.site/w/1000/i/82b9ba011311de5832cb7c80ed82d8fbc290c200c3f6e1d3e6769adc0c7d0790/Readin-Screen.png" /> <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/5be0be1c94e1b044448525e178d4785e08648d941b0565de7fada88012c55a58/Category-Screen---Modal.png" data-mid="97835925" border="0" src="https://freight.cargo.site/w/1000/i/5be0be1c94e1b044448525e178d4785e08648d941b0565de7fada88012c55a58/Category-Screen---Modal.png" /> <img width="1194" height="895" width_o="1194" height_o="895" data-src="https://freight.cargo.site/t/original/i/d9f4de3a852bf436cde533e8afc0903387f69f058de1881d70ff3d1697fcc850/Category-Screen.png" data-mid="97835924" border="0" src="https://freight.cargo.site/w/1000/i/d9f4de3a852bf436cde533e8afc0903387f69f058de1881d70ff3d1697fcc850/Category-Screen.png" /> Design Sprint RecapIn future design sprints I would want to further hypothesize and test out the other main red routes necessary to create an MVP product for the client. An onboarding flow and many lower-priority but still essential elements of this app could be designed, and a more considered branding approach should be implemented.For the time being I did another design pass on our low-medium fidelity screens, establishing the bones for a fun, attractive and easy to use solution for parents needing to find a book (or 5) to read to their child. <img width="4000" height="6346" width_o="4000" height_o="6346" data-src="https://freight.cargo.site/t/original/i/8182a66132c85e76b6804575943869f890dbd6aef09120527c69f39779e7baa3/TinyTales_Hifi_Flows.png" data-mid="97698860" border="0" src="https://freight.cargo.site/w/1000/i/8182a66132c85e76b6804575943869f890dbd6aef09120527c69f39779e7baa3/TinyTales_Hifi_Flows.png" /> Thank you!