CatFlaxHomeCatExpanded_edited.jpg

CatFlax

What is CatFlax?

CatFlax is an all natural litter alternative, sold directly to consumers via the website. 

Problem Space

How can we better communicate the inherent benefits of CatFlax and build brand trust with cat owners in a crowded market?

Project Goals

Rebrand CatFlax with highly stylized photos of cats and cat owners. 

Revamp the color palette using clean blues and greens to create balance and stability.

Reimagine the CatFlax story by leveraging illustrations to build the narrative. 

Refine copy across the site to more efficiently and effectively convey benefits.

Design Principles

01

SPACE TO PLAY

Your cat needs space to play and so do the elements of this design. Let's focus on what matters.

02

LESS MESS

We'll clean up copy across the site and eliminate visual clutter. This design is 4x more absorbent!

03

NATURAL SOLUTION

The colors, icons, and imagery will center CatFlax as an organic, all natural product cat lovers can trust.

04

CATLIKE REFLEXES

This design will leverage versatile stacking modules of content that can easily expand with the brand.

Primary Persona

"The Cat Mom"

Mallory Rhodes

28

Brooklyn, NY

Interior Designer

Lives with partner

Favorite Brands

Biography

Mallory is an up and coming interior designer based in Brooklyn, NY. She lives with her partner David, a successful gallery curator. The couple has two “cat babies”, Kiki and MJ, and is considering bringing home a new kitten to make it a fluffy trio. Mallory is the defacto decision maker when it comes to litter and food, and prioritizes the health of her cats over pinching pennies. She prefers products with natural ingredients and is increasingly interested in minimizing her carbon footprint.

Motivations

Cat Health

Natural Ingredients

Odor Elimination

Eco-Friendly

Easy to Clean

Cost Effective

User Stories

jonathan-cooper-eqcjVloi7fI-unsplash.jpg

LAUREN & RUFUS

As a long time cat mom, I want a litter that I can trust to ensure the continued health of my cat and I am willing to pay a little more.

mel-elias-2_KjpNXFl5M-unsplash.jpg

SARA & BOOBOO

As equal parts nature and cat lover, I want a litter with simple, natural ingredients, that allows me to care for my pet and the planet.

brad-lloyd-xy1Yo_MHDvQ-unsplash.jpg

YVONNE & DOC

As a first time cat owner, I want a litter that is odor absorbent and easy to clean so that I can make the best home for my pet.

Make It Fashion!

In addition to researching dozens of litter competitors, I also analyzed sustainable fashion and natural beauty brands to establish a fresh and unique design direction.

Simple iconography and minimal copy easily convey Madewell's insider benefits.

Less Is More

Brand Madewell@2x.png

One photograph and three words is all it takes to understand the NB brand.

Cut to the Chase

Brand Nancy@2x.png

H&M efficiently delivers their commitment to sustainability in a stylized in grid.

Forming a Pattern

Brand HM@2x.png

Finding Our Style

StyleTileFinal.png

In Litter.Done.Better our feline friends serve as model and muse. The color palette is cool and clean with pops of warmth and energy from the photography. Brand benefits are communicated with succinct one-liners and anchored by simple icons. The logo has been modified with a darker pine green and a sleek, modern typeface. The user testimonial expands on the product’s merits and signals to future brand trust.

Color Palette

The primary palette is composed of a 6 shade gradient starting with the vibrant green of the logo and arriving at a deep attention grabbing blue. All six primary colors are used in abundance throughout the site for page footers, headers, sub headers, body text, icons, illustrations and CTAs / buttons.

43B02A

00A05B

008C76

008FA5

007FBB

006DC1

Visual Identity

Cat people love cute pictures of cats. Can you believe it? Photography was a key component in establishing the CatFlax Brand. Below are some beautiful images pulled from the feline library I assembled during the course of this redesign.

Primary - Neutral

To play, press and hold the enter key. To stop, release the enter key.

Secondary - Bold

To play, press and hold the enter key. To stop, release the enter key.

The Building Blocks

Page Header / Footer

Our Story Order Philosophy
Contact Us Media Privacy FAQ

Page Scroll

Primary

BUY NOW

Page Indicators

1 2 3 … 26 next

Hover

BUY NOW

Quantity

Selector

Icons

No Chemicals

Odor Absorbant

Biodegradable

Cost Effective

Checks

Feather

Scoop

Truck

Socials

Review Stars

Order Bill

Illustrations

Meet Judy, Mickey & Petey! 

Judy Smiles

Judy Worries

Judy Thinks

Judy Walks

Mickey Smiles

Mickey Frowns

Petey Frowns

Petey Smiles

Thought Bubble

Hay Bale

Flax Fiber

Dirty Litter Box

Clean Litter Box

Sparkle

CatFlax: Before

Old Landing@1x.png
LANDING PAGE

The home page is forgettable and lacks a distinct visual design direction.   

The copy beneath the image of the  cute kitten feels like an afterthought.

The slogan offers little insight into all that CatFlax has to offer.

Old Benefits@1x.png
BENEFITS PAGE

This page is bland and customers are likely ignore the copy entirely.

The iconography does little to aid in communicating CatFlax’s benefits.

The colors feel heavy and muddled and read as army camouflage.

Old About@1x.png
ABOUT PAGE

The about page suffers from too much copy and a lack of visual interest.

The would be charming origin story of CatFlax feels like a slog.

The photo scores major points for authenticity, but should be hi-res.

Old Order@1x.png
ORDER PAGE

This page is very problematic. More than 75% of the screen is white space.

The product photo is…not good… and a likely deterrent to potential buyers.

This page haunts my dreams. I hope you are spared from the same fate.

CatFlax: After

LANDING PAGE

The new and improved landing page uses a hero image of the cutest little kitten, pondering something of the utmost importance, perhaps the impact of traditional litters on the environment.

With a nod to my fashion and beauty brand research, I created the three word slogan, “litter.done.better”.

I also integrated the benefits page into the new vertical scrolling pattern and repackaged it as an interactive paw shaped infographic. This is followed by two more modules of content, “make the switch today”, and user testimonials.

New Landing Page Copy.png
PHILOSOPHY

I added a philosophy page and distilled the CatFlax ethos into one simple concept. CatFlax is litter done better; better fo you, better for your cat, and better for the planet.

The design of this page leverages an interlocking pattern of images that expand the color palette and guide the user down the page.

The check marks first used on the landing page are reprised here and help detail the manyfold benefits of CatFlax. 

16 Philosophy Copy@2x.png
OUR STORY

I continued to utilize hero images of cats (and their humans) on the our story page.

I then reimagined the quaint origin story of CatFlax as a scrollable comic of sorts. Judy and her two cats Mickey and Petey are each rendered in a different shade of blue.

The once intimidating text block has been deconstructed and split into four easily digestible sections. During testing, users had an overwhelmingly positive response to this page. 

17 Our Story Final Copy@2x.png
ORDER PAGE

Updating the order page was particularly challenging because the product photos the client provided were wholly inadequate.

I ditched the indistinguishable brown mess and created the minimalist CatFlax pouch pictured to the right. I also added user reviews and another kitty surprise at the bottom of the page.

This page is simple, clean, and designed to help customers get the product they want as quickly as possible.

18 Buy Copy@2x.png

In Conclusion

This project was less about redesigning an outdated website and more about building and defining the CatFlax brand. I created a wholly unique vision by leveraging fashion and beauty brands as inspiration and centering the cats as our mouse murdering models. Users connected to the bold imagery, refined color palette, and visual storytelling. If I had more time, I would have encouraged the client to reconsider the logo. Users overwhelmingly had a negative response to the font and color and I would have loved to designed something. Thank you!