Sayuri.M

(en)

Persona

Customers of all genders in their late 20s to 50s who visit the cafe.

Challenges

The current site layout is monotonous, making it hard to distinguish between different categories. All information is cramped into a single page, which makes it difficult to navigate. Some items in the global navigation are misleading and don’t clearly reflect their content.

Objectives

To create a well-structured and easy-to-navigate website that allows users to find information effortlessly. The homepage includes buttons that naturally guide users to lower-level pages.

Concept

A special place where the ocean is right in front of you—so close you could reach out and touch it. An extraordinary experience that feels like a trip abroad, right here in Japan.

Information Architecture

Right after the first view, I placed a concept section to help users naturally immerse themselves in the brand's world. Since the cafe is open only during certain periods and has different business hours depending on the day, as well as some access issues (like inaccurate GPS locations), I addressed these concerns in the access section with maps, addresses, and additional notes for clarity. Regarding the cafe rules, I intentionally placed them at the end of the page instead of at the top to avoid intimidating users who are still deciding whether to visit. This allows the rules to be conveyed in a more relaxed and natural flow for those who have already engaged with the content.

Design

Based on an analysis of the current site and social media posts, I assumed that the target audience consists mainly of customers in their late 20s to around 50s. With “ocean” and “a sense of escape” as the two main keywords, I focused on creating a spacious and open design by using generous white space. Placing the concept section immediately after the first view and using the main color as a background helps define the visual flow and clearly separates each section.

Key Points

1. Clear Prioritization of Information
Since the cafe also offers a photo studio and esthetic services, I designed the layout to present these three services equally at first, then prioritized the cafe content as the main feature. Within each category, I reorganized the hierarchy so users can quickly find what they're looking for. The current website only has social media links in the footer, so I added them to the header as well to improve usability and access.

2. Visually Engaging Layout
To showcase the cafe’s biggest appeal—its stunning seaside location—I used large, high-quality images of the sea, sky, and architecture throughout the site. By making the photos the centerpiece of the design, users can instantly get a sense of the atmosphere and feel compelled to visit. Within sections, I layered photos like visual elements to create depth and a sense of movement, while keeping the layout clean and simple. Additionally, by incorporating images taken at different times of day (like sunny skies and sunsets), I expressed the multifaceted charm of the cafe. This helps convey the message that “no matter when you visit, it’s always picture-perfect.”

Prouction Time

Information Architecture / Wireframes

2 days

Design

3 days

Responsive Design

Not implemented (designed for 1920×1080 screen resolution)

Tools Used

Figma, Photoshop