HSSV Case Study | Ux Design Portfolio

Humane Society Silicon Valley

Project Type:

Webpage Redesign

My Role:

Get ready to embark on a journey of compassion, joy, and endless love. Embrace the future of pet adoption with Humane Society Silicon Valley's extraordinary website redesign – a place where dreams come true for both pets and their devoted parents.

UX Researcher, UX Designer, UI Designer

Tools Used:

Pen and Paper, Google Suite, Figma, Affinity Designer

As part of a class project, we were tasked with the duty of partnering with a real nonprofit organization to create a responsive web redesign of their existing site. I, along with my four teammates decided on the Humane Society Silicon Valley as we have a shared love for animals.

As a team, our goal was to create a user flow that clearly defined each path, leading to higher user satisfaction, as well as design a website that correctly matched the personality of the non-profit. As a UX Designer, my responsibilities were creating prototypes based on our user research, conducting user testing to ensure we met the needs of the consumer, meet with the stakeholder to confirm that the business requirements are being fulfilled.

Research

During our stakeholder interview, they informed us of three important uses of their website. Users typically use their website to look for available animals for adoption. This is followed by their medical services such as vaccines or spay & neutering. An issue that they are facing is that there is a huge number of returned animals, so having more resources shown on their front page that are relevant to the needs of owners. Lastly, as they are a non profit, providing a clearer sense of how donations impact their shelter.

To effectively understand how comprehensive of a redesign HSSSV needed, we completed a UX audit of the existing website to find areas in need of improvements. We used our findings to formulate a series of tasks we would then have a small testing group complete to determine the rank of priority.

"I probably check my phone too much. I stop to pick a better song or look at texts, which distracts me from actually doing the workout."

Allie

"I do a lot of solo work outs so music is a huge factor when keeping myself motivated and on pace."

Keiko

"If your training hard and a bad song comes on it takes you out of the zone."

Aiden

"Music helps me drive myself forward towards accomplishing my goals. It's an encouragement to work harder"

Michael

The current HSSV website is confusing to navigate because there is no clear hierarchy to the information and many resource links are not directly relevant to the pages they are on. How might we make resources on the website easy to find and navigate? A heuristic evaluation of key pages for our user flow revealed opportunities for improvement. The main menu is unorganized and the options have unclear naming, the pages are cluttered and have poor formatting. There are also many inconsistencies in color choices and typography and a lack of overall uniformity in displayed information. You can see an example of this on the pet listings page. Most of these problematic areas were confirmed during our user testing.

[Section Title]

Using these findings, we developed a user persona to encapsulate the common frustrations and goals of our audience. This persona became the cornerstone of our design process, guiding us to empathize with user needs and refine our solutions. ANTHEM’s mission is clear: to deliver a seamless music experience that eliminates distractions and empowers users to stay in the zone.

Define

To take a look how competing brands are aiming to assist users, we took a look at both competitors and competition. For direct competitor analysis, we looked at other animal shelters such as San Francisco SPCA and the San Jose Animal Care Center. Their websites have a well-organized and comprehensive main navigation and informative and easy to read-at-a-glance pet card profiles. However, the application process isn’t as streamlined and there is no information on volunteer opportunities and donations!

Our indirect competitor is Petco. Petco site has informative images that don’t require reading the text to understand them, and categories that are relevant to the type of pet before selecting specific services. Their main weakness is that they’re a store, so most people aren’t looking to their website for adopting animals, although they provide most of the same services.

User Flows

Building on the insights from our research, we paired user flows with user stories to define how users would interact with the app. This structured approach allowed us to map intuitive, efficient pathways that cater to specific user needs, forming the backbone of ANTHEM’s design.

Quick Start Workout:

As a user who doesn't have a lot of free time to build my own music playlists, I want a quick way to get my workout started so I can get going as soon as I arrive to the gym.

Plan A Workout:

As a user who enjoys various physical activities, I want to be able to have custom workout plans with different types of music paired to them.

Create A Playlist:

As a user who enjoys exploring new music in my free time, I want to be able to incorporate all of my new findings into my workouts.

These scenarios guided us in crafting streamlined, distraction-free workflows to ensure users can easily achieve their goals, whether starting quickly, planning ahead, or personalizing their experience.

Ideate

With a clear understanding of user needs and flows, we began translating our concepts into visual designs. Our goal was to design interfaces that felt familiar to music app users, reducing the learning curve while maintaining simplicity. Each screen was crafted to balance functionality and ease of use, allowing users to quickly set up and dive into their workouts.

We started with sketches to visualize the core structure, focusing on intuitive layouts and user-friendly navigation. These evolved into low-fidelity wireframes, where we prioritized functionality, removed dead ends, and ensured a smooth user testing process. This iterative approach allowed us to refine the app’s flow before moving into high-fidelity designs.

Validate

User Testing Plan

To ensure ANTHEM met its goals, we conducted one-on-one user tests to evaluate the app’s usability and effectiveness in achieving its key performance indicators (KPIs). These tests were centered around four critical questions:

Does the app reduce time spent on the phone during workouts?
Is the playlist-making process simpler?
Does the app motivate users to work out?
Do the features positively impact workout habits?

Key Findings and Adjustments

Refining Quick Start Functionality

One early challenge was confusion surrounding the “Quick Start Workout” button. Sixty percent of users were unclear about its purpose and how it differed from the “Workouts” option.

To address this, we overhauled the functionality:

The “Quick Start Workout” button and the Start Workout screen were removed entirely.
Quick-start functionality was integrated into all workout plans, which now provide a detailed breakdown of associated exercises.

These changes simplified navigation, and in subsequent testing, 100% of users completed tasks with ease. Users appreciated added features, like the ability to customize the length of each workout phase, making workouts feel more tailored to their needs.

Enhancing Workout Plan Customization

Users questioned how they could differentiate between multiple workout plans or browse options within categories like cardio. In response, we introduced exercise tags for each workout plan. These tags allow users to filter and select plans based on specific activities, making customization intuitive and the selection process quicker.

Our initial design included a BPM toggle to dynamically queue songs, but feedback highlighted its redundancy as a separate step. After reconsidering its purpose, we reworked the feature:

Dynamic song queuing now operates by default, paired with the shuffle toggle in the “Now Playing” screen.
This streamlined experience ensures that users enjoy seamless transitions without unnecessary setup steps.

Simplifying Playlist Creation

While 60% of users successfully created playlists without help, several struggled to locate the save button. Some found the icon unfamiliar, while others misinterpreted its function.

To resolve this, we updated the save icon to a classic floppy disk, a universally recognized symbol. When editing playlists, the icon toggles to a pencil, ensuring users interact with the same interface element for both saving and editing tasks. These changes improved usability and aligned with user expectations, reducing friction in playlist creation.

Visual Design: Bold and Energizing

Red and black were chosen as the feature colors, imbuing the app with a fast, iconic, and energetic vibe. Red, often associated with strength, energy, and passion, is a motivational color frequently seen in the sports industry. It was paired with black, a grounding and sleek tone, to create a dynamic yet focused aesthetic. These colors encourage users to push themselves and foster a sense of empowerment.

The logo seamlessly integrates headphones, a dumbbell, and heart rate monitor waves, two symbols that embody ANTHEM’s core values of fitness, music, and personalization.

The high-fidelity wireframes brought together the streamlined user flows developed during earlier phases. Consistency was maintained through reusable components, ensuring an intuitive and cohesive experience across the app.

Final Iteration

The app opens with a visually engaging splash page, setting the tone for ANTHEM’s energetic branding. The onboarding process highlights the app’s core features, giving new users a clear understanding of how ANTHEM enhances workouts.

We prioritized simplicity for users who want to start a workout with minimal effort. The Quick Start Workout feature allows users to get music playing within two taps from the home page, delivering an effortless experience.

The Workout Plans feature offers a tailored approach to exercise, giving users control over:

Workout types (e.g., running, weights, cycling).
Intensity preferences.
Duration of workout phases.
Specific playlists synced to their activity.

This bespoke experience ensures users stay focused and motivated, turning workouts into fully immersive sessions.

The Playlists menu empowers users to manage and discover music in new ways:

Create or import personal playlists.
Explore public playlists shared by other users.
Discover app-generated playlists that match workout preferences.

By integrating discovery with customization, ANTHEM becomes not just a tool but a source of musical inspiration.

Splash Page and Onboarding

Quick Start Workout

Workout Plans

Playlists

Reflections & Future Opportunities

As the ANTHEM project comes to a close, it provides an invaluable opportunity to reflect on lessons learned and envision paths for future growth. This project was not only a creative challenge but also a stepping stone in my UX journey, revealing the intricate balance between user needs, design efficiency, and business considerations.

Successes: Building a Foundation of Consistency
One of the most rewarding takeaways was mastering the incorporation of components into wireframes. Centralizing assets brought both speed and consistency to the design process, allowing for seamless updates across all pages. This approach not only streamlined revisions but also reinforced the polished, unified feel of ANTHEM's interface—a crucial element for user trust and satisfaction.

Opportunities for Growth: Striking the Right Balance
Throughout the testing phases, I grappled with designing user paths that felt “just right.” At times, the choices were too numerous, leaving users overwhelmed; at other points, they felt restricted. Moving forward, I aim to deepen my understanding of how to balance freedom and guidance, creating experiences that empower users without burdening them with unnecessary complexity.

Another area for growth is expanding my expertise in advanced design tools. While I utilized Figma and Affinity Designer effectively during this project, diving deeper into these and other tools could unlock even more creative possibilities and efficiencies.

Future Directions: Imagining What’s Next for ANTHEM

Integration as a Spotify Feature
If ANTHEM were to evolve, my first step would be to reimagine it as a feature within an existing brand like Spotify. By adapting ANTHEM’s user flows to fit within Spotify's existing UI, the app could leverage an established platform while reaching a broader audience. This integration would also eliminate the need for users to juggle multiple apps, further aligning with ANTHEM’s goal of reducing distractions.
Continued Research and Feature Expansion
User needs are constantly evolving, and ANTHEM’s growth would depend on staying ahead of these changes. Conducting additional research would uncover emerging trends and untapped opportunities. For example, exploring features like AI-generated workout playlists, gamification elements, or integration with wearable devices could further enhance ANTHEM’s value.
Exploring Monetization Strategies
To bring ANTHEM to market, determining a sustainable revenue model is essential. Conducting market research to identify the ideal subscription rate or exploring alternative monetization methods—such as premium features or partnerships with fitness brands—would ensure the product’s long-term viability.

Conclusion

The ANTHEM project exemplifies the dynamic nature of UX design: a balance of creativity, user empathy, and practicality. It challenged me to think holistically, from understanding user pain points to refining visual details. As I look ahead, the lessons from this project inspire me to continue growing as a designer, embracing new challenges, and always striving to create experiences that truly resonate with users.

Cover images generated by Midjourney AI and Unsplashed

Onboarding clipart created by Alraun from Shutterstock

Workout vector images created by Hey Rabbit from the Noun Project