Cafe Yelo: a UX Case Study

Coffee & Surf: How I Redesigned My Fav Coffee Shop’s Online Experience

I was disappointed with the web presence of my favourite little beachside café – so I completely re-designed their online experience using a user-centric approach.

Cafe Yelo is a small, beachside cafe in Western Australia. It offers delicious, nutritious snacks, as well as a variety of hot and cold beverages. The cafe’s vibe is very casual and relaxed with interior that borrows heavily from the fact that it’s located right at Trigg Beach – a popular WA surf spot.

THE PROJECT

I’m a regular customer myself, as just love their drinks, food and relaxed atmosphere. However, after I looked at their current website (July, 2017) 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.

Previous Yelo website

MY PROCESS

Personas
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 only a quick personal project with a limited time frame that I worked on while at home, as well as overseas, I went on assumptions and from my own experience as a cafe patron here.

Personas

Maria Lukes
Maria is the 37 year old stay-at-home mum of Clara, an active 1.5-year old girl. She used to work as a Personal Assistant at an educational supplies company but is now focussed on caring for her young daughter, while her husband works full-time in the financial sector. The young family lives locally in a 4-bedroom house in North Beach, close to North Beach Primary School. Even though Maria is kept busy with household chores, playgroups, kids swimming lessons and other necessities, she tries to keep fit and healthy — both by exercising, as well as eating healthily — and likes meeting up for a nice cup of coffee with a friend. She enjoys to learn about what is going on in her local area and surrounding suburbs. While Maria can’t be described as a tech-nerd, she uses the web frequently, especially social media sites such as Facebook and Instagram to keep in touch with friends and family or to share her latest family adventures.

“I really enjoy going for quite coffee with a friend, preferably after a 30-minute run/walk along the ocean with the stroller”.

Chris Ramones-Cruze
Chris is a 29 year old Project Manager in the food and beverages industry. He lives on his own in a unit in Marmion, but works in West Perth. As often as possible he tries to take his dog Spencer for a walk or to one of the many dog beaches along West Coast Highway. Even though Chris is a busy professional he likes to go out for drinks or dinner in the city with friends and keep up to date with current affairs in WA and around the world. When he’s not working he is active in his triathlon club in which he trains twice a week (this usually includes a long bicycle ride on Sunday morning). Chris is quite tech-savvy and regularly uses the web for work, to book holidays or make dinner reservations. He is also an eager user of Instagram which he often uses to post photos of his latest bicycle races and rides.

“I love having coffee in a relaxed atmosphere after one of my bicycle rides or after taking my dog to the beach. It would be great to be able find a new coffee venue quickly when I’m out and about”.
New Yelo website on the iPad
New Yelo website on mobile

Content Audit & Challenges
I first 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?

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.

Sitemap, Taskflow Diagrams, Wireframes & Sketches
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.

Sitemap
Taskflow diagram

MY SOLUTION

Site Structure & Content
Instead of having a site that required the user to navigate from page to page to access different sections of the site, I decided to create a one-page layout that would allow users to simply scroll vertically to consume the content.

The new home section of the site now offers a brief, three sentence introduction only, before moving quickly to the next section (food/drinks menu), which can be accessed by scrolling downwards on the page. Also the call to action (‘text Yelo for your coffee orders’) has been moved slightly lower on the page, but has been styled more prominently. Due to the fact that the cafe’s (food) menu is changing frequently with daily special being offered, it makes sense not to implement a set menu with prices on the site. However, adding large, enticing images, as well as re-formatting the copy and giving it more room to breathe, makes it easier for visitors to scan the page quickly and get an impression of the goods on offer.

Food & drinks section

Photos chosen for the previous site were quite repetitive and didn’t communicate the ‘Yelo’ vibe very well (also due to their small size that does not make use of the available screen space). Here I decided to create a grid of images that was comprised of shots that would either show the cafe’s interior, its surroundings or enticing food/drink offerings. By clicking an image visitors are able to enlarge each photo to take a closer look.

Photo gallery

The previous blog which was last updated in 2010 is currently solely text-based. It has now received a complete overhaul and informs visitors about healthy food/drink specials or events and happenings in the local area. Focusing on topics such as healthy eating, water sports or the environment it is in line with the interests of its main target audience. Each blog post is accompanied by a suitable image. Different filter options, an archive and a search function now enable users to find blog posts easily.

Latest blog posts on homepage (desktop view)
Blog index
Single blog entry

Yelo’s site had a ‘friends’ page which was comprised of just a few links to business partners, suppliers and/or related businesses. However, since users derive no value from having these links placed in their own section, I moved them into the footer. Lastly I kept essential contact info such as address, email and phone number, but added a Google map that lets users quickly pinpoint the cafe’s location. I also placed a photo of the cafe’s exterior in this section, to make it easy for people to recognise the premises when driving, walking or riding past (as might be the case for some of the target audience). Additionally, the footer shows links to the cafe’s presences on social media, letting customers keep up to date easily.

Contact section with map

User Interface & Visual Design
I wanted to keep the colours used in Yelo’s logo and current site and decided to only make very slight adjustments to the yellow (highlight colour) and grey (base colour). Additionally brighter shades of both colours were introduced and are used as background colours throughout the site — most notable on the fullscreen navigation menu on mobile and the call for action on the main page.

The typeface Source Sans Pro was chosen as the font for paragraphs, and smaller copy, while major headings used the typeface Oswald in uppercase letters. The typefaces were chosen for their readability on screen and because they work well with the hand-drawn style of the logo font. All come in various weights that have been utilised throughout the site — for instance the first paragraph of each blog entry uses Source Sans Pro Semi Bold Italic, while the remaining copy uses the Regular version of the same font.

Homepage (desktop)

MEETING USER GOALS

Atmosphere & vibe
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.

Healthy food and drink options
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.

Providing information while on-the-go
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.


POSSIBLE FUTURE ITERATIONS AND IMPROVEMENTS

Expand promotion of non food/drink product offerings
Cafe Yelo has a shelf of various non food/drink items for sale inside. These include beach or surf related products such as beach towels, sand toys, beach wear and more. However my current prototype does not put an emphasis on this and only shows some images of the goods on offer in the gallery section. Here a separate section on the site could come in handy to further promote some of the items on sale. Each month the section could focus on three particular products that are then highlighted with an attractive product shot and brief description.

Further highlight social media channels
My current prototype includes links to the cafe’s most updated social media channels such as Facebook and Instagram. Nevertheless, especially since Yelo is quite active on Instagram and posts new enticing shots frequently, a live Instagram feed could be implemented on the site. This would allow visitors of the site to quickly see what’s happening with their Instagram account and further encourage them to become engaged.

Put even more emphasis on healthy food options
Yelo offers great, nutritious food options. One possibility to highlight this fact even further, would be to add a dedicated area that provides additional information about some of the food on offer as well as its nutritional value. This info could also be incorporated into the blog, via individual blog posts that highlight a different drink or food item each week.

CONCLUSION

This was a fun personal project to work on and I loved re-thinking and revamping the current site in my own time. Would I work on this project again, having more resources and time, I would further invest in user research and talk to current and potential cafe patrons. This would allow me to dig deeper into their pain points with the current site, as well as their needs. It would also be great to have my current prototype looked at and tested by potential customers to see how well my site was received by users and uncover potential areas of improvement. All in all I very much enjoyed creating a website concept for a cafe I really like and visit myself on a regular basis.

Hit the 💙 if you enjoyed this article. Also you can hi on Twitter and Instagram. To see more of my work go to lauraniebel.com