top of page
Computer mockup of CatFlax homepage.

CATFLAX

WEBSITE DESIGN

CatFlax is an eco cat litter that is made from the base of the flax plant, eliminating harmful waste, allergens, odors and dust. Giving you the very best for your cat and the environment.

ROLE

UX/UI Design

User Research

User Testing

Prototyping

SOFTWARE

Sketch

Invision

Photoshop

Principle

CLIENT

CatFlax

DURATION

4 Weeks

THE OVERVIEW

Screenshots of CatFlax's previous website design.

THE back story

Most cat litters on the market can inhibit mold growth and contain clay and silica dust which has been linked to respiratory issues in cat owners. CatFlax is an eco cat litter company which is created out of flaxseed, it provides cat owners with a healthier alternative to your typical “natural” cat litter. 

THE OBJECTIVE

The objective was to improve the optimization of CatFlax’s user experience for their targeted prospective consumer, by properly displaying the product, benefits and including the new branding.

Contact Us Page

CATFLAX'S CONSUMER

Research has shown that cat owners want to make the switch to plant based cat litter that is environmentally friendly, easy to clean and weighs less, making it easier to carry. CatFlax's target consumer tends to veer towards young urban professional females between the ages of 21-30. This specific group of consumers want to make the switch for a healthier, environmentally friendly alternative to the traditional "natural" cat litter.

CatFlax user persona Naomi Cortez

RESEARCH

Exploratory Research 

My team and I began the design process by conducting exploratory research to better understand the natural cat litter market and the consumers reasoning.

1.

IMPACT ON EARTH: Materials are top of mind for cat owners looking for natural litter, as consumers begin to understand the impact that sourcing plays on the Earth. 

 

“More and more people care about the environment,” says Hughes. “Clay litters are not biodegradable and simply fill up limited landfill space. Most—if not all—alternative cat litters are biodegradable.”

2.

HEALTH: People’s concerns are moving away from just their own health and incorporating that of their pet’s health and the rest of the world.

 

“As consumers look for natural and healthful foods, continues Hughes, that desire is driving the growth of the alternative cat litter market”.

Visual Competitive Analysis 

The team and I completed a visual competitive analysis on five different competitors within the natural cat litter market space. The competitors were Feline Pine, sWheat Scoop, Naturally Fresh and World’s Best.

The visual competitive analysis was conducted to determine the design direction that would best fit CatFlax’s clientele. We were also able to gather inspiration and get a sense of the user.

 CatFlax competitive analysis

1.

INFORMATION OVERLOAD: A majority of cat litter companies websites have too much information which is overwhelming for a consumer. Highlighting only important information for the consumer. 

key Takeaways

2.

INTERACTIVE DESIGN: Cat litter companies should find different ways to incorporate interactive design into their websites and display information/ benefits in an visually interesting way.

DESIGN PRINCIPLES

After our team conducted research, we had a clear understanding of what other product websites existed. We went on to create the following design principles to help guide our design decisions.

Simplicity

Less is more. 

Minimal Desk

Hierarchy

Maintain an organized system. 

Magazines Stack

Connection

Emotionally relate to the owner and their feline.

Man with Cat

Principles To Consider

1.

 CONSISTENCY

2.

 HIGH FIDELITY

3.

 WHITESPACE

VISUAL EXPLORATION

Our team designed, tested and presented our style tiles. I spent time conducting visual research on patterns, colors and trends on other cat litter websites. The style tile was designed to feel organic, bright, and to correlate with the brand. 

Healthy Style Tile

CatFlax style tile

The blue and salmon style tile was seen as brighter, warmer and felt more organic. The users said that the light blue with the white was too difficult to read.

EXPLORING SOLUTIONS

After finalizing the design direction and wireframes, I created a detailed list of problems from the original website design as well as goals I was hoping to achieve with the new design direction. I decided to refine the 5 key focuses for the CatFlax website…

Screenshot of CatFlax homepage

1.

Home Page

A scrollable home page was created so consumers could get a brief description about the company, benefits icons along with reviews from previous customers.

2.

COLOR SCHEME

I changed the salmon pink to a softer green to incorporate more of the natural organic color palette after conducting additional visual research.

Screenshot of CatFlax's product page

3.

PRODUCT PAGE

The product page was designed with the mindset that the consumers should easily be able to access all the information about the product before adding it to the cart.

Screenshot of CatFlax's benefits page

4.

BENEFITS PAGE

While conducting further visual research, I found companies created visual interest with stylized images and grids to display benefits and information.

Screenshot of CatFlax's about page

5.

ABOUT PAGE

The home page needed a focal point to create visual interest. A larger title was added with a colored background. Also reducing some of the text and breaking up the larger paragraphs in a digestible and readable layout.

USER INTERVIEWS

I conducted user interviews with 4 participants to evaluate the CatFlax website, brand and areas that needed some improvement.

User interview feedback sticky notes for homepage and product page
User interview feedback sticky notes for benefits page and general

1.

COLORS: Participants were fond of the colors, but found the colors were too light and hard to read against the white background.

2.

IMAGERY: Participants felt that the imagery of the cats alone didn't connect with the owners. Some participants suggested including photos of the cats and their owners.

CATFLAX'S FINAL SOLUTION

After the user interview, I went back to the drawing board to improve on the previous designs. Some of the main issues the users had during the interview were…

To see the fully designed screens click CatFlax Final Design.

  • Had a difficult time seeing the light blue against the white background.

  • Users weren’t fond of having to click around the website to find the benefits of the product.

  • The users didn’t like CatFlax litter being the first product photo.

CatFlax's redesigned website images

FINAL STEPS

In addition to the high fidelity screens, I also delivered a design system as well as detailed notes on the final handoff to the client.

1.

Design System

My next step for the CatFlax project was to create a design system. The design system is simplistic, modern, and clean so it would be easier to read and follow.  Every page is designed the same, it has a brief description along with images detailing all the rules. CatFlax Design System PDF

2.

Client Handoff

I prepared sketch files that were handed off to the client, for a smoother transition for the client’s designer. I organized every single design document and also made detailed notes on each design file.

REFLECTIONS

The CatFlax project was my first client design project and I've gained a thorough understanding of user testing, and constant iterations which helped me grow as a designer. It was a challenging project, but one that taught me to rely on my research findings, ask more depth questions during the user interviews, trust my design knowledge, and Listen! The user will tell you exactly what works and needs improvement.

bottom of page