Mihai Popa · Digital Designer
01 / Web design case study
café fikasmysa.
カフェ・フィーカスミーサ
A café website with a menu and visit information.
I designed and built the Japanese website for café fikasmysa, a Swedish-inspired café in Narashino. It includes photos of the café, its menu, opening hours, directions and a contact form.
Visit live website (opens in a new tab)
- My role
- Sole designer & developer
- Platform
- Webflow
- Site language
- Japanese
- Project type
- Single-page café website
The request
Who the website is for
The café needed a simple website for local residents, families, older visitors and people visiting Kasumi Park. The request specified a Scandinavian style, with a small set of colours, blue or navy options, oak textures and easy-to-read text.
This page reviews the finished website against that request. The suggested checks below have not yet been carried out.
Introduce the café
Show new visitors what the café offers and where to find it.
Help regular customers
Make the menu, opening hours and other details easy to look up.
Reduce update work
Link to social posts so the café can share news without frequent website edits.
01 / Visual design
Café photos and colours
- What I added
- I used photos of the interior and exterior, the café’s name and logo, and a consistent blue colour scheme. Japanese text explains the Swedish words fika and mysa.
- Why these details help
- The colours and interior photos reflect the Scandinavian style requested by the café. A photo of the entrance helps visitors recognise the building, and the Japanese explanations make the Swedish terms understandable.
02 / Food and drink menu
Menu categories and prices
- What I built
- I grouped the menu into categories such as espresso, coffee, tea and cake. Opening a category shows the item names, Japanese labels, prices and hot or iced options.
- Why the categories open and close
- Closed categories keep the list short. Inside each category, names and prices follow the same layout so people can compare items. Visitors still need to recognise that they can open a category.
- Next check
- I’d ask someone to find the price of an iced espresso, starting with the categories closed, then try the same task using only a keyboard. If opening a category is unclear, I’d change the control and test it again.
03 / Visit planning
Directions and opening hours
- What I added
- I grouped the map, address, directions from the station, opening hours, payment methods and facilities in the Access section. The contact form follows, with fields for an email address and message.
- Why the details are grouped
- Visitors can check the route, hours and facilities in one section when planning a visit. I’d next check whether anything they need is missing or difficult to find.
04 / Mobile layout
Layout on a phone
On phones, I arranged the content vertically and put the navigation links behind a menu button. The photos, colours and content remain consistent with the desktop version.
I’d next check how easily someone can open the menu and find visit information. I’d also check text readability, enlarged text, keyboard operation, the visibility of the selected control, and the device setting that reduces animation.
05 / Result and next checks
The published site and next checks
What I delivered
I published a Webflow website with the café introduction, menu and visit information, laid out for desktop and phone screens. Social links and selected Instagram posts connect it to the café’s updates.
Visitors can see what the café serves and check the practical details before visiting.
Explore the original websiteWhat I’d check next
- Finding informationAsk first-time visitors to find the opening hours, directions and payment methods.
- Using the site in different waysCheck the menu and contact form with a keyboard, enlarged text and assistive tools such as screen readers.
- Updating the websiteReview how social posts appear and how the café keeps its information current.
Project visuals show the live café fikasmysa website.
Explore the café website