Kashiyama
All deliverables created at MRM Commerce
Overview
Kashiyama is a global made-to-measure suiting brand originating from Japan. We were tasked with supporting their US launch on multiple fronts. One being the launch of an ecommerce experience and the other a full in-store stylist experience/POS system. Designing tools that make fit appointments easier for employees was a major business priority as well as a great creative challenge for us.
Discovery
During Discovery I spent a lot of my time immersing myself in the business through a series of client workshops. We learned about the Kashiyama made-to-measure process, brand values, strengths, and pain points. The most illuminating parts were without a doubt being fitted and suited myself, as well as interviewing stylists and managers from various stores. This put me in the shoes of both customers and stylists.
Design
The launch was massive as we were building two robust experiences. One was a client facing ecommerce site with a twist (business model requires customers to get fitted in person). The other, a stylist portal experience that gives employees any tool and feature they would need during an appointment. Thoughtful design required a real understanding of the process externally and internally.
Discovery
UX workshops focused on:
Kashiyama as a brand and business: Through stakeholder interviews I learned about Kashiyama’s value proposition and differentiators. I also learned about how the business operates behind the scenes.
The customer journey: I got fitted for a suit, which allowed me to experience the customer journey myself and understand the made-to-measure process.
The stylist journey: I interviewed stylists from guide shops across the country to understand how I can make their job easier through both the customer-facing site and stylist portal.
Main challenges to tackle:
A painful stylist process: Stylists were managing client details (measurements, customizations, notes) manually during appointments, then re-entering everything into a legacy system afterward. It was time-consuming, error-prone, and inefficient.
Customer confusion: Many customers didn’t fully understand what made-to-measure meant, how appointments worked, or the expected timelines. They also lacked a way to visualize their suit, highlighting the need for a clearer, more guided experience.
Defining the experience
A unified platform: We decided to build the stylist portal on top of the customer experience so both users share key components (the product configurator, account interface, and checkout) with role-based adjustments.
Streamlined stylist tools: Stylist-specific features like client lookup and measurement flows live on the front-end for a seamless experience, removing the need to toggle between the website and Magento’s admin panel during appointments.
Sample screens from the Sitemap and Template Inventory
Wireframes
There were obviously so many different templates and states that were created for Kashiyama. Below is a very small sample.
Content-focused pages like the Homepage, Product detail page, About us, etc. were “simplest” from a requirements perspective. The challenge then became more around thoughtfully introducing the brand, the business model, and the suiting timeline.
Homepage
The homepage needed to achieve several things:
Introducing this new brand to a US audience (who we are, what we sell, why we’re better).
Clearly communicating Kashiyama’s business model and next steps for new customers (how this works, what do I need to do).
Showcasing hero products and encouraging users to start exploring the catalog.
The Customization Flow
Kashiyama’s product customization process is very robust. For the classic suit in particular, there are a lot of options we needed to present the user with. A few goals I had while designing this tool:
Clarifying required vs. optional steps: The UI needed to clearly show which steps were mandatory and which were pre-populated or optional, so users always know what’s expected of them.
Flexible engagement: Since most customizations are pre-configured, users shouldn’t be forced to move through every step. They can choose which options to explore before finalizing their configuration.
Real-time visualization: The product preview lives on the same visual plane as the configuration options, allowing users to see updates instantly as they make selections.
Device-friendly design: Every breakpoint needed to feel intuitive, with special attention to the tablet experience since it’s the primary tool used in-store.
Product Configurator Tool Sample Wires: Main Menu
The overall pattern I opted for was that everything happens in one screen. Product image and main CTA/pricing is always visible on the left while the right displays either the customizations menu or the customization detail you selected (choose fabric, lapel, buttons, monogram, etc.). This helped a complex flow seem simpler.
Fabric Detail
In this state users have selected a customization type from the menu (choose fabric) and can see their options. Choosing a fabric is one of the only required inputs we cannot have a pre-set for. Once they choose a fabric they will return to the menu screen where they can click into a different customization type.
Other Detail Screens
Most other customization detail screens follow this general template. Users can see visual representations of different customizations, and receive some context helping them make a decision based on style and preferences. Users can add to bag at any point once they’ve entered required selections and be directed to their cart.
Stylist Experience
Stylists use a unique log in to access their portal. Via the sign in module they can find existing clients, add new ones, and manage them. When they opt to manage a client they can view pertinent account information, record their measurements, their product customizations, and check out. Some pages are unique to them while other pages are similar to what a customer would see, only with unique privileges.
Client Profile
Main goals and requirements when designing the stylist measurements flow:
Stylists have two measurements modes: static and active.
In a static mode stylists view existing measurements history while in an active mode they are adding a new measurement instance during the ongoing appointment.
Although the process is complex and requires the input of a lot of information we wanted to make it feel simple.
Some inputs that used to be manual are now automatically accounted for in the system like date.
All profile pages are now in one place organized by tabs. Previously the stylist had to click through many different screens, making it harder to refer to, review, or edit entered data.
We added new features like customer and garment notes associated with the user so any stylist in future appointments has easy access to historical information.
We added measurements tips as well as checks and balances to alert stylists when they enter values that may not be correct.
Active State Sample Wires
