Sophie Do
Therapy Animal of San Antonio
​UX UI CASE STUDY
Project Overview
-Current Website-
-Redesign-
My team and I had an opportunity to redesign a local non-profit website of our choice. After researching possible local organizations, we chose the Therapy Animals of San Antonio (TASA). I thought TASA was an amazing organization that “brings people and animals together for healing”; however, their website seems not to deliver that message quite clearly.
-Duration-
3 weeks​
-My Role-
Interaction Design
Prototyping
Site Mapping
Usability testing
User research
Visual design
-Tools-
The Problem
We have observed that the current design of the TASA website is outdated, overwhelming with information and doesn’t meet user efficiency expectations, which is hard for them to navigate and tend to abandon tasks.
The Solution
We believe that redesigning the website by modernizing the visual elements and text scan ability of the TASA website will allow users to find information without frustration.
Select the number to jump ahead !
THE PROCESS
Research
Analyzing
Ideation
Low Fidelity
Testing
High Fidelity
Insight
We interviewed Webmaster and Director of Volunteers and surveyed 7 people not connected with the TASA and 25 members of TASA and we came up with these 3 major insights.
Organization’s Goals
-
Outreach to new members
-
Interact with current members
-
Modernized the website
-
Get more support
Non-member’s Needs
-
Information about how to become therapy team/ join the team
-
Get the therapy team visits their facilities
-
Grow connection with the communication
TASA member’s Needs
-
Connect with other members
-
Check out the upcoming events
-
Support TASA
User Persona
From our user research, we started empathizing with our users through creating a user persona.
Anita is a 54-year-old retired nurse. Her primary goal is to connect with a local organization so she and her Therapy dog Trusty can volunteer at local facilities. She is not very tech savvy so she needs sites to be easy to navigate. She is also new in town, so she needs help getting connected.
Empathy Map
SAYS
THINKS
DOES
FEELS
-
I want to get involved but I can’t find the information I need
-
I tried to reach out but never received the answer
-
I want to get certified but I cant find our how
-
Is my dog a good candidate?
-
How can I get certified?
-
Where can I find volunteer opportunities?
-
Goes to the website and search for information
-
Look for how to become a therapy team
-
Reaches out to others to get involved
-
Overwhelmed when they can’t find the information
-
Curious about how to get involved
-
Feels fulfilled when they’re able to join and volunteer
Heuristic Evaluation
Competitors Analysis
Therapy Animals SA (local)
Paws For Service (local)
Pet Partners
(national)
Alliance of Therapy Dogs (national)
Design
Membership Pricing Transparency
Account for Members
Donation Flexibility
Easy to Scan
Mobile Compatibility
User Flows
1. Join as a Therapy Team
2. Request a Facility Visit
Card Sorting
We used card sorting method to regroup the topics into a categories that we thought that would be related better, as well as got rid of pages that barely have any information or repeated information that could be found on the homepage in order to have cleaner navigation bar.
Site Map
After performing a card sorting, we reorganized the navigate bar by grouping them into the related topics, and eliminating those links to the inactive pages.
Wireframes
The current website does not have a search bar or a login portal; therefore, we added these elements since the users nowadays heavily reply on it to quickly search for the information they need. We also added the definition of the most 3 common therapy animals so the user can have a better understanding the purpose of TASA and services that they provide. We also moved the Candid Platinum Rating down to the Footer with Proud Chamber SA so it would not stand awkwardly alone in the header.
1. Mobile
-Homepage-
-Join TASA-
-Facility Visits-
-Homepage-
(continuing)
2. Desktop
-Homepage-
-Join TASA-
Usability Testing Plan
Task 1: Find the physical address of the Therapy Animals of San Antonio.
Task 2: There are several ways to become a member of TASA. Find the price to join as a family supporting member.
Task 3: Pretend that you are an elementary teacher and you want to invite a few therapy teams to come visit your classroom. What page would you begin looking for the information you would need?
Results
We got positive results overall. Tasks 2 & 4 had 100% accuracy and users completed goals quickly. Users overall could gauge the 3 main goals of the website based on the redesign.
After several users struggled to distinguish the physical address from the physical address of TASA we added both with icons to the footer to help clarify.
Style Guide
We kept TASA’s colors of Blue and Yellow since those are happy colors for dogs and cats. We used soft pastel gradient palette for the header to make it more modern. We also added several icons related to therapy animals to make the pages more appealing and enjoyable. Most elements are blue and turn yellow or gradient in their hover states. Our goal is to make TASA modern and professional yet still adorable and friendly just like their therapy animals.
High Fidelity
1. Mobile
-Homepage-
-Join TASA page-
2.Desktop
-Homepage-
-Contact Us page-
-Join TASA page-
-Facility Visits page-
Coding
Coding was also a part of the project, each member would code one page of their choice. This was the "Facility Visits" page that I coded:
https://sophiedo162.github.io/UX_UI_HW_19/
Reflection
1. What went well
The Therapy Animals of San Antonio is an amazing project. My team and I did a good job of dividing tasks by each member’s strength. Our communication and constantly giving feedback on each other’s work were the keys to staying on track and producing quality work.
2. What I learned
I learned how to be in the shoes of the users from different perspectives, and empathized with their pain points so I could improve the website to be more user-friendly but still maintain the elements that were important to the stakeholders.
Using the color palette throughout the website is also a key to keeping the design consistent and professional. I also learned that I should always check for color contrast ratio violations to ensure it would be readable for users.
We also explored some new tools and learned how to work under pressure since it took us a while to connect with the stakeholders and get the TASA members to survey to collect the information needed.
3. Next Steps
If I was able to continue on this project, I would develop the calendar of TASA events, made it easy in a fun way for TASA members to learn about the upcoming events because many of them used the website for that purpose.
