Vetrax®, a product of AGL, is a veterinarian prescribed behavior monitoring device that tracks canine behaviors that can impact medical treatment, including shaking, scratching, running, walking, resting, sleeping and sleep quality. The system includes a sensor that attaches to a dog’s collar, a pet parent mobile app that dog owners can use to track their dog’s progress, and a veterinarian portal for in-clinic patient monitoring.

‍

Our team of two (myself and a digital designer) was tasked with creating the user experience and visual design of the pet parent mobile app. The client had already produced a beta version for proof of concept, and our goal was to enhance the pet owner’s experience and keep them involved in their pet’s care alongside their veterinarian.

‍

Discovery Step 1 – I started this project by assessing the current state of the beta version using a journey mapping exercise for onboarding. For this particular project, I didn’t need to go far to find test subjects that were similar to actual potential customers. Our office was dog-friendly and the owners of Harley, Aiya, Dillon, Odin, and Moose were all able to walk through the onboarding process while I acted the part of a veterinarian prescribing this product to my patient.

While going through the onboarding process with each participant, I tracked and documented user goals, touchpoints, channels, pain points, and participant emotions/body language, and then I analyzed the aggregated data afterwards to determine potential improvement ideas, key takeaways, open questions, and the score of the existing overall experience. The results of this exercise were reported to the client as part of our discovery phase.

‍

‍

Discovery Step 2 – After getting a feel for the mobile app and its capabilities, I next researched some comparative mobile apps to help generate ideas around not only what similar apps were doing, but also around what makes tracking apps addictive and interactive. I put together a board in InVision with screenshots of these other apps and added notes on what was compelling or noteworthy about each screen.

‍

‍

Discovery Step 3 – After conducting the comparative analysis, it was time to figure out how the beta app was structured in-depth and how it could potentially be structured. I organized and collaborated with the digital designer on an Object-Oriented UX (OOUX) mapping session.

During this session, we extracted system “objects” from the project goals and existing framework, and began determining what content, metadata, nested objects, and calls-to-action belonged to each one. This process allowed us to not only assess the existing information architecture of the beta release, but also find potential new features and interactivity going forward. I used the output of this mapping session to recommend an IA structure going forward and also provide some new opportunity ideas during the design portion of the project.

‍

‍

Discovery Step 4 – The final activity that I performed during the discovery phase was basically the gateway to the design/development phase of this project. Now that we had talked through with the client all of the insights gathered during project discovery, it was time to move things forward. Representatives from all stakeholder parties (client, investor/partner, design agency, and development agency) gathered together in-person for a one day workshop. The morning involved meeting all team members and determining details around communication and schedules. In the afternoon, I conducted a user story mapping session with the full team.

Along an entire wall, I created (with team input) the backbone of the project by listing out all major user activities and tasks in the system, organized in order of a typical user scenario. Using this process, the client and investor were able to fill in gaps and provide clarification on what they were expecting the app to do in the foreseeable future. Next, I had the team start to fill in additional details (user stories) under the activities that the team agreed were most important. Finally, we worked together to determine which stories were achievable in the first sprint, second sprint, and so on. I included UX and design cards, as well as client tasks, in the story map so all parties understood and agreed to the runway activities needing to get done ahead of development.

I asked a project manager to digitize the story map as we went through the workshop so we all had access to the output afterwards, and I continued to keep the story map up-to-date and had the team revisit the map during sprint planning as the project progressed.

‍

‍

UX/Design/Development Phase – This phase of the project was conducted in two-week sprints. Each sprint included a planning session that I prepped for and led with the client and development agency. It also included a design review led by the digital designer (which was a sprint ahead of the development work) and a demo of the working product. Throughout this phase, I would push the story cards to Jira that I and the digital designer needed to work on. My work during this phase typically included sketching out the user flows of each feature, using the OOUX map as a reference. I also recommended data visualizations of app information and worked with the digital designer to bring those to life.

‍

‍

AGL successfully launched this product in early 2017 and gave us positive feedback for our UX and design work. Here are a few simulated screenshots (designed by @jlobaito) of the initial release of the mobile pet parent app:

‍

‍

‍

The Vetrax pet parent mobile app can be found in the App Store and Google Play, but requires a prescription from a participating veterinarian for login access.

‍

‍

‍

‍

‍

Quote from the App Store:

"Every time my dog and I visit the vet, his scratching mysteriously stops. Now the vet knows what Diego’s situation is before I step into the waiting room. Awesome concept, great app. My kids even have it on their iPad and enjoy attributing the activity on the graphs to family outings, visits to the dog park, etc."

Vetrax Website

The team (myself, the same digital designer/developer, and a project manager) also created a website to support the launch. As part of that process, I created a roadmap of the website and presented that to the client so they knew what features and content were going to be on the website at launch, and what features we would plan for as part of a future release. I divided the roadmap into themes that were formed around the business and user needs necessary for launch and those that were needed eventually.

‍

‍

Finally, I created a sitemap for the website and helped with design reviews and pre-launch content entry in the CMS platform (Craft). Here is the final content layout and visual design for the site’s homepage:

‍