CONTEXT

No visitors = no cat adoptions

The pandemic forced Cat Cafe SoBe to lock up indefinitely. Fast forward to March 2021, they're back and... crickets. With the cafe's core mission to facilitate adoptions of rescue cats at stake, I embarked on a mission to breath new life into their digital presence.

IDENTIFYING THE PROBLEM SPACE

Evaluating the current state of their website

My first impression of the site was that it was extremely outdated. After taking a look through each of the, I made note of each of the existing issues and compiled them into two categories:

Dated & visually unappealing

The site lacks consistency, displaying various fonts, font sizes, and colors, which makes it challenging to find information.

Poor information architechture

The site has a confusing site map and misplaced content, ultimately hindering user navigation.

USER RESEARCH

Getting to know the average visitor

I chatted with five people who had been to a cat cafe and had interest in or had previously adopted a cat. I wanted to gain an understanding of:

What drives them to visit cat cafes.
Visitors impressions of their visit and its corresponding site.
Motivations for adopting from a cat cafe and their adoption process.

WHAT THEY SAID....

INSIGHTS

Lack of information

Information about the adoption process and the cats were lacking or outdated in most cases for cat cafe visitors.

Cat cafes build community

Many mentioned these places have allowed them to meet others and attending various events held.

Desire to connect with the cats

Visitors loved that they could build a deep connection with the cats they were interested in adopting.

IDENTIFYING THEIR PAINPOINTS

Being unable to find the information you need can be a hindrance when going through the adoption process

To make such a big decision like adopting, it'd only make sense that a prospective adopter would like to gain information about the cats at the cafe and understand the adoption process.

DEFINING THE USERS & THEIR GOALS

Envisioning the cat fanatics dying to visit the cafe

Acacia
The Prospective Adopter

Acacia wants to have a furry companion, but isn’t sure where to start. She wants to be well-informed throughout the adoption process.

Matias
The Cafe Benefactor

Matias cares about ensuring the well-being of rescue animals & wants to meet others share that same sentiment.

INFORMATION ARCHITECTURE

Giving the original sitemap a much-needed makeover from its confusing state

I wanted users to effortlessly find what they're after, whether it was planning a visit, checking out events, getting involved, or adopting a furry friend. So, I rearranged things to make it all crystal clear.

The result was a cleaner, more intuitive sitemap that guides users seamlessly to their desired destinations.

SITEMAP [CLICK TO EXPAND]

MAPPING OUT OUR USERS FLOW

Understanding visitors adventures across the site

I wanted to outline how visitors would interact with the new framework of the site. I laid out the flows for both of my user groups. This gave me an idea of the pages, I'd need to prioritize. I was buzzing with all sorts of ideas, but I wanted to stay within the scope of the project at hand.

USER JOURNEYS [CLICK TO EXPAND]

SOLUTION IDEATION + SKETCHES

Bringing life back to the cafe

One of the most glaring issues was the haphazard way certain content was presented, so finding the best way to condense that information was a challenge.

But that wasn't the only challenge. It dawned on me that the adoption process and our adorable feline friends were missing in action on the site. Instead of bouncing between Instagram and making phone calls, I wanted folks to find everything they needed right here.

That became my mission: bring all that scattered info together in a way that just makes sense.

SKETCHES [CLICK TO EXPAND]

FROM SKETCHES TO PIXELS

Iterating from initial concept to mid-fidelity wireframes

Using my rough sketches as a guide, I brought my designs to the low fidelity level to get a general idea of how I wanted to organize my content. I went through two rounds of design critique workshops for my wireframes at the low-fidelity and mid-fidelity level with other designers. Based on the input I received, I made some minor changes at each stage and proceeded to build the prototype I'd be putting to the test.

MIDFIDELITY FRAMES [CLICK TO EXPAND]

TESTING + MAKING IT BETTER

Iterations were made using the insights found from the usability test

I had six people complete several scenarios to analyze the ease of navigation and gauge the impressions of the app overall. Through the testing, I was able to identify some changes to reduce some confusion.

Before

After

Reducing cognitive load for Adoption Process

Instead of being confronted with large wall of text, the revision aimed to make the adoption process more digestible by splitting it into smaller sections.

Before

After

Taking better advantage of page real estate

Moving the header up, allowed for users to get to the most important portion of the page - the cats.

Before

After

Reducing cognitive load for navigation

Changing the copy from 'about' to 'about us' will allow for clearer information architecture, reducing the amount of misclicks.

VISUAL IDENTITY + UI KIT

A purrfect brand refresh for The Cat Cafe SoBe

I wanted the look and feel to totally vibe with The Cat Cafe SoBe's fun and friendly personality. So, I went for bright colors and cute illustrations to capture the same energy you feel in the cafe. Central to this new identity was their endearing mascot, a playful black cat, proudly sporting a cropped ear to symbolize its rescue roots, which lies at the core of Cat Cafe South Beach's mission!

UI KIT [CLICK TO EXPAND]

FINAL PRODUCT

Tying everything together

After finishing the UI kit, I made high-quality responsive wireframes and updated the final hi-fidelity prototype.

HI-FIDELITY SCREENS

IN RETROSPECT

Many roads lead to Rome

While approaching this project, I was extremely rigid at first trying to hit certain beats in what I dubbed the "typical ux flow". The reality was no one method fits every situation. It forced me to think to myself about why I was doing something.

Scope creep is real

It's so easy to get carried away when tackling something like a website re-design/overhaul. With such a short window to complete the project, I was really pushed to approach it by scaling down my ideas while still achieving the goals sought out by my user group.