improving the usability of a cat cafe’s site
information architecture, user research, wireframing
El Gato Coffeehouse is Houston’s only cat café, established in 2019. While the café is popular among cat lovers and potential adopters, their website is difficult to navigate and understand. This is a design proposal to address key usability issues.
*Please note this is a speculative project, I am not affiliated with El Gato Coffeehouse
MY ROLE
Solo designer: user & secondary research, wireframes, prototyping, usability testing
TOOLS
Figma & Figjam
Optimal Workshop
Maze
Google Meet
PLATFORMS
responsive website
mobile first (iOS)
VIEW PROTOTYPE
background research
Usability Testing the Original Website
Finding the most pressing usability issues in the current site
In order to validate assumptions about usability issues, I asked a group of people to complete a few tasks on the live site, and asked for their opinions and impressions of the certain pages.
Participants commented on the inconsistency of the layout between pages, as well as the text being too long.
While certain specific issues like users not understanding the business’s purpose or being able to differentiate between booking types, clarity came up quite a lot as an issue.
the main clarity issues were...
visual clutter
The lack of hierarchy in the navigation menu and homepage links confused users about where they were supposed to click. Additionally, there is no main CTA.
interaction design
Users weren’t sure whether page components were clickable
navigation
Some labels were confusing to users, as well as the layout, which doesn’t clearly group pages together.
Problem:
Site visitors have trouble understanding El Gato’s site, which makes it less likely for them to book a visit to the cafe.
Personas and Their Goals
Generally, site visitors fall into two categories
Potential Adopters
People interested in adopting need more information about the cats and rescue organization to make sure they find a good match from a good source.
Cat Enthusiasts
Visitors seeking “cat therapy” need quick access to visitor information (like hours, pricing, and menu) in order to feel confident about visiting.
Considering stakeholders
Balancing user needs with business needs
I chatted with some El Gato volunteers to get a sense of the business’ operations. Their main needs were to sustain the cafe & rescue work via bookings and donations.

Focusing on solutions that helped drive guests to booking would be the most important.
Main Solution Goals
interaction design
Users weren’t sure whether page components were clickable
navigation
Some labels were confusing to users, as well as the layout, which doesn’t clearly group pages together.
HMW:
How might we help visitors understand how to use El Gato’s website?
building the structure
Current Site Structure
The current site lacked consistency and access points to important info for users
Most pages on El Gato’s website were highly specific and information sparse, leading to an overly complex, but shallow sitemap. The navigation menu had an abundance of items, but key pages “Residents” and “Menu” were only accessible from the home page.

Because of this particular usability issue, I felt that it was important to represent page connectivity in the sitemap.
As you can see, the site is very flat and has quite a few pages (most with only a paragraph of text). Moving forward, I wanted to see how people grouped the information/pages in order to create a clearer, easier to navigate structure.
Insights:
Connectivity between and direct access to key pages were both big issues with the I.A. that caused frustration for potential visitors and adopters.
Competitive Analysis
Finding patterns in competitor’s structure & naming conventions to create a familiar experience
Because El Gato’s homepage and navigation menu were the most common points of frustration for users, I started by looking at direct competitor’s websites to compare. This process served 2 purposes - to get a sense of what was typical for cat cafes, and to understand what El Gato’s website was missing.
Homepage Content of Cat Cafe Websites
Every cat cafe included information (ex: about the business, visitor info) directly on the homepage. The homepages served as a launch point to dig deeper into each topic, and also as a way for users to get a quick answer to their questions.
Top-Level Navigation Items on Cat Cafe Websites
Comparing El Gato’s content to the most popular pages, it was determined that the following labels would be tested as high-level navigation items:
get involved
visit
about
shop
card sort
Restructuring El Gato’s I.A.
To better understand how users would categorize pages and information, a hybrid card sort with the current pages was conducted using the 4 categories. A consensus of 80% or higher was considered a strong correlation.
In the cases of Menu, El Gato Charities, and Residents, consensus of 80% was not met. Menu and El Gato Charities were moved to highest ranking existing categories, with the caveat that links between the pages would be easily accessible. Residents received its own category after comparing back with competitor sites.
El Gato’s pages sorted into top-level categories after a card sort
A/B tree testing
Testing 2-Level and 1-Level Sitemaps
quetsion
Would users find it easier to navigate through a flat or 2-layer navigation?
process
Two separate groups were given tree tests with tasks from usability testing & persona needs.

Version A: 15 testers
Version B: 26 testers
results
Overall ease scores along with % error and time on tasks were almost identical.
  • version B had much higher success with Cafe Menu visible
  • issues with “Shop” clarity in both versions
  • about 1/3 of single-layer menu testers expected visitor info to be in “About”
Choosing Single-Layer:
Because the website’s content was minimal and uncomplex, the single-layer navigation menu was selected. “Cafe Menu” was added to the navigation and “Shop” was renamed “Shop Merch” to avoid confusion. CTAs would be added linking pages that users showed <80% success for task completion.
New Site Structure
Summary of I.A. changes
Restructuring the information architecture ended up being a matter of reducing overall site pages and navigation items from 9 to 6. External links were largely shifted to CTAs in pages to avoid confusion. Adding more interconnection between pages also proved necessary from the research.
Original El Gato Sitemap
Revised El Gato Sitemap
For this project, I would focus on redesigning 4 key pages - Home, Visit, About, and Meet the Cats. Comparing competitor sites and El Gato’s website content with the card sort and tree testing results, the following lists of page content were made before addressing redesigns.
refining designs
Designing a UI Kit
The UI represented an updated, more consistent version of the original
The brand colors lime, birch, and teal were pulled directly from the cafe’s interior and El Gato’s social media. The font Cabin was chosen due to its high x-height and use in the original site.

Overall the changes to the original branding were minimal, but focused on establishing consistency and readability across the website.
Rapid Prototyping
Bringing the changes to life
The most obvious changes would be to the structure of the homepage. Rather than acting as a secondary navigation page, Home would now provide context about the business and links to further information. Likewise, with a reduced number of pages, each page hosted several sections of information, rather than having pages with only 1 paragraph.

Each section of the website’s pages was designed with modularity and responsiveness in mind. The elements are formatted within 12 column (desktop) and 4 column (mobile) versions for simplicity and ease of design.
Low fidelity responsive designs
Homepage + Nav
About
Visit
Meet the Cats
Some minor visual design changes were made between low and high fidelity wireframes, namely adding visual elements for some additional personality on pages.
High fidelity responsive designs
Homepage + Nav
About
Visit
Meet the Cats
outcomes & final thoughts
outcomes
Usability testing key actions and clarity
I set up prototypes and used Maze to collect feedback from 12 participants. To limit the number of tasks tested, priority was given to tasks with high persona need and tasks which scored low during the A/B tree testing. Because initial user research showed a lack of understanding about the business’ purpose, that was also logic tested.

In order to validate my designs, I wanted tested the following:
understand business
METRICS
qualitative feedback
access to booking
METRICS
error rates
time on task
paths takes
Liker scale measuring ease
visitor information
METRICS
error rates
time on task
paths takes
Liker scale measuring ease
Overall ease scores ranged from 8 to 9.7 out of 10 on tasks. A few users experienced long task times and lower ease scores when trying to locate the business hours, which may need to be moved.
50% mentioned “easy”, “clear”, and “straight forward” in feedback
This was super validating compared to the initial clarity issues and design goals.
100% navigated to booking
Every user clicked the CTA from the homepage.
75% understood the business’ purpose
Users were able to understand that El Gato is a cat cafe with adoptable rescues.
Revisions After Testing
The only task users struggled with was finding the business hours. Since they were in the footer, I moved them up to the visitor info section of the homepage for better visibility at a glance.
Final Thoughts
Notes on constraints, learnings, & next steps
While the initial usability testing indicated a fairly strong success, being able to test a broader range of tasks like comprehension of the copy and longer tasks (i.e. going from a first impression of the site to finding more info to booking) would be ideal.

During the I.A. research stage of this process, I would have liked to have more rounds of testing and iteration on the navigation menu and structure. Due to time and budget constraints, I was only able to do 1 round of testing and iteration for each section, but I feel that the site would benefit from a bit more validation through research.

Overall, while the site is a very small example of how I.A. can affect user experience, I feel like I have a much deeper understanding of how important I.A. is to user experiences.
Powered by Webflow
linkedindribbble