Responsive Web Design for Wiedikoji
This case study focuses on designing a digital experience that reflects the identity of Wiedikoji while making information, events, and offerings clear and easy to navigate.
Role: UX/UI Designer
Scope: Research, information architecture, user flows, wireframing, and visual design
Timeline: 3 weeks
Wiedikoji is a culinary and fermentation project based in Zurich, focused on creating shared food experiences through events, workshops, and community gatherings.
The project brings together food, research, and social interaction, with a strong emphasis on detail, sustainability, and human connection.
Problem Statement 1: Information structure and clarity.
The project offers multiple types of experiences, for example: dinners, workshops, and collaborations, but the information is fragmented and not clearly structured.
This makes it difficult for users to quickly understand what is offered and how to engage with it.
Problem Statement 2: Translating a physical experience into digital.
Wiedikoji is strongly rooted in physical, sensory experiences, but its digital presence does not fully reflect this identity.
The challenge is to translate an experiential and human-centered project into a clear and engaging digital format.
Problem Statement 3: Navigation and user flow.
Users need to move between different types of content, events, background information, bookings, but the navigation is not intuitive.
This creates friction and makes it harder for users to take action, such as signing up or exploring further.
.png)
Project Goals
-
Understand quickly what Wiedikoji offers
-
Explore events and content without confusion
-
Feel the identity and atmosphere of the project
-
Easily access and sign up for events
UX Research
I started by looking at how people currently discover and interact with Wiedikoji.
Through conversations with stakeholders and reviewing the existing website, it became clear that the content (catering, products, supper clubs, and workshops) was present, but not clearly structured. The information felt fragmented, making it difficult to quickly understand what Wiedikoji offers.
At the same time, the digital experience did not fully reflect the identity of the project. The layout was rigid and not responsive, and the visual language felt disconnected from the more dynamic and expressive presence on social media.
These inconsistencies reduced clarity and engagement, especially on mobile. From these observations, I identified key friction points and defined the main user flows and priorities for the redesign.
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)
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)
Information Architecture
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.
To ensure consistency, reusable UI components and layout rules were defined and documented, enabling scalable implementation across pages.
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