irori bakes

irori Bakes:
Conceptual UI/UX Design
for a Cozy Bakery Cafe

Project Type

UI/UX Design

Duration

January - February 2024

Tool Used

Figma

Overview

I designed a website for irori Bakes, a bakery café blending nostalgia and modernity.

My goal was to create a warm, user-friendly experience that reflects the traditional Japanese hearth ambiance while incorporating contemporary design elements to appeal to a wide audience.

Strategy

To create a nostalgic yet modern design, I started by developing a mood board and personas to define the brand’s atmosphere and audience.

Personas

　・Professionals aged 25 to 45

　・Value traditional design, high quality, and ease of use

　・Prefer modern cafés with a nostalgic feel, focusing on seamless menu browsing and 　　ordering

Mood board

Inspired by the traditional Japanese hearth, the atmosphere is expressed with warm colors and modern typography.

Design Process

To ensure visual consistency, we designed a custom icon set and brand style guide. The logo was an illustration inspired by a Japanese thatched roof, and the icons were digitized from sketches. We defined the colors, typography, and other UI elements.

Low-Fidelity Wireframes

After creating paper prototypes, I developed low-fidelity prototypes in Figma for the website. These prototypes included the following key pages:

　・Home
　・Menu
　・Online Ordering

　・Events

I tested the user flow for adding to cart for online orders and gathered early feedback.

081974c8-adf4-48ed-944a-744683bfa31a_edi

Critique Feedback

To refine the design, I received critique feedback from colleagues. This feedback helped identify the following areas for improvement:

　・Adding an image of a fireplace to the homepage to highlight the brand's originality.
　・Simplifying the navigation to make it more intuitive for users to find the menu.
　・Enhancing color contrast to improve text readability.

High-Fidelity Prototypes

Based on the critics' feedback, the final high-fidelity prototype was created with the following main improvements:

　・Home page: Added a fireplace image to enhance the brand's originality and create a 　　　　　　　　cozy atmosphere.
　・Menu: Changed "Categories" to "Products" for easier browsing.

　・Design: Simplified the layout to highlight product photos and create a cleaner look.

Feedback helped refine the user experience and ensure the site felt warm, nostalgic, and easy to navigate.

What I Learned...

Through this project, I learned the importance of balancing design with usability. I gained insight into how to incorporate brand identity into the design while keeping the user experience intuitive and accessible.

Iterative feedback was incredibly valuable in refining the design and addressing user needs. Whenever opinions on design varied, I created and compared multiple design options to find the best solution.

Overall, this project reinforced the importance of flexibility and adaptability in the design process. I’m satisfied with how I was able to maintain the brand’s identity while prioritizing user needs and ensuring the design was both functional and engaging.