Connecting Hearts and Paws: Upgrading Our Website for Impact
Redefining Access to Live Music
Competitive Analysis
We conducted a competitive analysis on both animal shelters and rescue websites that share the common goal of saving dogs from euthanasia and abuse. This helped us recognize areas for improvement and gain inspiration.
With a mission to rescue and rehabilitate at-risk animals, SDAS aims to...
Redesign the website for better navigation to showcase adoptable pets
Develop a strong brand identity with a polished logo and consistent branding
Improve marketing through content & social media to increase adoptions & donors
how we started
Low Fidelity
Our priorities were to use unnecessary white space, address specific user pain points (like fostering vs. adopting), develop a sort and filter solution, and add more testimonials and statistics.
from confusion to clarity
Key Findings & Improvements
Qualitative Data
Quantitative Data
Our usability testing process used three key components: pre-test questions to understand the user's initial impressions, scenario tasks to observe users navigating key site sections and post-test questions after interacting with the high-fidelity prototype to capture feedback on their overall experience.
This combination of qualitative feedback and quantitative data directly informed key improvements for an optimal user experience.
Navigation: During testing, some site navigation like the sort/filter bar was difficult to find or use.
Branding: Per the client's request, we will remove the phone number from the Contact page. To better communicate their nonprofit status, their 501(c)(3) number will be added to the footer.
Visuals: The volunteering page photos will be updated to feature relevant images showcasing dogs and other animals.
Findings from Usability Testing:
FINDING OUR NPO'S BRANDING IDENTITY!
How we rehauled branding, refined tone, and refreshed marketing
To foster a sense of warmth and playfulness, we’ve introduced custom illustrations that infuse the site with fun and friendliness!
We opted for Plus Jakarta Sans, a modern typeface that perfectly balances legibility and approachability.
Our logo design is meant to look like a scout patch which pays homage to the spirit of scouts—for boys, girls and everybody in between—symbolizing the duty and achievements of caring for your community (in this case rescuing dogs in need).
Before
After
As Instagram has become the primary platform where users engage with and learn about SDAS, we focused our social media strategy here. Tailoring content for Instagram will also showcase SDAS on their linked Facebook, expanding reach.
Following a style guide similar to the website’s colors, we created templates for both posts and stories for SDAS to have consistent branding on their Instagram page, using Canva as the platform as it is the most accessible to them. SDAS expressed that they wanted their branding to be beach-like, bright, and fun, so we kept that in mind when creating the marketing materials.
Before
After
final screens
Page Spotlights
The following pages showcase each tab of the website, and how we improved it from the original based on two rounds of usability testing, optimal user experience, and a new information architecture.
We used Squarespace to redesign the website prototype and then implemented changes to align the live site with the prototype design. Squarespace's limitations required customization. We added CSS and JavaScript code to match padding, margins, button styles, fonts, and other elements to the prototype. To enable easy future dog profile additions, we created templates for the non-profit organization to use.
An interactive "Happy Tails" carousel and an Instagram gallery keep the community informed
About
We created an easy-to-use sort and filter bar, clearly differentiated between adopting and fostering.
Adopt/Foster
We made profiles internal instead of linking to Petfinder and included FAQs about the adoption/fostering process
Pet Profiles
We placed the donate button directly on the banner, explained how donations help the sanctuary
Donate
ROLE
UX Designer
Marketing Strategist
2 Designers
1 UX Researcher
2 Marketing Strategists
5 Designers
5 Designers
UI/UX Designer
team
team
team
Marketing Strategist
UI/UX Designer
10 Weeks
Figma
Figjam
Canva
Figma
Google Forms
role
role
role
Timeline
Timeline
tools
tools
User research
User research
Empathize with Users
Brainstorming Process
We conducted 11 unstructured user interviews and observed interactions with the original website. We documented users' thoughts, actions, and reactions on a Mind Map to explore trends and patterns.
We then conducted an online survey to understand the following questions:
How do people currently connect with others before, during, and after concerts?
What are the primary barriers that prevent people from attending live concerts?
What platforms do people use to engage with others for concert experience?
We started writing out the big ideas/topics and came up with related scenarios to further narrow down the topics. We then voted on different ideas and reframed the idea/topic after which eventually narrowed down to a livestreaming concert platform.
Overview
Overview
San Diego Animal Sanctuary (SDAS) is a new 501(c)(3) non-profit animal rescue and sanctuary founded in 2021 and located in San Diego, California. As a volunteer-run organization, SDAS is dedicated to rescuing dogs and other animals facing euthanasia, homelessness, neglect, or abuse.During the summer of 2023, I participated in UP-Grade, an innovative initiative run by Design Co at UCSD. This 10-week summer program pairs students with local nonprofit organizations, offering a unique opportunity to enhance these organizations' branding and increase their community visibility.
As part of COGS 123: Social Computing, a course exploring the intersection of social behavior and computational systems, I collaborated on a project to design Music Hive, a virtual platform that reimagines the social concert experience. Drawing from insights into how technology connects people across platforms like Instagram, TikTok, and crowdsourcing communities, we set out to make live music events more accessible, immersive, and community-driven. Music Hive aims to bring the excitement of concerts to everyone, whether attending in person or engaging online, fostering a deeper connection between music lovers through innovative social computing principles.
As part of COGS 123: Social Computing, a course exploring the intersection of social behavior and computational systems, I collaborated on a project to design Music Hive, a virtual platform that reimagines the social concert experience. Drawing from insights into how technology connects people across platforms like Instagram, TikTok, and crowdsourcing communities, we set out to make live music events more accessible, immersive, and community-driven. Music Hive aims to bring the excitement of concerts to everyone, whether attending in person or engaging online, fostering a deeper connection between music lovers through innovative social computing principles.
The site falls short in effectively showcasing adoptable dogs and clearly conveying our brand and mission. Its navigation proves difficult for adopters, fosters, donors, and volunteers alike. How might we revitalize our digital presence to attract more adopters, boost donations, and build a thriving support network for the vulnerable dogs in our care?
Redefining Access to Live Music
Empathize with Others
The problem
The problem
Live concerts offer unique joy and connection, but many fans face barriers such as high costs, geographic constraints, and limited physical accessibility, preventing them from experiencing these events firsthand. How might we create a seamless and engaging concert experience to facilitate social interactions between concert-goers?
Music Hive
We conducted 11 unstructured user interviews and observed interactions with the original website. We documented users' thoughts, actions, and reactions on a Mind Map to explore trends and patterns.
Competitive Analysis
How we started
Our priorities were to use unnecessary white space, address specific user pain points (like fostering vs. adopting), develop a sort and filter solution, and add more testimonials and statistics.
Low Fidelity
We added structure and templates for future high-fidelity prototypes, ensured clear navigation, distinguished segments using gray and white, and included additional pages. This included the Adopt/Foster page and three profile variations.
Mid Fidelity
Highlighting main user flows: Navigating through each tab through nav bar & buttons Sort & filter bar → Picking out dog to adopt/foster → Reading through adopting/fostering FAQ
High Fidelity
from confusion to clarity
Our usability testing process used three key components: pre-test questions to understand the user's initial impressions, scenario tasks to observe users navigating key site sections and post-test questions after interacting with the high-fidelity prototype to capture feedback on their overall experience.
This combination of qualitative feedback and quantitative data directly informed key improvements for an optimal user experience.
Key Findings & Improvements
Qualitative Data
Quantitative Data
Findings from Usability Testing:
Navigation: During testing, some site navigation like the sort/filter bar was difficult to find or use.
Branding: Per the client's request, we will remove the phone number from the Contact page. To better communicate their nonprofit status, their 501(c)(3) number will be added to the footer.
Visuals: The volunteering page photos will be updated to feature relevant images showcasing dogs and other animals.
from ruff to fluff!
To foster a sense of warmth and playfulness, we’ve introduced custom illustrations that infuse the site with fun and friendliness! We opted for Plus Jakarta Sans, a modern typeface that perfectly balances legibility and approachability. Our logo design is meant to look like a scout patch which pays homage to the spirit of scouts—for boys, girls and everybody in between—symbolizing the duty and achievements of caring for your community (in this case rescuing dogs in need).
How we rehauled branding, refined tone, and refreshed marketing
Before
After
Following a style guide similar to the website’s colors, we created templates for both posts and stories for SDAS to have consistent branding on their Instagram page, using Canva as the platform as it is the most accessible to them. SDAS expressed that they wanted their branding to be beach-like, bright, and fun, so we kept that in mind when creating the marketing materials.
Before
After
final screens
final screens
The following pages showcase each tab of the website, and how we improved it from the original based on two rounds of usability testing, optimal user experience, and a new information architecture.
We used Squarespace to redesign the website prototype and then implemented changes to align the live site with the prototype design. Squarespace's limitations required customization. We added CSS and JavaScript code to match padding, margins, button styles, fonts, and other elements to the prototype. To enable easy future dog profile additions, we created templates for the non-profit organization to use.
Page Spotlights
About
Adopt/Foster
Pet Profiles
Donate
Made it to the end? Dive into my next project to see more!
Balancing Professionalism & Fun
One of the biggest challenges I faced was finding a color palette that could bring out the best of both worlds—the professionalism needed for the website and the playful energy for Instagram. It was a fine line to walk, and I couldn’t do it alone. I worked closely with the Marketing Strategists, Visual Designer, and UX Designer, bouncing ideas off each other, pushing for the right balance, and, honestly, compromising when we had to. It taught me so much about collaboration and how each person's input can help bring a shared vision to life.
Navigating Inconsistent Communication with Stakeholders
One thing I’ve learned is that communication with stakeholders isn’t always smooth or timely. There were times when I didn’t have the information I needed, yet the clock was still ticking. I had to find ways to move forward—making the best possible deliverable with what I had and trusting my instincts. It wasn’t always easy, but it taught me the importance of adaptability and staying focused on the end goal, even when things don’t go as planned.
My first time designing in a "real-life" setting.
thanks for reading!
thanks for reading!
Music Hive
Balancing Professionalism & Fun
One of the biggest challenges I faced was finding a color palette that could bring out the best of both worlds—the professionalism needed for the website and the playful energy for Instagram. It was a fine line to walk, and I couldn’t do it alone. I worked closely with the Marketing Strategists, Visual Designer, and UX Designer, bouncing ideas off each other, pushing for the right balance, and, honestly, compromising when we had to. It taught me so much about collaboration and how each person's input can help bring a shared vision to life.
Navigating Inconsistent Communication with Stakeholders
One thing I’ve learned is that communication with stakeholders isn’t always smooth or timely. There were times when I didn’t have the information I needed, yet the clock was still ticking. I had to find ways to move forward—making the best possible deliverable with what I had and trusting my instincts. It wasn’t always easy, but it taught me the importance of adaptability and staying focused on the end goal, even when things don’t go as planned.
Being Open to Endless Possibilities!
It’s natural to feel invested in well-developed design solutions, but receiving feedback requires taking a step back to reassess. Revisiting the ideation phase and exploring alternative approaches is essential to ensure the final outcome aligns with user needs and project goals.
My first time designing in a "real-life" setting.
Embracing Feedback and Exploring New Ideas
thanks for reading!
Made it to the end? Dive into my next project to see more!
thanks for reading!
thanks for reading!
Made it to the end? Dive into my next project to see more!
Mid Fidelity
We added structure and templates for future high-fidelity prototypes, ensured clear navigation, distinguished segments using gray and white, and included additional pages. This included the Adopt/Foster page and three profile variations.
High Fidelity
Highlighting main user flows: Navigating through each tab through nav bar & buttons Sort & filter bar → Picking out dog to adopt/foster → Reading through adopting/fostering FAQ
Competitive Analysis
One of the main platforms dominating the live music and entertainment space is Ticketmaster: a widely recognized, functional system for purchasing event tickets and accessing occasional live-streamed performances. However, analyzing competitors like Ticketmaster revealed a common trend—companies prioritize operational efficiency and ticket sales over creating a truly immersive, engaging experience for users.
Each team member contributed by creating individual sketches that represented their vision for the ideal social concert experience. These sketches served as a foundation for brainstorming and ensured that our final design would reflect a well-rounded understanding of user needs and expectations.
how we started
Design Process
Low Fidelity
To create an engaging experience for new users, I focused on designing the onboarding flow for Music Hive. Inspired by the vibe of jumping into a music session, the goal was to make the process feel personalized. Our team concentrated on three key pages:
Splash Screen: A welcoming first impression with the app's branding and aesthetic, setting the tone for the experience.
Preference Selection: Allowing users to customize their experience by selecting favorite genres, artists, and concert habits.
Subscription Page: Introducing optional upgrades to enhance the user experience and unlock exclusive features.
final screens
Putting It All Together
In the high-fidelity stage of Music Hive, I designed a polished and immersive experience to bring the app to life. Starting with the onboarding flow, I created a sleek loading screen to introduce users to the app's branding, followed by visually dynamic background sliders that highlight the app's core purpose.
To enhance personalization, I developed a profile photo upload feature, allowing users to easily customize their profiles. I also designed interactive screens for users to select their favorite music genres and artists, incorporating visually engaging sliders and selection tools to make the process intuitive. Additionally, I designed a subscription page that clearly outlines tiered membership options, detailing the benefits of each plan, such as access to exclusive content and enhanced features.
For the community feed, I focused on creating a social hub where users can discover and interact with concert-related posts, follow other music enthusiasts, and engage with trending content.
Design systems
Designing our App's Branding Identity
For the branding identity of Music Hive, I focused on selecting the typography and color palette to create a cohesive and engaging visual experience. I chose the vibrant highlight colors of purple and pink to evoke creativity, energy, and excitement—emotions that align with the dynamic nature of live music and social connection. For typography, I selected the Figtree font for its clean design. Its varying weights, from Light to Bold, allow for a clear visual hierarchy, ensuring users can easily navigate through the app while maintaining a polished, professional look.
final screens
final screens
Page Spotlights
Artist and Genre Selection (Personalization)
Social Interactions
Concert Discovery (Upcoming and Live Concerts)
demonstrates how the app tailors the experience to user preferences, helping fans feel connected to their favorite music
the social aspect of connecting with fellow fans through posts, comments, and group chats
providing users with a centralized hub to explore current, upcoming, and past concerts
