Kahvila Ruori
2025 | UX/UI DESIGN, WEB DESIGN

Overview

Designing and developing a website for a small cafe in Hanko, Finland. Project also included designing a logo, branding and marketing materials.

kahvilaruori.fi

Client

Kahvila Ruori

Client

Kahvila Ruori

My role

UX/UI Designer

My role

UX/UI Designer

My role

UX/UI Designer

Tools

Figma

Wordpress (Astra theme and Elementor)

Adobe Illustrator

Tools

Figma

Wordpress (Astra theme and Elementor)

Adobe Illustrator

Final designs

Here is a closer look at the website designed in Figma and developed in WordPress. There have been small changes to the design presented below in the video.

The process

Image depicts a moodboard with options for text and colours for the website

Research

● Benchmarking for the logo and the website
● Competitor analysis
● Moodboard
● Interviews and regular meetings with the client
● Brief usability testing

Image shows two website mockup versions side by side.

Design work

● MoSCoW prioritization
● User journey mapping
● Digital wireframes
● Designing a flier and an opening hours poster in Figma
● Taking photos of the cafe, updating Instagram and setting up a Facebook page
● Logo design with Illustrator
● High fidelity prototype
● Time tracking

Handoff and iterations

● Sharing logo materials and guidelines through Google Drive
● Logo iterations when needed in the future
● Handing Google business account details to the client
● Maintaining and updating the website and social media accounts in the future

Accessibility & carbon footprint

The website is aimed to be as accessible as possible. This in ensured, for example, by using equitable ALT-text in images, assigning elements with correct HTML-tags and by ensuring WCAG AAA-level contrast ratios. Accessibility has been ensured with Stark's Figma plugin during the design phase and by using WAVE evaluation tool after finishing the website. There are still some minor fixes needed to be made. For example, the gallery element is not fully accessible.

Currently the website produces 0.32g of CO2 per page visit. This is mostly due to the amount of images and use of an embedded Google Maps element. Images have been compressed and the website uses webfonts only in the headings. Pingdom gives the website a 1.11s loading time.

Takeaways

All in all, this was a fun project. The idea behind the background image was to make the user feel that they are in a way already inside the cafe. While conducting competitor analysis I found many cafe websites to have the key information at the end of the site so I decided to have the address, opening hours and the map to be in the first section after the hero element for easy access.

Often image galleries are full of pictures displayed at the same time which can feel overwhelming. This is why the image gallery element has a limited amount of images and only some of them are displayed at once. As a whole the website aims to be warm and welcoming, which I aimed to convey in the font, colors and copy. Chosen WordPress theme and the budget available set some restrictions, so original designs could not be implemented fully, but this only affected in minor ways the footer and the mobile version.

The logo in my opinion has a lot of the essence of Hanko itself it being a seaside town. During the project I had an excellent opportunity to see what it is like to open a small business and what the process consists of digitally by adding the business to Google Maps etc.

If you are visiting Hanko contact me and I'll treat you to a coffee or vegan soft serve ice cream :)

Next project