Introduction

MUJI is a retailer based in Japan selling household and consumer goods. It takes an “unbranded” approach, and is known for its minimalist, simple products. Its stores are designed to give shoppers a pleasant experience by being organized and welcoming. However, many customers have voiced the opinion that the MUJI online shopping experience can be quite the opposite. The site content is cluttered and the navigation is confusing, and there is little connection between the online store and the brick-and-mortar stores.

Project Details

• Duration: Two weeks
• Team: solo
• My Role: All UX research and design
• Tools: Sketch, InVision
• Deliverable: interactive digital prototype of redesigned website

The Challenge:

How can the cluttered, confusing MUJI online store better reflect the intuitive in-store experience?

The Solution:

By having access to a streamlined, improved MUJI website, users will have a much smoother and more enjoyable shopping experience.

Case Study

Site Visit

At the early stages of the project, I made a site visit to the MUJI store in San Francisco to experience it in person. My goals were to handle physical products, gauge customer demographics, and compare the in-store and online shopping experiences. I discovered that the store was indeed well-organized and maintained a pleasant and relaxing atmosphere. Some key findings from my visit as well as an interview I conducted with an employee were as follows:

• No in-store pickup of online orders
• The store is organized and tidy
• Employees are mostly in the dark about the online store
• Largest customer demographic: Chinese/Korean teenagers
• Most frequently bought product category: stationery
• Customer age range: 16-60, even gender split

Competitive Analysis

I started my competitive analysis by identifying similar stores and analyzing general characteristics like usability and page elements, as well as customer service. I discovered that other stores differed to varying degrees in all of these areas compared to MUJI. In particular, I found that Uniqlo’s in-store pickup feature and online user flow was intuitive and smooth, so I eventually based much of my design on that.

Ideation

From all the information and insights I gathered, I decided to focus on three main points for my design.

1. Simplified Site Navigation
The information architecture of the existing MUJI website is confusing and overly cluttered. The redesigned site will remove redundant elements and combine similar ones to simplify the navigation process. It will also be arranged in a way that the user can find their desired products easily.

2. Condensed Checkout Flow
The checkout process will be condensed to as few screens as possible while not overwhelming the user with too much information on any single screen. This will help users complete their orders as smoothly and quickly as possible.

3. In-Store Pickup Option
In addition to standard shipping options at checkout, an option will be added for free in-store pickup, which will remove the extra cost of shipping on top of the total price as well as strengthen the connection between physical and online store experiences.

Information Architecture

Prior to creating any sketches, I examined MUJI's information architecture. The existing MUJI website is confusing and cluttered. After conducting several card sorts, I condensed and rearranged the primary and secondary navigation into a more intuitive site map.

Wireframes

Having established a framework to guide my prototyping, I made some quick sketches to get my ideas on paper, then moved those ideas to digital wireframes. The following is a selection of of low-fidelity wireframes of the checkout flow, as well as the feedback I received.

Iterations

After initial usability testing, I increased fidelity while incorporating improvements to the interface. Keeping in mind the importance of minimalism both in heuristic evaluation and in MUJI’s branding, I started with the home page and removed much of the unnecessary elements, opting instead for a simple main navigation and a few features, as well as a search bar. Based on feedback, I decided to make the flow be driven by the home page feature itself rather than the search bar, so I made “featured stationery” the most prominent item.

Before and After Example: Product Page

I removed many unnecessary elements from the product page. On the redesigned page, all important information is visible above the fold, and the "Add to Cart" call to action button will be distinct. Clear breadcrumbs at the top will also improve navigation.

Iterations Example: Checkout

At first I made each step of checkout a separate page, but in response to feedback that the whole thing felt too long, I condensed all of the fields into one page. After receiving further feedback that the full order summary was too prominent and detracted from the importance of the call to action buttons, I reduced the order summary to a small box and rearranged the fields into a vertical orientation.

The first thing the user sees when going to MUJI's website will be a landing page with a few banner images of featured product categories that best represent the brand.

Product Pages

By clicking on "featured stationery", the user will be redirected to a product listing page showing a number of popular stationery items. Products will be displayed in a concise, readable fashion, and search results will be sorted by price by default, in order to help the budget-minded shopper. Clicking on one of the product thumbnails will bring her to the product detail page, where she can add the product to her cart.

Checkout

Once the user has added all desired items to her cart, she will check out. All of the fields that she needs to fill out will be on one page.

Clickable Prototype

Below is a clickable prototype of my final design. This was made with the persona in mind. The scenario is as follows: Grace lives near SoHo. She goes to the MUJI site for the first time to buy some good quality stationery products. The first thing she is looking for is a set of black pens.

Next Steps:

Going beyond purchases, a feature that would also be beneficial to users would be in-store returns of online orders, based on findings gathered from additional research I did. Reading through online reviews, and reinforcing my existing research, customers expressed frustration with the lack of cohesion between store and website, and the poor customer service overall. Having the ability to return online orders in store would save the user the trouble of having to ship their products back and potentially having to pay more for return shipping.

Challenges:

This project was fairly straightforward because it was nothing new; however, I did encounter some challenges early in the process while doing my research. I wasn’t sure what problem to zero in on other than navigation. Also, MUJI store employees could only comment on the in-store experience, and could not provide any insight on the online store experience.

Key Takeaways:

I learned to not get too attached to ideas at any stage in the process, as they may prove to be unusable in the long run, and user testing may produce feedback that results in the need to radically change some things. Overall, this project was fairly straightforward and I felt positively challenged and motivated throughout the whole process. What kept me motivated was the desire to create a usable product, as well as the drive to develop and improve myself as a designer.