ROLE:
UX Designer, UI Designer, UX Researcher
TIMELINE:
1-month start to finish
THE PRODUCT:
Adopt-A-Pet Fenton has one location in Fenton, MI. They work hard to rehome cats and dogs in Genesee/Oakland County. They ensure necessary medical attention for their rescues and rehome to responsible owners.
THE PROBLEM:
The current website doesn’t have a responsive layout or a mobile app. Users reported issues with animal rescues including: communication, difficulty filling out the applications for adoption, and understanding the dogs’ personalities.
THE GOAL:
The Adopt-A-Pet website redesign will make it more responsive, create an app and simplify the pet adoption process.
Current website:
RESEARCH:
Summary:
I conducted interviews and empathy maps to understand the users I’m designing for and their needs. The primary user groups were identified as men and women ages 24 to 45+ years old.
5 participants participated in an individual interview and moderated study. A competitive audit was also completed during the research phase.
This user group confirmed initial assumptions about the need for simplicity while using the site for seamless communication. They also expressed additional concerns about understanding the animals’ personalities and filling out the applications.
DEFINE:
🗺️Aggregated Empathy Map:
☹️User's Pain Points:
Communication - Users have experienced difficulty with communication with staff and foster parents
Online Applications - Users want a simple way to fill out and submit applications for fostering and adoption
Accurate Personality Descriptions - Users want accurate and easy-to-read personality descriptions.
👤Persona:
Using the results of secondary research and the interviews, I created a persona that consisted of two members: Sally & Chris.
❗Problem statement:
Sally is a full-time nurse who needs an easier way to communicate with staff at the rescue.
❗Problem statement:
Chris is a full-time electrician who needs an easier way to fill out applications and understand the dogs personality.
🗺️User journey map:
Mapping Sally’s user journey revealed how helpful it would be to keep the process fast and efficient.
DESIGN:
📃Paper wireframe: Taking the time to draft iterations on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized the shopping page (our pets) on the homepage for easy browsing.
💻Digital wireframe: As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Low-fidelity prototype - The low-fidelity prototype connected the primary user flow for browsing available pets, so the prototype could be used in a usability study.
>>View Adopt-A-Pet Lo-Fi prototype upon request.
📗Usability study findings:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings:
Changing verbiage of buttons - Users struggled with the flow due to the lack of detail on the buttons.
Making the navigation bar stand out - Not all users understood the universal hamburger menu. I changed the color to make the menu stand out and added orange to the navigation tab.
Reduce subjectivity in care requirements - Include descriptions that give specific quantitative measures for breed energy level, playfulness, affection, exercise, training, and grooming requirements. This is difficult for many pets up for adoption because of their mixed ancestry. In the case of mixed breeds, I have provided the most stringent care requirements.
TEST:
Early designs confused users, but after the usability studies, I changed the verbiage to be more detailed so users understood the user flow.
The usability study revealed frustrations with the ‘universal’ hamburger menu. After adding color to the hamburger menu and navigation bar at the bottom of the app, it helped draw attention to the menus.
High-fidelity prototype - The final high-fidelity prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
>>View the Cased Hi-Fi prototype here.
♿Accessibility considerations:
Provided access to users who are visually impaired by adding alt text to images for screen readers
Used icons to help make navigation easier
Used high-contrast colors to ensure easy readability
CONCLUSION:
THE IMPACT:
Our target users shared that the design was visually pleasing and reflected the user’s need for simplistic, easy-to-use designs.
WHAT I LEARNED:
While designing the Adopt-A-Pet website, I learned that even a small design change can have a huge impact on the user experience. Usability studies and peer feedback influenced each iteration of the website’s design, which is mandatory to address the real needs of our users.
NEXT STEPS:
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed
Conduct more user research to determine any new areas of need
**This case study is based on a real website/company**