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
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.
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.
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.
Hierarchy
Maintain an organized system.
Connection
Emotionally relate to the owner and their feline.
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
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…
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.
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.
4.
BENEFITS PAGE
While conducting further visual research, I found companies created visual interest with stylized images and grids to display benefits and information.
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.
​
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.
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.
