FixNation Landing Page
Partnering with FixNation organization to fight against homeless cat overpopulation in Los Angeles.
OVERVIEW
FixNation is a nonprofit that strives to build a better world where tame cats have a home, and homeless cats are spayed/neutered in their outdoor homes. I worked in a cross-functional team on the end-to-end design of a responsive landing page that spreads awareness of FixNation's mission and volunteer opportunities. In marketing, we focused on appealing to a younger audience.
ROLE
Product Designer
TIMELINE
December 2022
to May 2023
SKILLS
Agile Methodology
Design Systems
Microinteractions
TEAM
4 Designers
1 Product Manager
8 Developers
Solution Preview
Scroll through!
RESEARCH
The problem
I first spoke with our clients at FixNation to understand their organization, mission, and vision. Then, I documented their needs in a design brief covering many high-level problems:
Karn, Executive Director
Kimberlie, Board Member
💡
"Our current website does not address ways to get involved."
💡
"Lack of awareness of homeless cats in LA, which leads to overbreeding and poor living conditions for the homeless cats."
💡
"Lack of connection with the younger generation in regards to this issue."
Current website audit
I took a closer look at FixNation's website to visualize our client's concerns: nested content and cluttered CTAs hindered the website's ability to communicate information.
Target audience
Because FixNation said they wanted to appeal to youths, who typically lack knowledge on homeless cat fixing, I created user personas for youths and non-youths (middle-aged adults). This helped us empathize with their needs during brainstorming and onward.
Gen Z persona
Non-Gen Z persona
DEFINE
How might we
Reorganize FixNation's content from their original website to appeal to the target audience, Gen Z (ages 11-26)?
Proposed solution
Create a separate landing page that combines storytelling with playful interactions to onboard Gen Z to FixNation's history, mission, and ways to get involved.
Setting the scope for MVP, V2, and V3
To set the scope for our project, I constructed an impact vs. feasibility matrix that prioritized features across the MVP, V2, and V3 development stages ahead. These features were inspired from our initial competitive analysis of 24 animal and humanitarian-related sites.
Mapping out the sitemap/user flow
From where would visitors discover the new landing page? I mapped out entry points, including the main website, social media, and typing in search. I also grouped CTAs in an intuitive, digestible manner to encourage visitors to click through.
Subpages in order: Masthead, About Us, Context and Statistics, Community Cat Stories, Interactive Trap-Neuter-Return Roadmap, Ways to Get Involved, and Footer
An agile philosophy
At Triton Software Engineering, we believe design and development should be a collaborative effort that doesn’t take place in silos. We took an agile approach involving weekly designer-developer meetings to hand off new design iterations. Our project timeline was as follows:
DESIGN & ITERATION
Considering content design in wireframes
Then, the challenge was to organize FixNation's existing content into one unified page. I favored a layout that supported more storytelling and interaction with the cats.
Community Cats
Selected for MVP
Community Cats
Alternative
💡
While the alternative version displays images of each cat, the selected version provides interesting background in brief descriptions. These serve as hooks with the option to engage further by clicking 'Read more.'
User testing session with hi-fi prototypes
At the V2 development stage, I recruited 9 TSE designers to critique our hi-fi V2 prototypes directly in Figma. If give more time, I would have proposed user testing with the landing page's actual target users, Gen Z.
Task 1 — Give us your overall feel of the V2 prototype.
My suggestion to collect raw reactions before targeted questioning
Task 2 — Compare and contrast MVP vs. V2.
Task 3 — How do you feel about the responsiveness?
What was working + what to work on in V3
User insights revealed positive reactions to the mobile designs and emotional appeal of images as well as negative reactions to layout and usability. These user insights would guide our design direction for V3.
Validation of designs
✅ "Frequent images in V2 makes me feel connected to FixNation"
✅ "Mobile version flows down well and feels compartmentalized"
Invalidation of designs + next steps
❌
Repetitiveness and awkward phrasing in writing
💡
Make minor revisions to paragraphs and send to clients for review
❌
4/9 participants expressed discomfort with the layout
💡
Play with white space in the Cat Stories section
❌
6/9 participants encountered usability issues
💡
Troubleshoot scrolling effects, color contrast, and animations
My focus:
the design system
Outside of general UI/UX design, I led the creation of FixNation's first design system. I translated existing colors and typefaces into a reusable components library to ensure greater consistency across designs. I also had fun creating vector cat icons to build brand identity.
Before & after
Between the MVP and V3 development stages, I championed greater usability (UX) through best layout practices and youthful aesthetic (UI) through rounded components. See below for the rationale behind my design decisions.
Overlapping text on image (risky)
MVP — Minimum Viable Product
ABOUT
V3 — Final Version
.
H1, paragraph
hierarchy
Progress sticky bar
Blob drop shadows for added pop
FixNation color branding
Revised content writing
Clear mission statement
Awkward gap in flex layout
Inconsistent thumbnail sizes
Less- noticeable "See more" inline link
ABOUT
.
Vertical layout centering attention on one cat at a time
Consistent thumbnail sizes
"Read more" button that open full text + Instagram embed
Transitions; more images = more personality
IMPLEMENTED FEATURES
Web-responsive
Yes, you heard us, iPad kids. Accessible from desktop, tablet, and mobile.
Subtle progress bar
Microinteraction giving visual cues of the current subpage. Star eyes for completion!
Follow us on Instagram!
Social media embeds so you can get to know FixNation's cat celebrities.
Test your knowledge.
A gamified experience for learning about the Trap-Neuter-Return method.
IMPACT
Results & Impact
Shipped on time
I spent the final two weeks clarifying implementation details to developers to help ensure that the site would turn out accurately. One challenge was standardizing text sizes across breakpoints and across subpages from different designers. Ultimately, we published on schedule.
Client feedback
"More professional than supposed professionals we’ve worked with"
"This is exactly what we wanted"
"Now we want you to do our main website"
Karn
Kimberlie
Success metrics
The web analytics revealed 1,300+ page visits and 80,000+ hits during launch month. I'd suggest bounce rate and conversion rate as other potential ways to measure whether users find value within the site.
And that's a wrap. Here's what I learned
How to excite with visuals and interactions
I really enjoyed the freedom to design a website with few constraints, exploring ways to excite with visuals and interactions.
I regretted not going crazy early design concepts
I wish I was more bold with design exploration between the MVP and V3 stages. A potential solution could have been conducting more frequent competitive analysis to gain inspiration.
How to talk to developers and designers
This gave me a glimpse into what it's like to work in industry alongside developers in agile sprints; explaining how to export files and designating a single source (prototype) of truth in Figma led to more successful handoffs. When working with designers, I learned the importance of contextualizing and explaining design decisions.
It was an honor to help tell FixNation's story to the online world. Thank you to Karn and Kimberlie for being our #1 supporters and communicators throughout. Fun fact: these superstars have served more than 250,000 cats!