Sayuri.M

(en)

Target

Men in their 20s who care about cleanliness but don’t want an over-styled look. They’re looking for easy-to-use, everyday products with a casual, effortless vibe. They are also interested in trends.

Challenges

How to express brand’s individuality in a sea of competitors.

Objectives

To increase sales by encouraging users who resonate to the brand concept, guiding them smoothly to the online store.

Concept

Effortless. But still sharp.

Information Architecture

To help users access the online store without confusion, I placed the ONLINE STORE button in both the header and footer, ensuring that the purchase path is always within view. Key phrases such as “Effortless. But still sharp.” and “Be clean. Be confident. Stay authentic." are placed in high-visibility areas to consistently convey the brand message and product appeal, drawing users further into the site. In the FEATURE section, I presented the three main product strengths using simple icons and short descriptions. This visually clear layout helps users quickly understand the value of the product and move smoothly toward a product selection.

Design

The overall design is based on five keywords: cool, trendy, clean, sharp, and modern. Since cleanliness is one of the core brand concepts, I chose a color palette centered around white and a navy-leaning blue, balancing freshness with a calm and cool tone. Gray is used for backgrounds, spacing, and supplementary elements to create a sophisticated, mature impression. In the PRODUCTS section, two items are displayed side by side to clearly show the differences, making it easier for users to intuitively choose the product that suits them best.

Key Points

1. Practice Through Replication
One of the key focuses of this project was design replication. I studied and recreated 17 different websites, carefully analyzing everything from the first view to the footer. I extracted and combined various design techniques, incorporating them into my own work. Even for small decorative elements, I carefully compared and analyzed different approaches to determine what would be most intuitive for users while effectively fulfilling the client's goals. The image on the left shows part of the replication process in Figma.

2. Geometric Line Patterns
To maintain a clean and sharp visual impression, I introduced geometric line patterns as subtle accents. These lines enhance the overall atmosphere without interfering with the content. They align well with the brand image—modern, trendy, and fresh—and help reinforce the tone and manner of the website. Additionally, the lines also serve as visual guides and section dividers, creating a natural flow that helps users navigate the site easily.

Production Time

Planning / Information Architecture / Wireframes

2 days

Design

2 weeks

Responsive Design

Not implemented (designed for 1920×1080 screen resolution)

Tools Used

Figma, Photoshop