Rainbow Play Cafe
A Website Redesign for an Indoor Play Cafe
Project Overview
Description

A Website Redesign for an Indoor Play Cafe to improve its Brand Awareness and User Experience

Jump to the Solutions
Project Duration
3 Weeks
24 Screens
Team & My Role
Illustration
Graphic Design
UI/UX Design
* School Project with a Client
* A team of 3 members including myself
Tools Used

Design Process

Problems and Solutions

Problems Identified

Problem 01.  The Abundance of Text Information

The website's extensive textual content overwhelms users, leading to confusion. Simplifying information, such as admission fees and time slots, is crucial to achieving the website's objective of enticing users to visit the café.

Problem 02.  Visual Inconsistency Across the Site

Visual inconsistency is evident across the site, lacking a rigid system guideline for elements such as colours, fonts, shapes, hero images, and more.

Problem 03.  Lack of Depth in Brand Storytelling

Another pain point is the lack of depth in brand storytelling. The website primarily relies on text information, focusing on conveying information rather than capturing the atmosphere of the shop through the website.
Solutions Offered

Solution 01 Visualizing the Essential Information

Instead of listing textual information, we visualized the content in cards featuring giraffe illustrations that represent the café’s brand. For example, in the 'Admission Fee' section below, users can toggle between pages without having to scroll down. This solution was implemented across various sections of the site, including 'Admission Fee,' 'Time Slot,' and 'Cafe Menu.'

Solution 02 Defining the Style Guideline

By Defining and aligning with the style guideline, we aimed to achieve consistent branding by creating a unified "look and feel" across the site. As an example, three primary colours, inspired by the rainbow brand logo, are employed to distinguish and delineate sections in the example below.

Solution 03 Incorporating Illustrations and Graphics

By integrating illustrations and graphics inspired by the interior design and the toys featured in the café throughout the site, we aimed to enhance its visual appeal and convey the welcoming and friendly atmosphere of the café. This approach aims to entice potential visitors, making them eager to experience the café firsthand.

Emphatize

Client Meeting

We had the opportunity to visit the café, observe its atmosphere, and conduct a client meeting on-site. While we understood the client's pain points and needs, we also gained insights into the cafe's unique strength's and characters.
Key Insights

• 'Pricing,' 'Booking a visit', and 'Birthday Parties' are the most important content she wants to emphasize on the website.

• Improving the website's brand awareness is essential.

• 'Multicultural,' 'Welcoming,' and 'Sophisticated Toys' are the main strengths of the cafe.

• The cafe has giraffe-themed toys, and a giraffe can be used as the mascot of the cafe.

User Survey

We recruited and interviewed 20 potential users via Google Forms to gain insights into the demographic profile, pain points, and needs of our website's target audience. At the same time, we prepared for questions regarding the website's user interface and overall user experience.
How old are you?
How many kids do you have?
What would be your main purpose to visit a play cafe with your child?
How would you rate the experience of this website? (Scale of 1-5)
What aspects of the website do you think need improvements?

Define

User Persona

We created user personas based on the findings of the user survey to represent the target audience of the website.

Ideate

Sitemap

Based on the user survey and the client's needs, we tailored the sitemap to highlight specific categories while streamlining the number of options in the header/hamburger menu. This approach ensures that users are not overwhelmed when deciding which page they should explore first.

High Fidelity Wireframe

After initial sketches on paper, we transitioned to crafting high-fidelity wireframes using Figma. This process involved detailed discussions and collaboration to refine our ideas and ensure that our designs effectively addressed the project's objectives.

Final Screens

UI Kit

As primary colours, we used three different colours derived from the original logo of the cafe. As a font for headings, we chose Montserrat Alternates, considering the client's need to use a round font to convey the friendly and warm atmosphere of the cafe. I handcrafted illustrations featuring giraffes, unicorns, and suns to further enrich the site's visual appeal and atmosphere.
Prototype

Prototype

Evaluate

Usability Testing

We conducted a user survey on Google Forms with 20 respondents to evaluate our redesigned website's usability. The results showed a significant improvement in the overall user experience, with nearly 62% giving the new design a score of 5, compared to almost 40% for the previous design.
How would you rate the experience of this website? (Scale of 1-5)

Learnings

Throughout the case study, I learned the importance of collaborating with team members who have different skill sets and learning from each other.

One of my team members, an experienced designer, taught me how to use variables in Figma for effective design. Another team member, skilled in research, introduced me to tools like Maze. I also contributed by adding illustrations to the website, enhancing its overall look and feel.

I believe that combining our diverse skills made the project stronger, and I am motivated to apply the new skills I learned from my team in my next project.

View Other Projects