Concept Project
Westside German Shepherd Rescue Website Revamp
Overview
Team: June Jung, Anthony Toledo, Ana Silva
Roles and Responsibilities: UX research and design, Visual design
Duration: 2 week sprint
Tools: Figma, Photoshop, Google Drive, Trello
Three birds, one stone
Can an organization be sustained entirely by donations capture enough attention to raise funds? Westside German Shepherds Rescue is a non-profit, no-ill shelter located in the heart of Los Angeles with a mission to save and rehome dogs through donations and volunteers. Even though they have a fantastic social media presence, their website could use a little help to draw the attention of the users to maximize its efficiency in three key areas: Adoption, Donations, and Volunteer works.
The Problem
Unfortunately, the layout of the current website is outdated and many users did not know where to find the information needed to proceed with the adoption process and had a difficult time completing important tasks such as making donations and applying for volunteer opportunities.
Incorporate hierarchy throughout the site
When we conducted heuristic evaluation, we were able to identify some opportunities for improvement. There was an overall lack of visibility for call to action buttons. The buttons were too small to establish hierarchy and oftentimes, designed with the same manner as other images within the text, making it difficult for the user to spot them. The website had no search bar or a filter option for the users to quickly browse and find the information they are looking for. This led to adding more to the user’s cognitive load by forcing the user to scroll endlessly through the web pages reading from text to more text, paragraphs to paragraphs, images to more images. Inconsistent branding such as color palette, typography, and design system was also noted.
What are some of the pain points?
Now that we’ve completed the heuristic evaluation with a team of UI/UX experts, we wanted to hear from the users. Where do our users spend most of their time when they look for a dog to adopt? Who are our competitors? What are their pain points? We sent out the general survey to 13 users and conducted 3 user interviews with people who have adopted a pet in the last two years to find out.
How transparency of information affects user satisfaction
The adoption experience for most people was either amazing or terrible. There was no in between. Hmm, interesting, right? After a few more questions, it seemed that a big part of the user satisfaction depended on the transparency of information. Whether it’s about the adoption process itself or a dog’s medical history, when a user felt that they were lied to, their experience turned to a horror story fast. In order to reflect the users’ concerns regarding the adoption process and information search, we needed to scratch the existing layout and build from scratch. The current website did not have a clear guideline for the application process and it was very difficult to read about each dog they had available at the shelter. But, more on that later.
Desktop website is the winner when people are serious about adopting
As we collect more data from the general surveys and interviews, another thing that we noted was some of the competitors.
We took a closer look at our competitors to learn more about the best design practices for animal adoption agencies. These are the competitors we studied to see how they increase readability through hierarchy and solve some of the problems that came up during our user interviews.
Here are websites our users used in the past to adopt their dogs
We decided to take a closer look at them and see what is successful and what can be improved upon and apply those learnings to our design. Here are just a few key insights from the competitive and comparative analysis that we incorporated in our final design.
Using a card format to display and list available dogs seems to be a popular choice. It is an already-established common design pattern that users are familiar with.
Best Friends does a great job highlighting donation CTA (call to action) with bold color and contrast. They also have a pre-determined amount for donations to make it easier for the user to make a quick decision.
This is another great example of the usage of colors for multiple CTAs and employing hierarchy.
Hypothesis
If we reduce the cognitive load by establishing hierarchy within the website and simplifying the user flow, the user should be able to easily complete any one of the three key tasks: adopt, donate, and volunteer.
Breaking down big wall of text into small, digestible pieces
Put all the pieces together into the lo-fi wireframes
I highlighted three call to actions at the top of the page for establish some hierarchy and giving them better visibility. Echoing the findings from the user interviews and research, I included Our Impact on the front page and included information about the adoption process, on-site screening, and adoption fees so the user does not have to scroll mindlessly to find the information. For the adoption page, I created a dedicated page to read more about each of the dog’s medical history by adding a section in the dog’s profile page to contain information including but not limited to gender, whether it is neutered or spayed, age, and any medical history or genetic history. I also added an About Us page that details all the activities and events hosted by WGSR and their core mission.
Moodboarding and Visual Storytelling
Our client already has a very strong social media presence with over half a million followers across Facebook and Instagram. I wanted to carry over some of the existing branding materials since they are recognized and shared by so many online. I also wanted to include the color of German shepherds that make WGSR who they are. The two colors you see on the far right are the two colors I abstracted from the two images on the left. And based on that, I got to mood boarding and branding.
The shelter is also located close to the Santa Monica Pier in Los Angeles which also resonates with the teal color from the logo. After tweaking the images and colors for a while, I finalized our color palette as you can see on the lower left hand corner of the image above.
Mobile-first approach and the responsive layout
Final Prototype
Outcome and takeaway
The biggest take away from this project was the importance of design system at the beginning of the creative process. We did not have an official design system set up. However, we designed the Home page collectively and used the components and other design elements such as typography, font size, and shapes to other subsequent pages, which saved us many hours.
This team also made me realize what is possible when you work with team members who listen intently, open-minded, and share the same goal as you. Setting up a working agreement with the team at the very beginning of the project turned out to be a great investment of our time and definitely something I plan to continue doing.