muji_icon_mockup.jpg

MUJI

muji redesign

laptop-mockup_muji_banner.jpg

Brief

The team

Dhwani Krishnan

Cesar Buffington

Randy Friday

Melissa Frank

tools

Sketch

Invision

Adobe CS

Timeline

2.5 weeks

Please note this page is still under construction

My team and I were challenged to conduct user research using an existing website and then, based on that feedback and core UX principles, redesign the site to best suite the users needs. My team and I were assigned Muji.

We were allowed to choose to design for either primarily desktop or mobile, and to design and create a user flow for two screens for the secondary platform in order to implement reactive design.

Click the button below to see the final prototype for this project.


Research

Our first step as a team was to test the usability of Muji’s current site. We conducted user tests and completed a heuristics evaluation.

I chose to design for desktop, since users responded that they mostly have accessed Muji’s website from desktop.

When doing a heuristics evaluation, user interviews, and a card sorting exercise, my team and I found the biggest problem was the information architecture. Many of the categories, such as stationary, were split into so many subcategories, some of which had their own subcategories, that users were overwhelmed. It was also not an efficient utilization of the space in the site since many of the sub and sub-sub categories only had three or four items within them. In addition, if one product came in multiple color ways, each color way was shown as a separate product rather than a single product with color options underneath, wasting precious space and increasing the chance of losing a reader’s attention.

U3_HC - Heuristic Analysis - MASTER.jpg
U3_HC - Heuristic Analysis - MASTER2.jpg

Two excerpts from the heuristics evaluation that pointed to the most pressing issues with the website’s initial design, which were:

  • Users cannot find what they are looking for

  • Users find some categorization confusing

  • Users find the site’s language confusing

  • Poor organization of results


A/B Testing

Card_Sorting_small.jpg

The results of the card sorting exercise conclusively proved that many of the company’s organizational decisions were not understood by the majority of users. The naming conventions were not understood, especially in the categories of apparel, luggage, housekeeping, and home fabrics. We addressed these errors by moving “home fabrics” under the umbrella of “housekeeping. There were issues of familiarity with wording as well as with its organization on the site. The terms used to describe some categories and items “rattan” and “buri”, both of which are types of wood confused our user pool, who expected the application of the object to be its main descriptor, rather than its material.

A walkthrough of the site showed us that users had trouble finding the correct item, even understanding the organizational heirarchy and verbeage, still struggled to locate a specific items due to the design on the page. In the case of an item that comes in multiple colors, such as the carry-on hard suitcase, the item is located in several places throughout the page with items that have near-identical thumbnails. It was hard for users to find the bag they wanted with a quick scan of the page (see below, right).

Three different color ways of the same suitcase are displayed arbitrarily on different places on the page.

Three different color ways of the same suitcase are displayed arbitrarily on different places on the page.

Similar colors of differently sized objects are stacked next to each other. There is no consistency as to their sorting–neither by size nor color. The user must actively read each caption with great care before deciding to engage. This can also cause the user to question themselves, leading to a lack of confidence associated with engaging with the site.

MUJI_site_map_web.jpg

The primary navigation is extremely crowded, offering 11 alternatives, and each of those offers you links to at 3-11 more sub-categories. Very confusing!

Prototyping

Although we conducted research as a team, we were told to redesign the site alone. Based on what we had learned, I decided to go with a more minimalist approach to the website so that information would be easier to pick up if the reader was casually scanning the page.

Main Navigation

Before. This is the initial hover view. Note the lack of dead space that spans the width of the page upon hovering over the menu.

Before. This is the initial hover view. Note the lack of dead space that spans the width of the page upon hovering over the menu.

After. Each subcategory is more cleanly displayed, and the fear of accidentally “hovering away” and causing a tertiary menu to collapse is decreased.

After. Each subcategory is more cleanly displayed, and the fear of accidentally “hovering away” and causing a tertiary menu to collapse is decreased.

 

Bags & Suitcases

Before

Before

After. Each suitcase size variance is shown as a single thumbnail, with the option to view it in other color ways using hover.

After. Each suitcase size variance is shown as a single thumbnail, with the option to view it in other color ways using hover.


Final Product

iMac-Muji-gif_cropped.gif

Click here to see the final InVision prototype.