top of page
fill and hollow_edited.png

Paws Cafe Website Design
The place pets meet their homes.

Street Animal Helping

Branding

Service Design

Project Duration:    2 months / Jun - Jul 2022
My Role:                   End-to-end UX Designer

Background

We've got an idea to connect street animals with potential adopters and boost adoption rates while making the process smoother.

According to BBC Turkey in April 2022, there are around 10 million street animals in Turkey and expected to be 60 million in ten years if no action is taken.  Most people have less chance to encounter strays, we worry about sickness and hygiene.  Because of that adoption from the street is not common.  We believe that providing a clean, adoption-ready space where people can meet these animals will increase adoption chances.


We get it, one person can make a difference, but when we come together, it's more than just the sum of our parts. That's why we want to set up a cool café where you can enjoy good coffee while helping out our furry friends. Join us in making a positive impact!

      Solutions​
  • A cafe which can generate income.

  • A cafe to allow people to interact with pets, helping them understand what it's like to have pets.
    (Avoid seeing pets with a pair of pink-colour glasses.)

  • Reduce uncertain adoption while trying to re-home pets.

  • Work on SOPs to ensure quality of adoption process, service, environment and food quality.

  • Create a website for branding and provide information about cafe and pets.

    Problem 

For Street Animals

  • Need to connect with potential families to increase the chance of adoption.​

For Platform (Cafe)

  • Needs income to take care of animals.

  • Needs a place for animals and people to spend time together before making an adoption decision.

For Adopters (Customers)

  • Needs to know where they can adopt a pet.

  • Needs to encounter before making an adoption decision.

Creating a space for adopters and their potential pets to spend quality time together before making that important adoption decision.  It's the way to ensure adoption choice, steering clear of any uncertainties in the adoption journey.

Project Overview

5. Overviewe (2).png

01
Research

1.1  Facts

1.2  Interview
1.3  Empathy Map

1.4  Competitor Research

During the research phase, we found out that people generally prefer healthy and socialized pets.   I also found that the more interaction between pets and humans, the higher the chances of successful adoptions. However, our visit to a pet cafe in Istanbul caused us to have concerns about potential hygiene issues.

​

Goal

  • Uncover facts about street animals and the current adoption landscape.

  • Understand how people choose a cafe to visit.

  • Explore how people decide to welcome a pet into their lives.

  • Investigate similar businesses and potential opportunities for collaboration.

1.1 What is happening: Facts

Market & Fact Research.png

1.2 Discover customers' needs: Interview

To better understand why people have pets and visit cafes, I conducted semi-structured interviews, allowing me to gain fascinating insights.

Vector 58 (1).png

6

Participants
 

  • Filter:
    1. Who have been in a cafe in the last 3 month.
    2. Who have or used to have pet.

  • Semi-structured

  • In-Person x 3 (Turkey)

  • Remote x 3 (Taiwan)

About Pets

Why Visit a Cafe

67%

socializing.

100%

adopted after encountering.

83%

used to help strays.

67%

used to have a pet.

50%

a break during walks and trips.

(location is matter)

33%

Enjoy private time.

1.3 Interview patterns: Empathy Map

Goals

  • Socialising.

  • Enjoy quality service, food and environment.

  • Interact with pets.

  • Contribute to helping animals.

Pains

  • Adopting unsocialized and unhealthy pets.

  • Ensuring pets' safety in public.

  • Dealing with a non-pet-friendly environment.

  • Addressing hygiene concerns.

Empathy Map v.3 (1).png

1.4 Service Safari & Competitor Research

  • Competitor scope: Taiwan and Turkey

  • Research Method:
    1. Conducted a Service Safari, visiting a pet cafe in Turkey.
    2. Explored various websites.
    3. Analyzed customer feedbacks on Google.

Jack Cafe.jpeg

Strength

  • Diverse services offered: cafe, daycare, shop, spa, etc.

  • Availability of a newsletter.

  • Collaboration with famous YouTubers for branding.

  • Well-maintained and organized website.

  • Utilization of breadcrumbs for easy navigation.

  • Online reservation and chat options available.

Weakness

  • Unpleasant customer service.

  • Subpar coffee quality.

  • Issues with hygiene and unpleasant odors.
     

  • (Web) Absence of a bottom navigation bar.

  • (Web) Slow loading times.

02
Information
Architecture

2.1  Customer Journey
2.2  User-centred solutions
2.3  Feature Roadmap
2.4  Site Map

During the research, we found unwelcoming service, poor coffee and food quality, and hygiene issues needing improvement.  I narrow down to two personas to create focus on Elif and Ali's needs and conducted HMW sessions to create customer-centered solutions.  We meticulously compared features with local pet cafes in Turkey and an adoption cafe in Taiwan, ensuring a solid foundation for our platform.

​

Goal

  • Define our customers and primer needs.

  • Brainstorm customer-centered solutions.

  • Compare our solutions with existing players.

  • Optimize the site map for enhanced digital experience.

2.1 Discover customer journey

Personas, Elif and Ali, were developed based on interviews.  The volunteer persona was eliminated to focus on major needs, such as finding a pet and enjoying time with one's pet in a cafe.

Journey Map - Elif v.1 (1).png

2.2 Explore user-centered solution: How might we?

Based on Personas Elif and Ali's centre needs and the opportunities revealed during their journeys, the solutions and value we could provide (slide 2, Value Proposition Canvas) to them were developed.

Persona Elif.png

How might we help Elif to find an ideal pet for her family?​

  • Provide information before Elif visits a potential pet.

  • Ensure sufficient interaction opportunities before making an adoption decision.

Persona Ali.png

How might we help Ali enjoy in a cafe with his dog, Hero?​

  • Highlight pet-friendly features on the website's landing page.

  • Ensure the website includes a clear cafe location and enables one-tap connectivity to Maps or navigation.

  • A well-considered pet-friendly space and service design.

2.3 Features & Competitor Cross-check

People are attracted to a cafe for various reasons.  I narrowed it down to Elif and Ali's needs and also considering competitor research results, some features need immediate consideration.  On the second slide, you can see our features cross-checked with competitors'.  The main complaints about pet cafes during our research:

  • Clean and Hygiene

  • Food Quality

  • Non-pet friendly environment

Immediate Focus
Must Have

  • Pet-friendly environment

  • Good food and drink quality

  • Welcoming service

  • Ensuring a smooth adoption process

  • Having a website

Later
Good to have

  • Promote animal adoption in Paws Cafe once the cafe is ready.

  • Organize engaging activities.

Future
Think-able

  • Online store

  • Online reservation.

  • Implement a newsletter subscription option.

2.4 Digital interface: Site Map @ Website

Our cafe needs to have a website, as it helps Elif to discover the current pets and inables Ali to find our location during his search.  We used open card sorting to understand how people expect to find the information they are looking for. As an early insight, we made a couple of adjustments to the site maps after conducting a usability test in the later process.

  1. The term "In-store Pets" was renamed to "Pets" after the usability test to enhance information clarity.

  2. The subcategories under the renamed "Pets" were adjusted accordingly.

2 Site Map v.2  After Usability Test.png

03
Interaction
Design

3.1  Service Blueprint
3.2  Product Requirement
3.3  Wireframes

The development of features, including a website, has been centered around Elif and Ali's needs.  A Service Blueprint was created based on the customer journey and user flow to align tasks, systems, and resources between front-stage and back-stage actions.  Considering Ali may search for us on the move, the smartphone version of the website has its menu button at the right bottom corner to allow Ali to operate the smartphone with one hand.


Goal

  • Define the journey of how Ali finds a cafe and Elif adopts a pet.

  • Develop a Service Blueprint based on the customer journey to align tasks and resources.

  • Create wireframes for both desktop and smartphone versions.

3.1 Align tasks and resources: Service Blueprint

The Service Blueprint was crafted to synchronize Elif and Ali's step-by-step tasks with our available resources.  Before creating the Service Blueprint, task flow and user flow were established.  Flip to the next slide to uncover the development process!  I have found that the development of Standard Operating Procedures (SOPs) is crucial in maintaining our quality standards.

Service Blueprint
Service Blueprint v.1a (1).png

3.2 Product Requirements

The project encompasses the development of both a website and a physical cafe, with the primary goal of ensuring the success of both components.  A desirable cafe has a presence online experience and quality of service, cleanliness, and overall customer satisfaction.

During research, we uncovered concerns regarding the cleanliness, quality of food and coffee and unfriendly staff.  Along with the Service Blueprint set-up, I find the importance of involving professionals while creating Standard Operating Procedures (SOPs).  These measures are crucial for maintaining a consistently high standard across all aspects of the cafe.

PRD v.3 (1).png
PRD v.3 (1).png

3.3 Digital interface: Wireframes

I conducted a simple A/B test by sketching wireframes (v.1) and determined the one to proceed with digitally.  Below are the responsive wireframes for desktops and smartphones.  The sketching wireframe can be found in the link below:

  • Home

  • Menu

  • Event

  • Pets   (Renamed from "In-Store Pets" after usability test to avoid confusion)

  • About us

  • Contact us

For Desktops
Home v.1.png
Menu v.1.png
In-store Pets v.1.png
Event v.1.png
About us v.1.png
Contact us v.1.png

04
User
Interface
Design

4.1  Logo
4.2  Style tile & UI Kit
4.3  Hi-fidelity Prototype

I designed the website of the cafe platform along with its logo and tone, to create a warm and familiar feeling.  The logo is responsive and was designed by combining paw and coffee beans which tells a lot about our concept.  It is a cafe, just pet friendly-er and helping animals find their way home.  Based on the insights from the Ideation stage, the smartphone version allows Ali to operate his smartphone with one hand and leave another hand for his dog, Hero :) 

​

Goal

  • Concept telling logo and website tone.

  • A high-fidelity prototype should be ready for testing.

4.1 Branding: Logo

I created a logo by merging "Coffee Bean" and "Paw" to visually represent our concept.  To make it more relatable to our customers, I added a circular element to the logo, which is common in cafe logos lately.  You can track the development history on the right side.

Logo (1).png
  • The final responsive logo design.

4.2 Style tile & UI Kit

Style tile provided a design kick-off, and was developed into UI Kit after the high-fidelity UI design was completed.

What's the difference between them?  Well, there are descriptions for Buttons, boxes and Cards to ensure communication efficiency and design consistency.

UI Kit v.1 p.1.png

4.3 Digital interface:
      High-fidelity Prototype

Prototype flow
1
2
3

Let's focus on Elif and Ali's needs and see how our digital interface solves their problems.

​

1. Ali can find our location and link directly to Map/Navigation in just 1 click.

​

2. Ali can see we are "Pet Friendly", we even have snacks available for his dog, Hero.

​

3. Elif can find all of the necessary pet information before deciding to visit.

05
Test
and
Iteration

5.1  Usability Test
5.2  Design Improvement
5.3  Latest UI Design
5.4  Future

The usability test was conducted to learn whether our digital interface, website, can solve the major needs we set up during the earlier Define stage.  The tasks and scenarios were tailored around Elif and Ali's tasks.  While the smartphone version achieved the success rate of 90% and the laptop version achieved 80%.  A few minor confusions were addressed and prompting an adjustment to the site map.

​

​

Goal

  • Ensure the Personas' needs have been solved.

  • Assess the overall sensibility of the website design.

  • Continuously enhance the web design based on user feedback and testing results.

5.1 Usability Test & Affinity Map

Vector 58 (1).png
3

Participants
 

  • Who used to search on the internet.

  • In-Person x 3 (Turkey)

  • Task:
    Desktop: 10 tasks
    Smartphone: 8 tasks

A usability test was conducted to ensure the Personas' needs have been solved and to assess the overall sensibility of the website design.

Smartphone

​

90%

Successful

​

90% direct success

10% direct failed

Laptop

 

80%

Successful

​

80% direct success

20% direct failed

5.2 Design Improvement

 

01. Emphasize "It is a cafe" @ landing page.

By changing the welcome message in the Hero section.

02. Rename "In-store pets" to "Pets" to avoid confusion.

Because there are pets in the cafe and pets in foster families.

03. Add "Home" at the top navbar to Improve navigation.

04. Relocate the top navbar to increase the screen display.

Allow customers to see more information once they land on the page.

Before 1.png

Before

Desktop Mockup.png

After

5.3 Final Digital UI Design

For Desktop
Home v.3.png
Pets v.3.png
Event v.3.png
For Smartphone
M Home v.2.png
M Home v.2-1.png
M Menu  v.2.png
Drinks v.2.png
Special for Pets v.2.png

5.4 For the future

  • For the cafe
    It is necessary to establish a Standard Operating Procedure (SOP) to maintain the quality of the cafe. This is because the majority of complaints about pet care relate to issues such as unfriendly service, food quality and hygiene.

     

  • For the website
    it is important to keep it updated with the latest information, particularly in regard to timely information such as Pets and Menu.

     

  • In general
    it is important to schedule regular research to identify any new pain points that may arise and ensure that they are addressed promptly.

This concept of a cafe has been on my mind for a few years.  A few neighbours and I have been taking care of street animals around our area.  To prevent more baby strays from coming, we have been sending them for ligation surgery and releasing them to the street again.  We try to find them homes, but very challenging.  As you can see in my research, there were 10 million strays in Turkey in 2022 and will reach 60 million in 2032 if no action is taken.

​

We need more people to join us, we need the public to be aware of what is happening in their city and streets.  If you happen to be interested in this project and think we could make it happen, please do not hesitate to reach out.  We could do further based on this case study.  This is not just a case study, but a workable plan!  People may think "You cannot save every stray", and I say "When I take action for one, his/her life has already been changed".

Explore other case studies

Mockup 4.png

01 / Energy Bee

  • Increase energy consumption awareness.

  • Utility payment app design.

Mock in use 3.png

03 / WhatsApp Screen Share

  • A new feature on WhatsApp

  • Show and talk at the same time

Smartphone mock up.png

04 / Zeit Travel

  • Travel eCommerce

  • Website Design

bottom of page