Personification
A persona was established to give context and humanize our targeted user group. We used their frustrations, motivations and behaviors to give our persona a scenario that hopefully can expose some design opportunities. With that said, please meet Cheryl and her pug, Shteve.
Using the crafted scenario and results from the interview phase, I created a journey experience to help empathize with Cheryl and determine how she would act now that Shteve is in danger. This helped me uncover potential points of opportunities for intervention.
Stories & Epics
Referencing the opportunities spotted in the experience map, we can generate some user stories. Imagining what pet owners desire is a good step in the creating an connection between us and the target user. This is also a great opportunity to see what emotional context users might encounter when we match them with the design intervention.
Task Flow
Next, I devised a simple task flow that was based on the opportunities uncovered in the persona's user experience journey and user stories. I was able to use this task flow as guide rails to outline some of the key screens that users will interact with to achieve their goal.
Having been trained in Level 1 Human First Aid, I recall that one of the core concepts is to first get help. Since pets do not share the access to emergency response, we should first contact the nearest available veterinarian. While doing so so pet owners will also have to provide first aid care before they have directions from a professional. Keeping those details in mind, here are the results.
Sketches
Considering the required screens from the task flow, I began to apply the qualities from the UI inspirations that I have found by sketching and keeping notes of some important after thoughts. While I didn't sketch out every screen, it was a valuable opportunity to explore and assess the values I want the project to provide.
The key UI features that I visualized and wanted to carry on to the next phase:
- Big Red Dial button that catches the users eye.
- A easy way to match user's current scenario to one in the library of first aid diagnosis.
- Calling indicator that expands with additional context
- Easily navigable Step-by-step guide
Low Fidelity Prototype & Testing
Using ideas from my sketches, I created a low-fidelity, interactive prototype in Figma for user testing. This allowed me to focus on functionality rather than aesthetics and make iterations easily. During usability testing, the lack of visual details helped me observe the participant's expectations and identify where the heuristics and functions might break.
In total, 2 rounds of usability testing were conducted. 5 unique participants tested the usability of the prototype for each round. As real-time feedback and action was necessary to see genuine usability reactions, their performance and mistakes were documented for later synthetization.
A matrix was crafted and iterations were made after each round prioritized by the matrix.
Task 1 - Make a call with the emergency dial button
Task 2 - While dialing, navigate to the CPR guide and “perform CPR”
Task 3 - Navigate to the call screen (The call has connected to a clinic)
Task 4 - Find map navigations to the clinic
Round 1
First round results felt very validating to see, general reception was very positive and participant seemed to like prototype and appreciated the idea. One key take away is that, on paper the heuristics of the application seemed successful but in reality, all 5 participant was initially confused with task #3. With that, and additional feedbacks, I took the prototype to iteration.
Round 2
The prototype was tested again with changes from previous feedback, but performance of the participant group was worse. The optimizations to task #3 were not well received and all participants failed to complete the task. However, the failure provided valuable insights and I realized the importance of letting the results guide the process.
Keeping the feedbacks from both usability test in mind, I took the prototype back for another round of revision. The screenshots above show some major changes.
Brand Injection
After the last round of feedback were gathered, the next goal is to develop a brand for the PetRespond. The objectives for this process is to establish the visual rules for the application and inject further design cues and ultimately, create a reference to hand off to the development phase.
Naturally, with the introduction of colors and redlines, small iterations on the interface were made to adhere visual guideline while maintaining visual clarity.
See my Invision mood board here.
