UI/UX Designer
February 2021 – April 2022
2 UI/UX Designers, 1 Engineer
Desktop Hifi Prototype
The Cat Resource Center (CRC) is a non-profit that helps people responsibly take care of feral, stray, and domesticated cats. They provide articles from verified cat experts, connect people to non-profits, and provide for local cat colonies.
Our goal is to improve user navigation and modernize the website branding.
I create UI elements and layouts based on user research. Also, I prototype most of our wireframes and advise my teammate on best practices for prototyping in Figma.
While research and testing were not my focus, I assisted with the user persona, test planning, user interviews, user flows, affinity diagram, and website annotation.
What drives people to help cats?
What cat-related resources do people use, and how effective do they find them?
How do users connect with people volunteering in the community?
Through our user interviews and affinity diagram we discovered that:
We annotated the Home, Cat Topics, and Organizations to understand what the usability issues are. You can see our full notes here.
The type is only 13px, which is inaccessible but doesn't provide a visual hierarchy. Everything at the top and in the center should have more visual importance, but your attention is taken away from it by the pictures and large text in these pictures.
The website has the articles arranged alphabetically, but this is only effective if users know what they need. There is also no usage of the horizontal space, causing the user to scroll far down on the page to find what they need.
"They'll call us and we'll get a phone call saying I can't figure out your website and I kinda feel bad."
After meeting with the CRC, we discovered the CRC's primary objective is to connect people with organizations and information that may help them with their needs.
Our contact also confirmed that current users of the website have a lot of issues navigating it. Some users call for help only to have CRC volunteers grab links from the website for them.
Transparency of donation data
Better information architecture
To start, we created a user persona, developed an affinity diagram, and made a priority matrix. Ultimately we thought it was most important to show transparency of donation data, create better information architecture and SEO, and provide scientifically backed resources. In our first iteration, we addressed:
We wanted to make finding help and searching for topics as accessible as possible. The search bar is at the top and does not require the user to navigate to another page to search for something.
There is a floating button called "Request Assistance" so the user can click this at any time. The topics are also arranged in grid so the user doesn't need to endlessly scroll in order to get to the information they need.
Understanding what a non-profit stands for and how they are using its donations is crucial information to our user persona.
We put this information immediately on the front page, so users didn't have to dig too deep for it.
A lot of words related to help were used in the website. Our users didn't know the difference between "Contact Us", "Submit an Online Contact Form", and "Cat Questions". We used the word "assistance" as this felt like active help. The "Contact Us" page was about website feedback and CRC volunteers so we moved it to the bottom of the page.
After accessibility testing, we decided to adjust the header. The brighter teal was too difficult on our tester's eyes so we switched it for the darker teal. He also didn't like how far the header extended from the top of the screen so we decided to limited the amount of information added to the header.
We picked out colors that indicated warmth and trustworthiness. We also wanted to use black and white photos to symbolize that a feral cat is the same as a domestic cat. The only difference is its living situation.
In the feedback we collected, some people expressed that our color scheme did not give off feelings of warmth and happiness because of how dark the menu and text overlays were.
With this feedback, we set out to create two new prototypes and perform A/B testing.
Site A utilizes our V1 prototype's colors, but we changed where and how color was used. The feedback was that the darker teal in the header made the website feel too dark.
Site B uses a new color scheme. We changed the type of blue that we used and used brighter colors to portray friendliness.
Tests concluded that the neither of the color schemes fit the feeling completely, but most of our users gravitated towards Site B. The off white made things feel a bit brighter, but the color scheme still felt bland.
A lot of the interviewees pointed that the black and white photos were the main cause of this. They also felt that the black and white photos didn't help them connect with the cats in the picture.
