Responsive website, branding
A Designlab UX Academy capstone project.
00. At a Glance
San Gabriel Valley Humane Society, Designlab
2/20/2018 - 3/5/2018 (2 weeks, 80 hours)
Conduct user research, design, and prototype the UI to showcase as a demo to humane society’s staff.
Responsive website for desktop, tablet, and mobile devices
In-person user interview via Skype, Sketch, Photoshop, InVision, utilized Google Hangouts to conduct usability testing via screen sharing
# of meet & greet scheduled, # of adoption through online
UX Designer: Christine Chan (me), Mentor: Deborah Dennis
San Gabriel Valley Humane Society is a local shelter that provides pet adoption and other shelter services. Its website allows users to browse available pets in the local community and helps pets find a forever home.
My role ranged from being a user researcher to user interface designer in this project. I collaborated with my mentor Deborah Dennis for guidance and presented my work and process during group critique each week. I also contacted a developer that was willing to help develop this project. We are still in discussion with the shelter on the next step of this project.
SGV Humane Society’s current website would benefit from a brand refresh and having a responsive website to increase its online presence.
01. Discovery & Research
I conducted a site audit in order to understand what is positive about their current website and where it is lacking. The current website design has a lot of information without much prioritization and hierarchy. Everything seems to bare the same weight, and does not necessarily guide users to a specific action.
Current San Gabriel Valley Humane Society Webpage
There are a lot of shelters in America and it is definitely a crowded market. I conducted competitor research in order to understand the current market and what competing shelter sites offer.
I compared different features of both local humane society sites and bigger chains such as Petfinder, Paws Like Me, Pasadena and San Diego Humane Society.
- For filter options, I found that bigger chains have more choices such as location, distance, breed, sex, age, color, and size. Smaller local shelters have similar choices except location.
- For pet's profile page, they have similar information but not all gave a personal touch by telling the pet's story.
To gain a deeper insight into what matters when choosing a new pet, I visited the shelter to conduct interviews with the humane society’s customers, humane society staff, and pet adopters.
Being in the environment and speaking with the staff and customers helped me further empathize with users. I interviewed 3 of their staff members and 3 visitors. I have also conducted 2 interviews with general pet owners, one of them has adopted her current dog.
From the organization's perspective:
They want the website to focus on the currently available pets, shelter services, and donation. They also want their visitors to feel excited about adopting animals. They want to match animals with people who have similar personalities & lifestyle and great interactions.
From the potential adopters and pet owners' perspective:
Their main motivation of getting a pet is to have a good companion. They choose adoption to be a way to give back to the community. They rank the pet's personality to be the top characteristic when they consider getting a pet.
02. Define & Ideate
In order to continue understanding my users, I wrote the interviewees’ answers on post-its and organized them into empathy map categories, i.e. seeing, thinking & feeling, hearing, doing, pains, and gains. From there, I gained insights on the users’ behavior and their needs.
I created a persona based on my empathy map insights in order to have a constant reminder of who I’m designing the site for. I drafted two personas - one from the staff perspective, one from adopter's perspective.
To represent the adopters, I created Michelle who is a newly wed, and would like to adopt a dog since she has grown up with one. Bryan represents the staff at the humane society, hoping to let adopters bring the animals home.
Point of View & How Might We
I developed POV and HMW statements using the insights from the persona and empathy map in order to brainstorm ideas of possible features for the website.
Product Road Map
After brainstorming different ideas, I confirmed the goal was to create an engaging experience for the customers that is responsive to all devices. After speaking with my mentor about my research analysis, I drafted my product road map by choosing features from my brainstorm session that I wanted to prioritize by building first.
03. Information Architecture
I developed two main user flows in order to think through what steps and pages a user needs to take to achieve their goals.
- The first task asks the user to save a pet to their favorites and create an account.
- The second task asks the user to log in, retrieve a specific pet from saved pets, and complete adoption process.
I reorganized the site map in order to make it easier for users to find information. Based on their old websites and secondary research, I added resources, how you can help, and log in/sign up pages based on my interview findings.
04. Interaction Design
I prefer starting my wireframing process by sketching on paper so I can quickly run through different options and not get attached to them.
After consulting with my mentor, we have resolved to the resulting design. The design I chose focused on the animals, added resource information, and other content based on my interviews with both the staff and potential adopters. I also added a quiz feature to quickly match users with potential pets that are similar to them.
Based on the low-fidelity sketches, I created mid-fidelity wireframes using Sketch and a prototype using InVision in order to focus on the structure and hierarchy of the website. Below is an example of the home page and pet profile page wireframes.
I decided to understand our product from the customer’s perspective through user tests. I chose to conduct usability testing using the mid-fidelity prototype because it would help users focus on the structure of the website.
I conducted my usability test with people who are similar to my persona: near late 20s and interested in adopting a pet in the future. I had users perform the two main tasks by screen sharing through Google Hangouts so I could observe their comments and flow.
I analyzed my usability test result using an affinity map in order to find out the positive and negative aspects of the design from my prototype.
People love the quiz and want to see it at the very top of the page.
People love how the pet profile page is personalized with emojis and pet diary.
- Adoption process was easy and questions are good.
The quiz is too long and need to be shortened.
Filter choices on homepage are confusing. They would also want to see better filter choices such as breed, age, type of pet, and interactions with kids and other animals as well.
With these results and findings in mind, I moved on to rebranding and creating the high-fidelity designs.
- Shorten the quiz.
- Remove the filters on homepage and focus it on the search result page.
Branding & UI Kit
I rebranded the organization in order to give them a more refreshing look and presentation of the brand. To create a friendly and welcoming brand identity, I chose a warmer color palette.
I sketched out a few logo ideas with the topic of protecting animals in mind. After discussing with my mentor, we chose one that strategically used negative space that looks like two hands holding a dog’s face. For typography, we also chose a cuter and kid-friendly heading and san serif font for body text so it’s easier to read.
After presenting my work to our group critique session and further discussing my usability testing results, I iterated a few more things and here are my final UI designs.
I designed the high fidelity design using Sketch by implementing the brand identity and iterating some of the issues from usability testing in order to create my MVP. I later created a prototype with InVision to present to the humane society staff.
During my initial user research, I realized one of the biggest problems SGV Humane Society has is that their current website is not responsive. I designed a responsive UI for tablet and mobile devices using Sketch in order to make it more accessible for users across different devices.
Homepage Responsive Design
Pet Profile Page Responsive Design
How to measure success?
We can measure success in the following ways:
- Number of new profiles created
- Number of filled online pre-screening forms and meet & greet scheduled online
- Correlation between taking the quiz and adopting at shelter
This project was really fun to work on. Conducting user interviews at the humane society was challenging but also exciting. I was really nervous when I first approached the shelter, but I was able to shake off my nervousness and gained a lot of insights speaking with the staff, managers, and customers. It was interesting to see that both the shelter and adopters' goals aligned in hoping to have good interaction with the pets, and how the quiz I created helped enhance the process of matching pets to people
Two weeks (80 hours) were not enough time to design all the pages and frames of the website, but I believe I have created a really good start. The next step of the project would be continue working with SGV Humane Society staff to develop this website.