Whiskr
Overview
Goal: Create the user experience of an app that helps busy owners easily care for their pets.
Key features: Keep track of pet medical records, medication reminders, appointments, and local service providers all in one place.
When brainstorming for helpful app ideas, I wanted to solve a problem I had personally experienced as a busy pet owner: misplacing health information. After I formed a concept of the app’s functionality and features, I started creating some rough wireframes.
Wireframes
Before diving into prototyping in Figma, I made some adjustments to refine my initial ideas.
Key takeaways from this step: Creating wireframes first helped me focus on functionality and structure rather than aesthetics. It allowed me to determine what made sense for the app and prioritize essential features.
Questions I asked myself: Where should the features go? Should certain features be grouped on the same screen? How are they connected? How do other well-designed apps establish hierarchy and link features effectively? These considerations shaped the app's foundation.
User Testing - Tasks
Open the app and start the introduction. Enter your information.
You want to change your privacy/location settings. Try to change this.
Imagine that you want to access your pet’s health records. Locate this feature.
Your pet has an upcoming appointment that you need to check. Locate this information.
Imagine you need to add a new medication for your pet. Add a new medication to your profile.
You need to find a vet in your new city. Schedule a veterinary appointment.
Tasks are meant to be rated by the users with 1–5, 1 being very difficult, and 5 being very easy to complete. For in-person interviews, I made evaluations based on how quickly the user completed them.
Redesign
The biggest pain point seemed to be the “Calendar”. Two of the users didn’t immediately find out where they needed to go to change their information. To make it more accessible, I adjusted the calendar icon + used the defining text below.
I made some more changes to the UI, based on notes I got from the testers. Although they didn’t seem to be huge pain points, I wanted to improve navigational issues further by carefully considering all feedback.
Here is my final interactive prototype:
High fidelity Design
I thought about testing my Wireframes but decided to create a completely designed Prototype so that I could also get some feedback about the actual UI since I was designing the interface from scratch.
The visual design process was started by creating a basic stylesheet for the app to encapsulate the UI.
Once my style sheet had been completed, I created a very rough user journey map to help me visualize the user onboarding experience.
This led to me realizing that I needed to allow users to complete the onboarding phase as efficiently as possible.
User Testing
There were two kinds of tests I wanted to conduct with this app:
An online test with 2-3 participants, as well as an interview test with one participant, where I would show the participant the app and have them complete specific tasks.
The questions and tasks would be the same for both tests, but the interview test has the advantage of being able to observe the user and see their reactions in real-time.