<p>Published on <a href="http://ift.tt/2s36nZP">| Prototyping: From UX to Front End &mdash; Medium</a> Sherry Xie <img alt="" src="http://ift.tt/2sRgXj4"></p>
<h4>Challenge: Design and present a functioning prototype of the client’s app idea given three weeks time.</h4>
<p><img alt="" src="http://ift.tt/2rTpS6e"></p>
<h3><strong>Brief</strong></h3>
<p>Our client, a regional coordinator for the Canadian Disaster Animal Response Team, came to our meeting prepared with binders full of learning materials. She told us harrowing stories about owners whose pets were left behind after a fire, followed by the emotional response when they’re reunited. Her goal for this mobile app was to further prepare the organization’s volunteers for emergency response beyond the in-person training, as well as educate pet owners about disaster preparation.</p>
<p><strong>Team: </strong>Our team consisted of two UX Designers, myself and Julie Woolf, along with our UI Designer, MP Boucher.</p>
<p><strong>Project Goals</strong></p>
<ul>
<li><strong>Increase</strong> support for animal rescue volunteers, including those in remote regions without access to CDART resources</li>
<li><strong>Increase</strong> CDART’s profile and bring awareness to animal emergency rescue programs</li>
</ul>
<p><img alt="" src="http://ift.tt/2sRbo44"></p>
<h3>Research</h3>
<h4><strong>Defining the problem</strong></h4>
<ul>
<li><strong>Understanding the needs and motivations </strong>of animal rescue volunteers, and how an app could benefit them</li>
<li><strong>Low Awareness</strong> surrounding animal emergency preparedness and response</li>
</ul>
<h4>Organizational Research</h4>
<p>CDART is a 100% volunteer-run organization with multiple branches across BC and Canada. The different branches in BC are regularly in contact with each other, but hold meetings and courses independently. It became clear that because the central organization lacked a permanent IT person, making changes to the app would be difficult after release. This meant that anything requiring the organization to manage a complex database would be out of scope.</p>
<h4><strong>Comparative Analysis</strong></h4>
<p><img alt="" src="http://ift.tt/2rTiF6c"><img alt="" src="http://ift.tt/2sR7JmL"><img alt="" src="http://ift.tt/2rTfvPU"></p>
<h4>Survey Results</h4>
<p><img alt="" src="http://ift.tt/2sRewgv"></p>
<p>After sending out surveys to CDART volunteer Facebook groups in different BC regions, we were able to better picture our mobile app’s target user. They describe themselves as comfortable with navigating mobile apps, and they are predominantly iPhone users. The majority of them have internet data plans.</p>
<p>Given the older age range for the organization’s volunteers, this survey helped inform later design choices. As designers, this meant we had to focus on making the app accessible, readable, and the features easily discoverable.</p>
<h4>User Interviews</h4>
<p>We conducted in-depth interviews with CDART volunteers, pet volunteers and a veterinarian. After inquiring about their emergency deployment process and their challenges being a volunteering, we received several new insights. Some interviews became emotional when volunteers recalled their experiences in the aftermaths of mass fires. It confirmed our earlier assumptions about the motivations of the organization’s volunteers. <strong>They consider pets to be their family, and they want to help animals who otherwise don’t have a voice.</strong></p>
<ol>
<li>The app would seldom be used<em> during </em>an emergency. Especially in local emergencies, the volunteer is immediately helping hands-on and has no time to check their phone. The mobile app should focus on emergency <em>preparedness </em>instead.</li>
<li>When asked if they ever had to <strong>review prior training</strong>, many responded that they needed to go back and<strong> </strong>revisit procedures in order to refresh their memory. Since emergencies can be months apart, all of them said it was difficult for volunteers to stay focused and up to date on their past training.</li>
</ol>
<p><img alt="" src="http://ift.tt/2rTuw4i"></p>
<ol>
<li>When asked which areas they found trouble with the most, the area that came up the most was <strong>filling out the necessary paperwork correctly, particularly during animal-intake.</strong></li>
<li>Among the pet owners, almost all of them said they had <strong>no emergency preparedness plan involving their pet.</strong></li>
</ol>
<p><img alt="" src="http://ift.tt/2sRbo44"></p>
<h3>Planning</h3>
<h4>Primary User Persona</h4>
<p><img alt="" src="http://ift.tt/2sRIwIO">Volunteer Persona<img alt="" src="http://ift.tt/2rSZZU7">Storyboard: Volunteer</p>
<h4>Volunteer Scenario</h4>
<p>Maria has just received a call about an apartment fire in her area. CDART has been deployed to aid the animals. She must bring the required paperwork, but doesn’t remember where to find them. She has to recall her training from over 4 months ago. Maria starts trying to remember what she must pack to prepare herself.</p>
<h4>Volunteer Story</h4>
<p>Creating user stories and scenarios using the interview data helped us narrow down the most important features and provide context.</p>
<p>As a CDART volunteer and a pet owner, I want to be able to access essential resources to prepare for emergency deployments.</p>
<ul>
<li>I want to be able to easily print and share forms and paperwork</li>
<li>I want to have easy access to volunteer checklists such as what to pack for myself</li>
<li>I want to review important procedures and information</li>
<li>I want to be notified of updates during emergencies</li>
<li>I want to be able to store my pet’s information, as well as the information of animals I encounter while volunteering</li>
<li>I want to have access to the contacts of other volunteers in the region</li>
</ul>
<h4>Pet Owner Scenario</h4>
<p>Jenny is driving when she hears a radio ad promoting Emergency Preparedness Week in Vancouver. She thinks about what she would do if something were to happen to her dog, Oliver, during an emergency. Later that day she does a quick google search. She comes across a site promoting CDARTs mobile app for their Pet Owner’s Preparedness guide. She downloads the app and starts putting together Oliver’s Pet Profile.</p>
<p><img alt="" src="http://ift.tt/2sRmvtK"></p>
<p>Creating the<strong> user journey map</strong> from the interview data was extremely helpful in identifying opportunities where the app could be most useful. Months can pass between a volunteer’s training and their first emergency deployment. During that time, their training can be forgotten. When they’re finally deployed, the app can help reduce their anxiety by preparing them for the emergency.</p>
<p><img alt="" src="http://ift.tt/2rTF6Zd"><img alt="" src="http://ift.tt/2sRmmGG"></p>
<h4>Feature Prioritization</h4>
<p>Given the short time frame, and the technical constraints of the organization, we had to reduce the app to its most essential features. By mapping out features based on level of impact against difficulty of implementation, we were able to design for high impact.</p>
<h4>Site Map</h4>
<p>Keeping in mind the high pressure situations the volunteers may be in when using the app, I wanted to make all the most important resources easily discoverable. This is reflected in the information architecture of the app. From the home page, users can access all the important categories of resources. In the navigation, you can check for live updates and pet owners can add a pet profile. The ‘Get Involved’ section will help promote brand awareness, and increase volunteer engagement.</p>
<p><img alt="" src="http://ift.tt/2sRbo44"></p>
<h3>Design + Testing</h3>
<h3>Testing</h3>
<p><img alt="" src="http://ift.tt/2rTtMMt"><img alt="" src="http://ift.tt/2sRkYUO">Volunteer + Pet Owner Tasks</p>
<p>From testing with several users including pet owners and veterinarians, the main issues were surrounding the group message creation, the iconography in the navigation bar, and the order of content in the checklists. We decided to change the layout of the ‘create group message’ screen, and order the checklist content in descending order of importance. The icon and name for the “Prepare” home page was changed to a house labelled “Home” for easier understanding. Custom iconography was created for the different categories.</p>
<p><img alt="" src="http://ift.tt/2rTARMS">Paper Prototype of the initial screens</p>
<h4>Second iteration</h4>
<p>Initially, we had a prompt at the first screen asking whether the user is a pet owner or volunteer. Someone pointed out during user testing that it might be confusing to switch between the two flows, especially if a user identifies as both. After much thought, we decided to combine the pet owner and volunteer flows. We did this by adding the Pet Profile feature to the navigation bar, and adding access to the pet owner preparedness guide from the home page.</p>
<p>In place of the initial screen, we created an on-boarding process to help the user locate the resources that are relevant to them.</p>
<p><img alt="" src="http://ift.tt/2sR5sYP">On boarding Sequence</p>
<p>In the last rounds of testing with the high-fidelity prototype, we timed first-time users and took note of their behaviour. When given the emergency scenario and the time pressure, many users skipped the on-boarding sequence. However, they were still able to find the required checklists, forms and procedures in around 2 minutes.</p>
<p><img alt="" src="http://ift.tt/2rTpUem"><img alt="" src="http://ift.tt/2sRei8Q">Mid and high fidelity screens<img alt="" src="http://ift.tt/2rTDZsc"></p>
<h4>Form Design</h4>
<p>In order to condense the amount of information that needed to be included in the pet profile, we tried different ways of representing the information. We decided on using buttons instead of toggles in order to save space. In the ‘View Mode’, the information is condensed and simplified so that anybody viewing it can quickly identify the most important information.</p>
<p><img alt="" src="http://ift.tt/2sRfR75">UI Style Guide by MP</p>
<ul>
<li><a href="http://ift.tt/2rTtKnP">Click here to view the project `P3_CDART`</a></li>
<li><a href="http://ift.tt/2sRmlT8">CDART App Design — UI Case Study</a></li>
</ul>
<p><img alt="" src="http://ift.tt/2sRbo44"></p>
<h3>Reflection</h3>
<p>Through this project, I learned how to balance the different needs of the client and user, as well as technical and time restraints. I quickly realized that one of the features the client pushed for, a group contacts feature, wasn’t a feasible solution after discussing with the app development team. This prompted us to consider alternative solutions to the client’s problem. In the end, our team proposed leveraging free, existing technology, such as WhatsApp, as a solution to the organization’s communication issues.</p>
<p>My key takeaway from this was to push and advocate for the user’s need in difficult situations. It’s easy to get lost in all the potential features the app could have during meetings with developers and clients, thereby losing sight of what the user actually needs. I also realized the importance of a content-first approach. Understanding the content thoroughly — in this case, powerpoint presentations and binders full of teaching material, was essential.</p>
<p>In the end, we received the exciting news that the app development team had chosen our app to be built. Our client was more than happy with our design, as well as our thorough understanding of the organization. Seeing her excitement and hearing how the app would impact her organization reinforced my motivations for practising UX design.</p>
<p><img src="http://ift.tt/2rTl7cX" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sRmuGc">CDART Assist —Animal Rescue App</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>


CDART Assist —Animal Rescue App

Challenge: Design and present a functioning prototype of the client’s app idea given three weeks time.

Brief

Top Stories