PURRfect Cafe

eCommerce Site for a Cat Cafe

It is estimated that there are 70 million stray cats in the U.S. While many shelters across the country strive to provide shelter and find home for these cats, many of these innocent lives end up with a sad fate. This is why I created the PURRfect Cafe, it is a place where humans can relax and enjoy their time with cats in a stress-free environment, and have the option to adopt cats they fall in love with.

Deliverable

Responsive Web App

Responsibilities

UX Design, UI Design, Brand Identity

Tools & Softwares

Sketch, Photoshop, Principle, Invision, Marvel, Usability Hub, Draw.io, Google Suite

THE PROBLEM

The PURRfect Cafe tends to be very busy. For convenience and fairness to all guests, admission to the cafe can only be purchased through online booking (no walk-ins). First, I needed to design a way for people to understand what the cafe is about and what it has to offer. Then I had to design a simple and easy checkout system for clients to select a date/time, activities, add it to their cart, and pay.

THE SOLUTION

1. WHAT IS A CAT CAFE??

Cat cafes are a new concept to the U.S., and I find that most people think a cat cafe is anything from a cafe with a cat logo, to a cafe where you can bring your pet cat with you. I designed the homepage to clearly show what the PURRfect Cafe is all about, along with CTA's and links which lead to more information.

2. LIST ACTIVITIES AVAILABLE

Since this is an eCommerce site, I created a list of activities available for purchase at the cafe with CTA buttons & links that lead to booking and more information. For the homepage, I also created a section for featured reviews to help promote interest in the cafe.

Brainstorming

I began brainstorming, and drew a mind map to create a visual relationship between the ideas and thoughts that came to mind with cat cafes. Cats purr when they're happy, and I wanted the cafe to be thought of as a happy and relaxing place. So, I named it the "PURRfect Cafe".

Survey

I put out a survey to find out the goals and frustrations of my users with eCommerce sites.
Based on my survey, users requested the following when shopping on eCommerce sites:
-Clear descriptions/photos of items for purchase
-Guest checkout option
-Simple checkout process
-Credit card & Paypal payment options

Personas

I selected a few people from my survey to do interviews with, and created personas to keep me on track with designing the site based on my user's needs.

Swot Analysis

Next I conducted a SWOT Analysis on 3 cat cafe sites:
Charming Cat Cafe, The Dancing Cat, and Blue Cat Cafe
Based on my SWOT analysis, I decided to focus on the following opportunities:
-Clearly list activities available for purchase at the cafe
-Use CTA buttons
-Use good & larger photos to promote activities
-Left-align text to make reading on the site earlier

User Flows

I created a user flow with the MVP's from my user stories, to keep my workflow organized:

TESTING

Shopping online should be a smooth and fun process. When it came time to design the PURRfect Cafe's booking process, I created different design layouts for the activities screen. Although people generally enjoy online images/visuals, most users chose the more classic layout instead (image with item description, pricing, quantity, call to action button,...). Feedback from the tests stated that users preferred to see all the product details in one place (without having to hover and/or click on something to see its details and add it to their carts).

Wireframes & Mockups

Using Sketch, I created low-fidelity & high-fidelity wireframes and then designed mockups.
Some examples shown below:

HOMEPAGE & ACTIVITIES

Fun & engaging homepage with CTA buttons and links to direct booking and
more information on activities available at the PURRfect Cafe

EASY CHECKOUT PROCESS

Suggested activities are displayed when an activity is added to the cart.
All activities are clearly displayed & can be modified in the cart.

REVIEW CART & PAYMENT OPTIONS

Review cart page allows modifications before taking payment & allows users to choose a guest checkout. Fun cat paw prints show the checkout's progress steps.
Customers who use the guest checkout option will have the option to create an account after placing their order.

FINAL DESIGN

I enjoyed working on this project particularly because of my love for cats. Some struggles and frustrations came mainly from losing all my work for this project due to a rare case of Bohemian Sketch abruptly crashing & corrupting my files. I originally started with darker background colors, but after receiving feedback from usability tests, lightened up the colors to match the relaxing & fun theme of the PURRfect Cafe.

For my final design I used Principle to create an animated prototype:

BRANDING

I chose a color palette which I felt is fun, but not overwhelming, as I wanted the PURRfect Cafe to be associated with a relaxing and stress-free vibe.

TYPOGRAPHY

PREVIOUS
NEXT
Contact Me

Designing Space All Around

© 2019. Alisa Matthews - UX/UI Designer. All Rights Reserved