FixNation Landing Page
Landing page for non profit cats spay and neuter clinic to spread awareness about homeless cats.
My Role
UI/UX Designer
Product Manager
Duration
November 2022 -
June 2023
Tools
Figma
Team
8 Developers
5 Designers
Context
There is a lack of awareness regarding homeless cats in LA, which leads to overbreeding and extremely poor living conditions for them. Our client, FixNation, is a nonprofit organization in Los Angeles with a mission to reduce the population of homeless cats by using the Trap-Neuter-Return method to humanely sterilize as many as possible. Trap-Neuter-Return (TNR) is the process in which a volunteer traps a homeless cat on the streets, brings the cat to the clinic for neutering, and then returns the cat to where it was trapped. At FixNation, homeless cats are not considered homeless; they are called community cats because they belong to the community and deserve care and love. FixNation strives to build a better world for cats and envisions a day when all tame cats have a home, and all community cats are spayed/neutered and cared for in their outdoor homes.
Problem
Currently, FixNation only has an all-encompassing website that provides information solely about their organization and does not address the issue of community cats. FixNation has asked us to create a landing page that is focused on bringing cats' stories to life and demonstrating that they are more than lifeless statistics, all while inspiring people to get involved, especially the younger audience.
How might we promote awareness about the overpopulation of homeless cats and encourage people to take action?
Solution
A responsive landing page with interactive elements to educate people and encourage people to contribute to this cause. This landing page will have the following sections: masthead, about us, context and statistics, community cat’s stories, interactive Trap-Neuter-Return roadmap, ways to get involved, and information about FixNation.
Our Approach
For this project, we took an agile approach where design and implementation were ongoing at the same time.
Research
FixNation's Current Website
First we analyzed FixNation’s current home page and found reasons why it is not effective at raising awareness.
No description of what FixNation is and the problem they’re trying to solve. The about us section is all the way at the bottom.
Interactive carousel that users need to flip through to access information. Users can easily miss information in the later slides.
Overall, does not address the issue and stigma around homeless cats. It’s not clear how everyone can make an impact.
Materials from Client
As the product manager in addition to being a designer, I gathered lots of materials from our clients to understand the severity of the issue and their style guide.
-
Brochures
-
Their preliminary style guide
-
Cat pictures
-
Cat stories
-
Newsletters
-
Statistics
-
Infographics
-
Impact Report
-
TNR Comic book
-
and more!
Competitive Analysis
I looked at other websites with a similar mission and noted what I liked and disliked. With my teammates, we gathered a list of features that we would like to include on the FixNation landing page. ​
To define the scope within each version of this agile process, we took the list of features and plotted them on an impact vs. feasibility chart. For the MVP, we are designing the features that are both most impactful and most feasible. In the MVP, we envision the landing page to be mostly static. In V2, it would become more interactive with features such as overlays and parallax motion. In V3, our focus would shift towards micro-interactions and visual details.
Interviews
I drove down to LA to visit the clinic and interview its founder, veterinarian, volunteers, and trappers. This gave me a deeper understanding of the issue surrounding community catsI learned that TNR is the best alternative to mass euthanasia and mass killing. If cats are not neutered, they’re most likely going to be killed, that’s why it’s the most humane way of controlling cat population.
20 more homeless cats were born all because one lady decides to abandon her cat.
no cats choose to be born like this
User Persona
I consolidated our research into two user personals
Young high school student
She is scared of feral cats. She sees stray cats in her community but she doesn’t know how to help.
Middle aged women
Sees increasing growth of homeless cats and want to provide them care.
User Flow
We created a user flow to give us a better understanding where this landing page rests in comparison to the rest of the FixNation website. This user highlights what are the inputs and outputs.
MVP
Features
From our impact vs feasibility chart, we extracted a list of features for MVP. This gave us a defined scope for the MVP to help us stay on track with the timeline of the project.
MVP Features
-
Masthead
-
Context and Statistics
-
Cat stories
-
TNR roadmap
-
Get involved section
-
Footer (newsletter sign up)
Information Hierarchy
We arranged the features we’re including in MVP in the following hierarchy.
Masthead on top: first need a picture and a powerful statement to grab viewer’s attention.
Context and statistics: give context so the user knows what the page is about, and statistics to show the impact FixNation has already made.
Cat stories: to give users a community cat’s perspective to make users emphasize with the cat.
TNR Roadmap: introduce the trap neuter and return process, so users know the steps they need to take.
Get Involved: finally call to action.
Footer: users can visit FixNation's website and sign up for newsletters.
Style Guide
FixNation already has a style guide to their website. We imported their existing style guide onto Figma. Additionally, we created our own custom icons, characters and buttons. We set the breakpoints for responsive design as well: desktop is 1440, tablet is 640, and phone is 320. Since we’re working on a team with 4 designers, we have to make sure all of our style guides are standardized through a local design system.
Things standardized in the library
Components that are standardized
-
fonts scalable for different screen sizes
-
colors
-
Shadows
-
breakpoints
-
Original assets such as cat vector arts
-
logo
-
localized components
-
modal
-
icons
-
buttons
-
Masthead
Exploration Screens
We all let our imagination run wild and made lots of exploration pages. Some explorations might only have very small changes as we focus on the details. I took inspiration from the current TNR brochure that was super hero themed and integrated the super hero theme into the TNR roadmap section.
MVP Final Design
_gif.gif)
MVP User Testing
MVP User Testing
We conducted user testing and a feedback session with our whole design team at TSE. We showed them our landing page without context and asked if they could figure out what the landing page is about. We received two main feedback.
1.
At first glance, nothing is explaining the story behind FixNation and why the issue is urgent. They were able to understand for the most part, but were unclear on why they needed to take action.
Add an About section to explain why FixNation was founded.
2.
We explained that for Version 2, we plan on adding interactions such as overlays to display more information for the TNR roadmap and Get Involved section. However, it might be too plain to only have overlays as an interaction.
Explore other types of interaction such as parallax scrolling.
Version 2 and Version 3
After our user testing, we made improves to our designs. We started the process again with wireframes and worked our way up to high fidelity designs.
After our user testing, we made improves to our designs. We started the process again with wireframes and worked our way up to high fidelity designs.
Version 2
-
replaced masthead with better quality images
-
Added about section to further strengthen the reason to take actions
-
Parallax scrolling affection on about section and statistics section
-
Overlays on TNR Roadmap to add details for each step
-
Sign up for newsletter screen pop up from footer
-
Panel animation for ways to get involved
​
Version 3
-
added micro animations such as hover effects
-
ensured that all fonts spacing and other details stayed consistent
Final Design
Challenges
Originally we wanted to integrate the landing page onto the home page. However, that required us to make lots of changes to the current code of the website. Since we weren’t able to contact FixNation's web developer, we had to make a separate landing page. I made all primary buttons on the landing page to redirect to FixNation’s website to decrease the disconnection.
Reflection
During this project, we had changes to our team. Some teammates were leaving and new teammates were joining. I learned to quickly adapt to different people’s work styles and quickly get them onboarded.
​
As both the product manager and a designer on this project, I learned to balance design decisions and feasibility with the client’s requests. Being in constant communication with the client ensured that every design I make is in the user’s best interest.
​
I had a wonderful time working with everyone on the team and grew closer to every body as friends outside of work!