Kashiyama
All deliverables and artwork 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.
Understanding the product customization flow as part of a workshop
Main challenges to tackle
The stylist process was painful - Stylists had a very manual process of entering client information (measurements, customizations, personal info, notes). They had to physically write it down, then enter into a legacy system after the appointment and finalize the order then. This wasted time and caused unnecessary errors.
Customers were confused - Customers had misconceptions around made-to-measure, the appointment process, the suiting timeline, and more. There was also a need for a configuration tool to visualize their suit. A robust and thoughtful customer experience was needed.
Defining the experience
Building the stylist portal on top of the customer experience made sense to us to the team as some features can be built once and used for both users. Customers and stylists can use the same product configurator, account interface, checkout, etc. with slight modifications based on the user.
Stylist features like “client lookup” or the measurements flow would only be available to logged in stylists but still live on the front-end to ensure stylists don’t have to switch between the site and the Magento admin panel at all during an appointment.
Creating the sitemap helped me define these flows for both users and get us ready for the design phase.
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.
During our stylist interviews I took note of any common customer misconception or point of confusion around Kashiyama. From having to visit a store in person to the appointment itself to how Kashiyama can offer such quality and affordability. My goal was to answer all of these questions successfully through the client-facing site.
Homepage
The homepage needed to achieve several things. The first, introduce this new brand to a US audience (who we are, what we sell, why we’re better). The second, clearly communicate Kashiyama’s business model and next steps for new customers (how this works, what do I need to do). The third, showcase hero products and encourage 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:
Clearly communicate to users in the UI what steps are optional (pre-populated) and what steps are required.
Since most customizations will be pre-configured we don’t want to force users to go through every single step in order to complete the configuration. They should be able to decide which optional steps they want to engage with.
The product configuration must be on the same visual plane as the configuration options so users can see the product as they make selections.
All breakpoints should be user-friendly. Especially the tablet as it would be 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 measurements 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
