← Back to Case Studies

B2C Veterinary Mobile & Web Application Suite

ClientLogoZoetis.png
 

Platforms: iOS, Android, Responsive Web

Main Roles: Digital Product Development, User Research, Cross-Platform UX Strategy, Mobile UI Design, Web UI Design

Additional Roles: Branding Design, Front-End Development

 

Project Summary

The goal of the project was to build a new mobile application and corresponding web application that would replace three existing apps. Each of these apps only partially met current requirements, and did not integrate with the company’s latest systems.

 

Research

Our product had to satisfy not only the horse owner’s needs in caring for their animal but also the vet’s needs in communicating with their customers and generating opportunities for sales. I performed research on horse owner demographics such as what motivates them to own and care for such large, high-maintenance animals, what percentages of horse owners compete, and what they do in their spare time when they’re not in the field. This research was taken into workshops with horse owners and veterinarians to get a deeper understanding of existing behaviours and requirements.

HorseDialog1.jpg
 

Sketching & Wireframing

Based on the ideas from our workshops and the research gathered above, I began the process of sketches through into wireframing. The app contains many powerful features for both clinical and emotional engagement so they needed to feel like a single experience that made sense together. There also needed to be room for future integration of devices or external party services.

Screen Shot 2017-09-06 at 19.54.39.png

During this process, I held multiple workshops with stakeholders as well as user feedback sessions with horse owners and vets to get feedback on app features and usability. This feedback was then prioritised and pulled together into future versions of the specification.

Screen Shot 2017-09-06 at 19.59.12.png
 

UI Design

I created designs on two levels: guideline templates and individual screen designs. Many screens were able to follow guideline template such as forms and lists. I provided Adobe XD and/or Sketchfiles for every screen type including detailed UX specification for colours, fonts, etc.

HorseDialogUI1.png

For interactions, I created storyboards displaying what all interaction stages should look like and how it should operate. For more complex features that required more than just descriptive words like “bouncy” and “snaps” I created sample animations in Adobe After Effects.

HorseDialogUI3.png
 
HorseDialogAfterEffects2.gif
 

Specification & Development

I wrote the entire first version of the development specification (about 7200 words) for all features in the app, including flow diagramsdatabase schema drafts and a large number of use cases.

For the web side of the product, I provided a GitHub repository with full HTML, CSS & jQuery templates which saved a large number of development days and ensured that the app would be built to our exact UI specifications.

I worked with the development team in Jira and Confluence systems during build to answer questions and offer general support through launch.

HorseDialogSpec7.png
 
 

Branding

To ensure that external agencies could create assets that stayed on-brand for the app, I designed a full set of interactive branding guidelines which are available publicly for use in marketing and social campaigns.

 

Launch Support

I performed art direction over the creation of many campaign pieces including a full trade show event for launch. I did a small amount of design support when necessary, such as display banners and also created display videos for the trade show in After Effects.

HorseDialogLaunch1.png
HorseDialogLaunch2.png
HorseDialogLaunch3.jpg
HorseDialogLaunch4.jpg
 

In The Media

“A highly efficient way of managing their horse’s health and well-being”
Vet Times

“Initially I was apprehensive that it would be time consuming to input all the details but the design is so intuitive that it takes seconds to add updates.”
HorseTalk