Furrytales Pet

Refining site navigation, aesthetic, and engagement for pet owners.

PROBLEM

Furrytales Pet, a specialty pet treat company for cats and dogs is lacking brand consistency across it's website and consistent engagement with their products.

SOLUTION

In three days, Improve navigation and visual cohesion on Our Story, Contact Us, and FAQs pages. Incentivize email sign-ups and add ambassador testimonials.

Design Process

Competitor + Heuristic Analysis

I began by searching for existing local pet treat businesses and identified their strengths and weaknesses. I also ran a heuristic analysis of the current Furrytales Pet site.

Competitor Analysis

Aesthetic Analysis

Heuristic Analysis

First Impressions 

  • Stating the benefits of signing up or registering.

  • Clarity on homepage of where to go or what to do next.

  • Clarity of the business proposition.

  • Imagery, design or written information that support the proposition.

  • Cue's that show the website is current.

Information

  • Ability to quickly locate information.

  • Legibility of written information.

  • Photographic quality.

  • Conciseness of content.

  • Consistency of fonts, colours, icons, layout and links.

Trust and Persuation

  • Help and assistance provided.

  • Ease of finding company contact details.

  • Content to remove apprehensions when providing personal information.

  • Persuasive social proof.

Moodboard

We created visual mood boards to align with the client's vision for a trendy, professional, and playful aesthetic that would resonate with their target audience.

Visual Style #1

Visual Style #2

Visual Style #3

Low-Fidelity Sketches

My peers drafted sketches of our site pages, focusing on improving layout.

Email pop-up notification

Frequently asked questions page

Product page

Product page filter for easier product navigation

Contact Us & Our Story pages

Home page

Wireframes

Early iterations of key redesign elements included email pop-ups, FAQ sections, and Contact Us pages.

Email pop-up notification

Frequently asked questions page

Contact Us page

High-er Fidelity Prototyping

Refined screens including colour palette and engaging visual elements.

Email pop-up notification

Frequently asked questions page

Contact Us page

Section of Our Story page

Final Prototype

A detailed overview of our design decisions for our final hackathon prototype.

Expand and click through our interactive Figma prototype!

Reflection

This hackathon reinforced the importance of leadership in a team's success. I learned to adapt priorities based on client needs, as well as skill and time constraints. As a project manager, I effectively delegated tasks, monitored progress, and managed my own responsibilities. I ensured that our design aligned with the client’s needs and expectations while enhancing the overall user experience.

Smooth Scroll
This will hide itself!