Cafe Yelo | Responsive Website

Project goal

Cafe Yelo is a small beachside cafe in Perth, Western Australia. The main goal of the project was to attract additional patrons both locally, as well as from suburbs further afield. I’m a regular customer myself, as just love their drinks, food and relaxed atmosphere. However, after I looked at their current website I discovered that it had major flaws in terms of user experience and did not live up to the high standards the cafe had set for itself. So I decided to take on the redesign of their site on as a fun side project. This included completely rethinking and redesigning the user experience, and user interface on both desktop and mobile.

The challenge

My research of the target audience as well as the content audit helped me define the following problems with the current site:

Problem #1: Non-responsive layout
The target audience is comprised mainly of busy professionals and parents, who are often out and about and on-the-go. Therefore it is essential to provide an experience that adapts seamlessly to all screen sizes and works well on desktop, laptop and mobile devices. Unfortunately this functionality is not provided by the current site.

Problem #2: Outdated, poorly curated content and presentation
One of the most important criteria for customers when choosing a cafe or restaurant (beside the actual food/drinks menu) is the cafe’s interior, vibe and atmosphere. Well chosen and curated imagery of the cafe’s exterior and interior, as well as shots that successfully communicate the business’s vibe are therefore essential ingredients of any hospitality website. This includes making effective use of the screen real estate available and showing appropriately-sized images whenever possible and practical. It is also important to communicate special services or offerings the business provides (such as kid or dog friendly environment, healthy food offerings etc.) that directly relate to the customer’s goals. This can be done in both written and visual form. Unfortunately the site underperforms greatly in these areas and does not live up to the cafe’s high standards. Also, some features currently implemented on the site — such as a text-only blog (last updated in 2010) and a list of partly broken links to related businesses and business partners — does little to support the company’s marketing efforts online.

Problem #3: Contact details and social media connections poorly implemented
It is great that Cafe Yelo is quite active on social media — especially Instagram and Facebook. However links to these accounts are not highlighted on the site at all, making it hard for customers to keep up to date with the business online. Also, while the site offers contact details such as an email address, phone number and street address, there is no map implemented that lets potential customers find the location of the business quickly.

My role

As a UX/UI Designer I did a content and feature audit, brainstormed possible possible features, developed wireframes on paper and in Sketch, and designed a high-fidelity mockup for an experience on desktop and mobile.

Taskflow Cafe Yelo Website | Laura Niebel

Sitemap Cafe Yelo | Laura Niebel

My process

First — being a regular patron of the cafe myself — I created two personas that were derived from typical cafe patrons at Cafe Yelo. Since this was a personal project with few resources, I based assumptions on my own experience as a cafe patron here.

I then assessed the content, features and information architecture currently in place, and compared them to the goals and needs of the target audience. I then determined which content and features should be carried over from the current site, as well as potential changes and features that should be implemented additionally. I also asked myself the following questions:

  • Is all the content used really necessary or can some of it be shortened or omitted?
  • Is there additional content including pictures that would enhance the experience?
  • How well is the site structured and how can this potentially be done better?

After deciding on the content and features I wanted to implement, I created a sitemap and taskflow diagram. I then started to draw quick wireframe sketches on paper, testing different layout options for desktop and mobile. This allowed me to iterate quickly without loosing valuable time in a design application such as Sketch or Photoshop. Later, the most promising layouts were transferred into simple wireframes in Sketch, which were then further refined until the final version was created.

The results

The responsive web experience I created doesn’t only include information about the cafe’s food and drink offerings but makes it easy to for potential customers to gauge the cafe’s vibe and atmosphere via an integrated photo gallery. A blog allows customers to keep up to date with what is happening in the local area, while contact and social media details are displayed consistently on the site to make it easier for patrons to reach out and connect.

The target audience is looking for a spot to enjoy some food or drink in a relaxed atmosphere. It was therefore important to bring across Yelo’s vibe online through appropriate images and overall visual layout. Also the choice of pictures in the new image gallery supports visitors in deciding if the cafe is the right choice for them. Potential customers are very interested in making healthy food and drink choices and consuming high quality products. The new site highlights that the cafe meets these requirements, both via the copy and imagery chosen in the menu and coffee section. Creating a usable, well thought through mobile experience was essential in order to meet the patron’s need to access information while being out and about.

Get in touch