top of page
JAVA CATS CAFE
Case Study
MY ROLE
UX Designer + Visual Designer
TOOLS
Axure, Photoshop, Illustrator
TIMEFRAME
Approximately 2 weeks
UX PROCESS
User Interviews
Affinity Mapping
Competitive Analysis
Persona Creation
Site Map
User Flow
Sketches
3. DESIGN
Annotated Lo-Fi Wireframes
Style Guide
4. PROTOTYPING
Hi-Fi Wireframes + Testing Issues
Final Wireframes
RESEARCH
USER INTERVIEWS
I began by creating a survey for customers of Java Cats Cafe and then headed over to interview them. The main focus was to gauge how their overall experience with the website had been- especially with the reservation system. However, I found that most of these patrons had not visited the website; they hadn’t even known that a website existed and had instead made reservations at the cafe or via phone call. So, I switched to plan B: asking people to visit the site and give feedback on their understanding of the business as well as on the reservation process.
​
Through these interviews, I found that there were two main problem areas causing frustration and confusion. The first was that most of the relevant information about the business is located at the bottom of the home page in long paragraphs. 100% of users did not read this description (out of 38 interviewees), which includes information such as what a cat cafe is and what you can do there, how the business came to be, information about its partners, and more. Because users were not reading this, there was a lot of confusion about the business.
“When I first arrived to the site, I didn’t really know what to do or what to expect. I saw the description at the bottom of the page, but I didn’t want to read it. It was too long and it seemed like a lot of information.”
​
-Ashley Hope
I also found that 68% of customers experienced issues with the reservation process at one point or another and 77% complained that the reservation system was lengthy and unforgiving.
“When I booked my reservation, the whole process was confusing and time-consuming and they asked for a lot of information that I didn’t want to give! I only went through with it because I really wanted to play with the cute kitties.”
-Caitlyn Harlow
AFFINITY MAPPING
Using the feedback obtained from these interviews, I grouped and organized the most commonly occurring issues:


KEY FINDINGS:
​
-
NOT ENOUGH RELEVANT INFORMATION
-
TOO MUCH UNNECESSARY INFORMATION
-
INFORMATION NOT PRESENTED CLEARLY
PERSONA

Sarah Smith | 21 years old | Student, Blogger, Volunteer
Sarah is a student who was born and raised in Atlanta. She is passionate about supporting unique local businesses that have personality and soul. She is well-connected with social media: she is always in the loop with what is going on and constantly sharing experiences to represent her city. In her spare time, Sarah is an avid volunteer, especially at local animal shelters. She values efficiency and simplicity in her busy schedule.
Needs:
-
Quick and easy access to the most relevant info
-
Ability to view websites through mobile
-
Feeling a bond to the business
Pain Points:
-
Poor organization
-
Little to no background info
-
Confusing wording
-
Large bodies of text
Opportunities:
-
Relevant content organized into succinct sections
-
Fun, interactive elements that draw her in
-
Site she would want to share through social media
COMPETITIVE ANALYSIS
In order to gauge how Java Cats Cafe’s website compared to those of other cat cafes, I researched the layouts and information architecture of the websites for KitTea, Crumbs and Whiskers, Mad Cat Cafe, Brooklyn Cat Cafe, and Meow Parlour. I also conducted comparative research with websites in which you need to make reservations or book appointments, such as AMC, Delta, and Airbnb.

IDEATION
SITE MAP
I went through several iterations of the site map and user flow. The goal was to keep the navigation as simple and straightforward as possible so users could locate essential information quickly.

USER FLOW

SKETCHES




1/4
Research
Ideation
DESIGN
ANNOTATED LO-FI WIREFRAMES
These wireframes were created in Axure RP 8. The annotated lo-fi wireframes for the key screens (home page and the reservation page) are below. See other wireframes here.
(HOME PAGE)

(RESERVATIONS PAGE)

STYLE GUIDE
TYPEFACES



COLORS




Design
PROTOTYPING
HI-FI WIREFRAMES + USABILITY ISSUES


FINAL WIREFRAMES




Prototyping
bottom of page