About
After fostering, working, and volunteering at the Louisiana SPCA, I saw, despite our programs in place to help, that there had to be a more direct way to reach the demographic that specifically wants to adopt at risk animals. This sparked my desire to fix the UX problem all shelters struggle with: how might we efficiently connect these types of adopters with these types of animals?
Fun Fact
This project was inspired by the Louisiana SPCA’s Underdogs! program.
What I Did
Designing an app inspired by a UX dilemma I noticed in my personal life, I researched key demographics through interviews and observational testing. I also created persona profiles, wireframes, and an interactive prototype.
My Process
Step 1
Researching required studying competitors and user bases, utilizing category brainstorming, conducting user testing, and fleshing out personas.
Step 2
Wireframing the contradictory elements of the app’s direction (offer detailed customization and make it simple to navigate) took plenty of doing, re-evaluating, and redoing.
Step 3
Prototyping mockups required an attention to detail regarding inviting aesthetics as much as clarity of steps users need to take to navigate the app.
It all starts with tiny squares of neon
PICTURED: In order for Underdogs to save lives, I knew figuring out critical user needs was the first step. Starting an app concept from scratch led me to pursue ideas for initial feature needs and critiques by studying and comparing other related apps. The blurbs on these sticky notes came from my experiences, observations, and interviews with coworkers and friends.
User Research
Observing my coworkers use of competitor sites, I saw hiccups in the UX aspects within them. This led me to interviewing, observing, and testing individuals who would find use in an app like Underdogs.
Simple design doesn’t always mean intuitive
PICTURED: Current online adoption tools don’t feel personal or intuitive enough in comparison to the task they are helping users accomplish. This impacts the adoption numbers they’re capable of having, which leaves users and animals wanting for something better. Here I show how I used my observations of a coworker’s use of a competitor site (Left) and my own initial exploration of a competitor app (Right) to gain insight on what needs to be at the top of the priority list for feature requirements.
Persona Creation
Part of the complexity of this project is making an app that serves an employee user and an adopter user. Compared to other apps, Underdogs has a heightened requirement to especially be a space for both types of users. Keeping open the line of communication between them, directly and indirectly, in app and off app, with some additional user-specific needs thrown in was imperative. Both user types deserve to feel like they are important enough to be equal priority.. The app depends on employees enjoying the app enough to use it regularly just as much as it depends on adopters using it to find their perfect match.
Working in the shelter environment allowed me to spend time with plenty of Daring Danielas and Caring Callies. There’s inevitably a bit of myself in both of them, because I’m naturally part of the target audiences. The people I worked with and the friends I’ve surrounded myself with share these same qualities as well. We’re all comfortable using tech and social media, tend to look to tech for solving problems, and hold a shared desire to make a difference in the world.
Wireframes + Prototype
Wireframes are the skeleton of digital product design. The same is the case with Underdogs. Using sketched wireframes allowed me to rapidly hash out various ideas, saving time, while helping me get closer to the *ultimate* idea than I ever could without them.
Wireframe Generation
PICTURED: The detailed nature of this project made it difficult for me to refrain from getting overwhelmed when trying to break down the project’s complexities into rough outlines. I decided sketched wireframes would be the most efficient method, as they would feel less intimidating, and most importantly offer more flexibility for ideas to strike. I kept my findings and user needs handy during the process so I could generate design sketches users would want, not designs I thought they should want.
Prototype Creation
PICTURED: Taking my wireframes from paper to Adobe XD, I started by setting up the best of the primary user story frames: the happy path from signing up to reaching out about a pup. Once that felt solid, I got to work on the design decisions, making a mood board for the general design while determining other stylistic decisions like typefaces, color palette, button design, and more. I applied the styling to the prototype, made further adjustments to the frames, and eventually added some other user paths to flesh things out.
Final Thoughts
Ultimately, getting to the interactive prototype stage in the process as a one man team was difficult, but gratifying, and it’s taught me how much work goes into making sure the products we put out truly exemplify user needs. While what I’ve dreamed up, researched, and executed does work towards finding a solution for users, I truly believe teamwork is what it takes to come up with the ultimate final solution to any project. I love the dynamic that comes about when everyone is creating and thinking up something together. Double the ideas, double the winners. It’s my favorite part of being a creative.
2020 Update: In my interactive prototype, I have added comments regarding accessibility blunders I made when designing Underdogs. When I initially created the Underdogs project, I didn’t yet know how to design for accessibility, or even that it was something I needed to learn. I figured instead of updating the prototype to meet these standards, it might be more helpful to show where I went wrong so other people can learn as well.