A pet registration flow for an animal shelter
Embedded Files
The Product
I wanted to design a responsive site that helps animal lovers adopt, and register a pet easily from an animal shelter.
Project Duration
2/3 Months to complete
The Problem
When conducting research for registering a pet my insights revealed the following. Most owners felt overwhelmed with the information they had to provide to register a pet.
The Goal
The goal was to make the registration process easier, and less time consuming
My Role
UX Research, UX Design,
Responsibilities
Some responsibilities that played a key role in my design process were seeking participants to interview, and Conducting Usability Studies. Also making an information architecture, paper wireframes, digital Lo-fi wireframes, mockups, and a High fidelity Prototype.
Steps I took to understand the user
User research summary
🧳
To better understand what users struggled with in the registration process I sought out animal lovers that I knew. I wanted to better understand where in the registration process users felt most frustrated. After conducting my interviews I found out most users felt overwhelmed with the information they had to provide to register their pet.
User Research: Pain Points
Answering Questions
User were Uncertain how to answer certain questions
Amount of Questions
Some Users felt overwhelmed with the amount of questions they needed to answer
Time Consuming
Users felt the process takes to much time
Information for registration
Users felt unprepared and went to seek in person help
Persona: Emily Elizabeth
Problem Statement
Emily Elizabeth is a full time student Who needs an efficient way to adopt a pet Because she needs to get back to her regular routine to prepare for exams.
User Journey Map
I took notes about the process of registering a pet to better empathize with the user. Mapping the user journey gave me better insight were to improve the process.
Starting the Design
Sitemap
I created a site map to visualize how to structure and design the website. The I.A. helped me focus on the most important screens to craft for my main user flow.
Paper Wire Frames
I designed four different layouts with accessible features I thought the user would like access to. I placed a star next to the features I thought would work best. Then combined the stared items into a polished wireframe.
Screen Size Variations
When considering responsive designs for mobile and tablet devices I adjusted the folowing. I adjusted text and removed topics from the main navigation for the tablet design. I arranged text in a vertical scroll, then included a hamburger menu for navigation in the mobile version.
Digital wireframes
I Made a tab navigation bar so users can navigate directly to what they needed. Then I tried to implement noticeable CTA Buttons to start desired task.
Digital Wire Frame Screen Variations
I considered ways to implement carousels for locations in responsiveness to the designs. Then I replaced two categories in the tab section with “more”. Got rid of text and only left CTA buttons, and titles for mobile responsiveness
Low-Fidelity Prototype
By creating a low-fidelity prototype I was able to determine if my placement of CTA buttons and navigation of tabs helped users Complete the registration process.
“Link to prototype below”
Usability Study Parameters
Study Type
Unmoderated Usability Study
Location
United States Remote
Participants
5
Length
15-20 min
Usability Study Findings
Adopting Pet
User had trouble finding where to start registration
Buttons
Users had trouble locating buttons
User Flow
Had trouble distinguishing where they were in the process
Refining the design
Navigation
Users seemed unsure where they were on the page so I implemented the tabs being highlighted for the current page. I tried to implement darker colors for CTA buttons so users can distinguish the action.
Before
After
Quick Fill
I tried to Include a visual call to action button to scan documents for users to fill forms out more easily.
Before
After
Mock Ups Original Screen Sizes
Screen Size Variations
By following my paper wireframes and placing the items of topics and Call To Action buttons in the order my digital wireframes were represented. I was able to create a Responsive site.
High Fidelity Prototype
For my high-fidelity prototype I implemented changes were the user can distinguish were they were in the tabs section, and placed a quick fill button to take photos of documents to make the registration process easier.
“Link Below”
Accessibility Considerations
1
Tabs for navigation at the top of the screen.so users can easily navigate website
2
Adopt and register has more than one location on site so users can easily access process.
3
For forms I added an action button that allows you to scan forms. so you can easily fill out forms.
Going Forward
Take aways
Impact
Users felt the action button to take pictures of documents for forums was thoughtful. Users also enjoyed the selection of pets for the adoption page. Hopefully, the structure of the site will keep users engaged to complete the registration process.
What I Learned
While conducting interviews I learned users mostly struggled to provide information to register their pets. I also might have focused to much on registering a pet instead of the adoption process. I feel I lost my focus on the real design problem and focused on empathizing with the users I had interviewed. My design thinking started to think of solutions for the registration process instead. I did my best to design the solutions for the persona and pain points I had identified.
Next Steps
1
Updating the UI elements of the designs I felt they still can be improved
2
Improving the registration process. Usually you adopt animals from animal shelters instead of registering them. Creating another empathy map to correct this pain point.
3
Conduct another usability study with another group of users who had adopted pets
Page updated
Google Sites
Report abuse