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!