UX CASE STUDY
MOBILE APP FOR ANIMAL HEALING CONNECTIONS
MARIA NICHOLS // ADVANCED FIGMA FINAL PROJECT (BYOL.COM)
Project Overview
Design the brand, UI, and UX for a mobile app that promotes in-person events specializing in animal-assisted therapies. The goals of the app are to sell tickets, promote events, and establish visual branding.
ROLE
Brand, graphic, and UI/UX designer
TIMELINE
Jul-Aug 2023
TOOLS
3 Minute Video
Challenge
There can be a steep learning curve to offer personalized animal-assisted therapy to clients.
With qualitative data supporting the benefits of a human-animal connection, adding animal-assisted therapy to a mental health professionals’ services is an advantage for their practice and clients. The goal of AHC is to streamline the education path.
5.1%
Annual growth of animal therapies¹
61 million
Adults in the United States living with a disability²
500,000
Service dogs in the United States²
PROJECT MEASURES OF SUCCESS
Growth of the target audience becoming members
Increase ticket sales
Broaden partnership network
APPLICATION TECHNICAL REQUIREMENTS
Responsive components
Meet human interaction guidelines for iOS and Android platforms
Meet WCAG Level AA conformance
TARGET AUDIENCE
Mental health professionals practicing in California
PERSONA
The ideal customer is a woman named Samantha Mitchell. Samantha is in their 50’s and is a licensed mental health professional. Samantha is a warm, empathetic, and compassionate individual who has an interest in the profound impact that animals can have on human psychology and overall mental health. Samantha is licensed in California and is looking to advance her professional education.
PERSONA ASSUMPTIONS
Middle class income level, willing to invest in professional development
Has existing clients that could benefit from various animal therapies
Understands that being current on state laws and regulations will add to work load
Process
LOGO
Custom logo design (using Procreate and Illustrator)
Dogs are by far the most common animal-assisted therapy animal and will connect with a wider audience
The hand and dog moments before a touch embodies “Connections”
“Healing” represented by the heart in the palm of the hand
Clear at various sizes and on light/dark background colors
TYPOGRAPHY
abcdefghijklmnopqrstuvwxyz
Athelas for the logo and confirmation greeting
abcdefghijklmnopqrstuvwxyz
Open Sans default font
COLOR PALETTE
Primary
#658791
RGB: 9,135,145
Secondary
#093144
RGB: 9,49,68
Secondary
#8B9E90
RGB: 139,158,144
Accent
#ece9da
RGB: 236,233,218
Accent
#E8591D
RGB: 232,89,29
Evoke calm, nature, optimism, and energy
Must offer enough contrast to meet WCAG Level AA conformance
SCREENS AND COMPONENTS
Reflections
Engagement is the most visual goal of this project but underlying that is an equally important goal of efficiency.
As a graphic designer with years of design and branding experience, the overall look of the application was quickly defined. I spent time in the candy aisle of components and animations that could be included in a mobile app. This meant that I went through more than a normal amount of iterations but I took the time to try things, think about what works/doesn’t work and why through the eyes of the user. This project also gave me the space to push my Figma skills to a more advanced level.
My mental loop for projects is: try-and-revise, edit, edit, edit, and repeat - this project was no exception!
In the future, this project can be expanded with a suite of platform screens and functionality, such as Settings and Logout. From a business perspective the events and services need to be expanded to support users that move beyond learning the basics. I could imagine one-on-one coaching services, consulting for specific therapeutic needs, and personalized adoption connections between organizations and clients.
Sample Instagram Post
Figma Files (view only):
Credits:
Bring Your Own Laptop: Figma Advanced Tutorial: Become a Figma Pro
Company, persona description and other text generated by ChatGTP and customized
Statistics in video source: The Zebra
Photos: Freepik
Videos: Freepik, Adobe Express