Responsive Web Design for Wiedikoji
The goal is to re-design a website into a responsive web design, to bring the brand identity, services, and qualities to life.
Making the UX a delightful and easy experience.
Wiedikoji was founded by a couple of mathematicians who, during the pandemic, discovered the joys of fermentation-based cooking, after some time experimenting with fermentation, and following a trip to Japan to study fermentation more deeply, now they offer their services for catering and supper dinners.
UX Research
Problem Statement
The current Wiedikoji website presents catering, fresh products, supper clubs, and miso kits. It is built with text and images, but the website is rigid, and it doesn’t show the brand vibe.
The layout is static and lacks responsiveness and visual harmony with the brand’s Instagram presence. This inconsistency weakens the vibrancy of Wiedikoji’s identity and diminishes user engagement, especially on mobile devices, for the website is not responsive to different screen sizes.
The design feels outdated and mismatches with social media aesthetics.
Project Objectives
Ensure full responsiveness: Design a fluid layout that looks polished and functions seamlessly on mobile, tablet, and desktop.
Visual and brand alignment: Update the color palette, typography, spacing, and imagery to match Instagram’s vibrant, modern aesthetic.
Improve usability: Streamline navigation to make it easier for users to browse offerings—catering, bread, supper clubs, miso kits—and contact via email or Instagram DM.
Highlight visual hierarchy: Emphasize “Next Supper Clubs” and product highlights in ways that draw attention and encourage interaction.
Competitor Analysis
Competitor
Description
Pop-up dinner parties in Zurich, organized around themed, communal long-table events. Hungry Klub
Exclusive tavolata-style dinners in a loft above Bahnhofstrasse—limited seasonal events. Hotel Vitznauerhof
Key Features
Pop-up dinner events, themed décor, private/business customizable bookings, strong event design.
High-end 4-course menu, beverage pairing, elegant ambiance, fixed seasonal schedule, premium pricing.
Underwaterlove
Pop-Up Restaurant
Seafood-themed pop-up at MAME Seefeld with a 5-course surprise menu for limited days. underwater loveSwitzerland Tourism
Surprise menu, fixed date spans, seafood focus, online reservations, event-driven.
_edited.jpg)
Affinity Map Key Insights
Clear Communication: What is Wiedikoji? Supper club? Catering? Both?.
Visual upgrade: Align Instagram’s energy (food + social people) with a modern, structured website.
Transparency: Prices, menus, allergens, location, host info, event calendars.
Trust signals: Testimonials, professional booking/payment methods, clearer brand story.
Accessibility: Mobile-first, bilingual (DE/EN), easy navigation.
Community Proof: Show people enjoying, not just food close-ups.
User Research Personas Lisa & Klaus
My personas are Lisa and Klaus. Each one represents the audiences of Wiedikoji. One represents a person that goes to the supper clubs for the experience and another one that goes for the food.
*Photos generated with AI
.png)
.png)
.png)
Project Goals
Wiedekoji is a small business that is looking into sustainable growth, but not exponential just yet.
With the responsive design website, all actors' goals were reached.
Problem Statement 1: Current Website is not Mobile Responsive.
Background:
Wiedikoji's current website doesn't have a mobile-first design, and people heavily use the website through Instagram on their phones.
Problem Statement 2: Current Website has an Outdated and Rigid Design
Background:
Wiedikoji's website was designed with simple HTLM coding, and as a result it looks like a website from the 90's, and its format is not ideal for new devices.
Problem Statement 3: Key information is missing
Background:
Wiedikoji's website today is missing key information, such as prices, and alimentary restrictions. It is also lacking pictures and testimonies for the social proof.
Features Set
The new design must have a clear view of the two main services. Catering & Super clubs dinners Each page has to show easily and clearly the key information.
For example, menus and pricing.
.png)
User Flows
Three major tasks were the focus of this case study: "Book a Catering service", "Book a Supper Club", and " Subscribe to the Newsletter."
These three user flows show how the website will be structured.
UI Design
.png)
Low-Fidelity Wireframes
Low-Fidelity Wireframes for the Widiekoji website show the initial concept of having a landing page divided into two "Catering - Supper Clubs."
In the following screens, the challenge is to show the menu options in a coherent, clean way. As for the supper club flow, the challenge is to show the social proof without saturating the website-
Mid-Fidelity Wireframes
Mid-Fidelity wireframes show the Supper Club screen with general information about the event, the home page, and the about page changes.
.png)
.png)
The colours and background patterns are inspire by the Wiedikoji brand identity and the traditional Japanese patterns
A major challenge in this project was to show the amount of information without being repetitive and /or overstimulating.
First Website Prototyping Test Results
This section summarizes the feedback collected during mid-fidelity usability testing. Most participants were able to complete the assigned tasks quickly and without major issues, indicating that the core user flows are clear and functional. However, several users noted that some pages feel visually overloaded, with an excess of food photography and text competing for attention.
Positive feedback
-
It’s easy to tell the difference between the Catering and Supper Club sections.
-
The consistent orange and cream colour palette feels bright and friendly.
-
The food photography does a great job of showcasing both quality and variety.
-
A booking process is clearly in place (calendar, form, thank you page).
Meh feedback
-
Some pages are heavy on text and food photos but lack images of people, which makes them feel a bit static.
-
The visual style looks a bit like a template, rather than a fully developed brand identity.
Negative feedback
-
Important details like dietary notes, upfront pricing, or information about the team aren’t highlighted visually.
-
The navigation feels a bit flat, which might make it tricky to jump between sections quickly.
Iterations and High-Fidelity Prototype
Some of the required iterations were, for example, changing a full-text table of contents for cards that show in a faster, more readable way the information for the catering options.
.png)
Catering packages information. Before
Catering packages information. After
.png)
Iterations
-
Add more people-focused photos (guests, groups, hosts in action).
-
Revamp the homepage with a tagline and testimonial preview for clarity and trust.
-
Use icons and visual cues for dietary info; improve the menu layout for events.
-
Strengthen the About Us section with a mission statement and larger team images.
-
Clear forms and payment methods.
.png)
Takeaways & Next Steps
This project has contributed to my growth as a UX designer by putting into action not only the research but also all the design principles. Defining how to present the information in a way that is easy and understandable.
Working with actual “clients” And catering to their needs and wishes was an enriching experience.
A key problem was to build trust in a brand that exists only on another platform, to transport a brand from social media to the web.
Using visual elements to present the information better, such as cards, hovers, etc, was crucial to organizing the amount of information.
.png)
.png)
Next steps
To do a last check with the Wiedikoji duo and hear their last feedback.
Then, to build the website on a platform such as Wix or Framer to give it to the clients