Steven Kuo's profile

MUJI - Desktop Website Redesign

MUJI - Website Redesign


Project Details:
My role: UI/UX Design and Research
Tools: Sketch, Invision
Deliverable: High-fidelity mockup of redesigned website

Brief Summary:

MUJI is a Japan-based retailer that offers a selection of products including household goods, apparel, and food. 

They take a simplistic and unbranded approach to their products. Their aim is to produce low-cost and good-quality products. 


The Challenge:

MUJI's online platform is visually outdated and product pages are cluttered with content that is not core to the interaction between user and desired products. 

The in-store experience is not translated into the online-store experience.

The Proposed Solution:

Modernize the online-store landing page to resemble more of that clean, organized aesthetic that the in-store experience provides whilst maintaining ease-of-use in navigation. Simplify the product page by removing information that is not core to the experience and competes with other units of information. 

The Design Process:
In this particular project, it will primarily be focusing on steps 1-3 and 6. In an ideal situation, I would be able to gather qualitative data regarding customer's thoughts on the current MUJI product and home page through the use of user interviews in the research phase to utilize as a basis for an A/B test (05). 
Persona:
Based on multiple site visits at two different MUJI store locations, the biggest customer base seemed to be Asian Teenagers. I would have liked to have data for both in-store and online-store demographics for a more accurate representation. I used the persona as one guide for my design decisions.  The most popular section of all site visits was the consistently the stationary section. 
Understanding the goals of the Business & Brand
To get a better understanding of what the company wants to express through their products and stores, I looked into their About Page. Now this could be a severely poor source of information if the about page were to not be an accurate representation of what the business' goals and needs. However, for the purpose of this project I went with this as a high-level list of details about the company. 

From looking at their website, their goal is to give customers "rationale satisfaction" in their purchase and to promote "No-brand quality goods"
Iterations: 
For the landing page, the main concern was information hierarchy and organizing the content in a way that can still promote what the company is trying to push for while providing customers quick access to the products they want to look at. 

The current page has a lot of text and that could increase the time that a user has to look around a page. The design also seems outdated in that every bit of content is competing with each other. My iterations during wireframes involved thinking about balancing out content and still readily providing what is important to both the customer and company. 
For the product page, the idea was to clear out any redundant content that could be better organized and need not be looked [even accidentally]. The categories from the original website's design was always taking up a good portion of space on the screen that was not core to emphasizing the value of the product being looked at.

My iterations here after a couple of hand-sketches were to find a good place for the alternate images to be easily accessed and which pieces of content would be most important to a customer looking to buy something. In the wireframe below, the price, reviews, color, and size are the first things shown to indicate whether there is even an availability of the item. 

The current website seems to put a priority on product materials used, which may be because of the company's concept of producing quality goods-this may not be the first-most important aspect of a customer's purchase. The challenge here is going against the company's value of emphasizing the material [because they speak of the term "quality-goods"].

A way to measure this could be to conduct a survey asking what users' care finding about most in order of importance and potentially a few short interviews with MUJI's actual customers to get a more accurate representation of what their customers care about.
Before and After: Landing Page
Before and After: Product Page
Challenges:
Working with a "best guess" approach with low amounts of data makes design decisions less convincing with little to no validation. The site visits had customer demographics that could have been strongly affected by the demographic of the people who live in those cities. Speaking to customers and employees at the store could only surmount to comments about the in-store experience they were working in. 
Final Design:
Shopping Cart Icon: Gregor Cresnar 
MUJI - Desktop Website Redesign
Published:

MUJI - Desktop Website Redesign

Redesigning aspects of MUJI's website through the use of UI/UX Design techniques.

Published: