Designing for a blank slate — UXDI Project 4 Retrospective

  1. Introduction
  2. The Process
  3. The Solution
  4. What Next?

01 | Introduction

New project, new team, sixth week in. This time round though, we didn’t get to choose and instead, the briefs, carefully prepared by our UXDI lecturer, chose us. Well, sort of. We were tasked to redesign MUJI’s online store — more specifically to increase online sales through a modern and responsive site. We knew that the visual redesign of the website was going to be a challenge as MUJI, being MUJI, is known for its no-frills and simple designs. Thus, we decided to focus on uncovering problems in their current system and understanding the way MUJI consumers shop.

02 | The Process

The three of us were already fond of MUJI’s brand and products even before embarking on this project. After research more about the brand, we were even more sold on the idea. When I think about MUJI, their pleasant and homely storefront comes to mind. I began to wonder, how many consumers actually know about MUJI’s online store? We decided to run a quick survey.

27 out of 33 rated their familiarity of the MUJI brand a 4 out of 5 and above.
All of them have visited MUJI at least once.
Only 10 out of 33 have visited MUJI’s online store before.
In order of importance when shopping online: Navigation > Customer Support > Photographs > Sizing Information > Packaging & Delivery > In-depth Product Info > Product Variety > Recommendations

So why weren’t consumers visiting MUJI’s online store then?

User interviews + Usability testing + Affinity mapping

We interviewed consumers who have shopped online to get to know their shopping habits and favourite brands for reference later. For those who have shopped at MUJI before, we got them to share their opinion about MUJI, experience shopping in-store, and their reasons for buying/ not buying from the online store.

With their responses, we gained a more in-depth understanding towards how other consumers perceive MUJI.

The MUJI branding is consistent across consumers’ minds.
They trust brands that deliver consistent quality at a relatively low price point.
While MUJI isn’t cheap, the design and make appeals to consumers.
They like to touch and feel products at the physical store before making their purchase.

We also formed three Personas based on our interviewees’ buying habits, concerns, and challenges. This will help with drafting user flows later on.

While keeping all three Personas in mind, we decided to focus on Ruth first due to time constraints. As Ruth is a high-value customer who purchases both clothes and bulky home products, which offer fairly different information, we needed to make sure that the process of browsing and purchasing products from both categories is equally considered.

Below is a more refined version of Ruth’s ideal user flow when using the online store. She now has the added option to collect from store (for when her purchases do not qualify for free delivery or when the product is OOS or if she doesn’t have the time to browse products in store) or reschedule her delivery through the online store (a more automated process compared to call or email) provided the order has not left the warehouse yet.

If the user is already logged in, they head straight to the check out process.

We also conducted a Heuristic Evaluation of the existing site to pinpoint problematic areas, and a Competitive Analysis to sieve out features that could enhance a customer’s experience or increase sales on the MUJI’s online store. By mapping out our key Persona’s journey, we could also identify areas of opportunity that we could improve on with the online store.

Ruth’s Customer Journey Map

To this end, we honed in on a few key issues we had to address with the redesign:

Colour options were not displayed upfront when browsing. You could only look at the other colour options when you click into the product page
Main site’s global navigation and product-specific landing page direct users out of the online store and into dead-ends.
Online store’s content was lacking and disconnected from MUJI’s other channels.
Lack of MUJI’s values and human touch in the design.
Suggest complementary pairings between products and to help users better visualise how the product would look like in their home or office.
Redesign Information Architecture of the site to reduce confusion due to duplicated and unstructured categories.
Improve on online store’s delivery process.
Integrate online store presence into physical stores.

03 | The Solution

Quick sketches using Design Studio — A lean UX methodology

Design Studio is a pretty easy and effective way of generating lots of ideas and validating them in very little time. The tough part is having to decide on just one. As we were strapped for time, we decided to start working on the wireframes and iterate the design as we went along.

Wireframe to high-fidelity interface

Working on a ‘responsive’ design meant that we had to consider mobile, tablet, and desktop interfaces at the same time while still maintaining the user’s flow. This was particularly difficult to achieve as smaller screen sizes meant that less information is shown on the screen at any one time and relied more heavily on intuitive gestures (eg. pinching, swiping). Mobile screens also present information more linearly, as the user’s field of vision is limited to the width of the screen and the (mostly) vertical scrolling. On a desktop screen however, there are a myriad of areas a user can look at (or miss).

Keep important information above the fold

We were also working mobile-first on this project for a few reasons and assumptions:

The point of discovery of the online store is at the physical store, through social media, or e-mailers.

Our busy Personas are more likely to browse and purchase from the online store if it were optimised to their devices.

Previously, users could not locate clothes of a certain colour in the category or search as it was hidden. We reworked how products are displayed, taking design cues from brands our users are already familiar with.

Before — After

Then came testing. We didn’t have many interactions in yet so we wanted to simply observe how users browse, where they’d press, and what they’d expect. Would they press on the tiny squares or click through to the item page to preview colours? Can they check out their purchases without too many hiccups? Well…

Users would click through via the product image (but when the prototype lagged for one user, she tried clicking on the squares as well).
Another user expected a quick view of the product page.
Users also tried to zoom into the product previews at the product page.
At the order review screen, a user tried to go “back” to review delivery once more but there was no option to do so, so they exited the process via the MUJI home icon.

We conducted two rounds of Usability Testing, mainly focusing on the mobile site to iron out the details in the user’s purchasing flow.

MUJI Inspirations

As MUJI’s products are often featured against a white background, there’s almost almost no context to what some products are for. During initial usability tests, we had users locate a product for organising their desks. It didn’t go down well as users became confused by ambiguous category names and products.

Ideally, I’d suggest ditching the minimalistic/white-space approach and have more context-based product previews. For example, using a photo of a desk organisers on a desk. Alternatively, optimise the existing Product Recommendations feature to enable the discovery of complementary features.

“How do you use this?”

Together with a look-book feature, users can visualise how the product will look like in their workspace. Or in the case of clothing, how it pairs flexibly with other items to create styled outfits for various occasions.

Inspiration on the go

04 | What Next?

Too many ideas, too little time to implement. We never stopped finding new ways and new features to improve the user experience of MUJI’s online store.

In the days leading up to the presentation we had to buckle down as a team to complete the minimum (a functioning prototype from browsing to purchase and rescheduling of delivery) before moving on to other features.

Some features we want to explore and expand into are reviews, improving the search, and further usability testing for the tablet and desktop sites.

Another aspect we explored was Service Design, by moving a portion of MUJI’s interior advisor service online. By allowing customers to conveniently book, preview designs, and manage delivery online, they won’t have to make as many trips or calls.

With the feedback from our lecturer, we’ll also look into implementing a guest checkout feature where customers won’t have to log in to make a purchase.

That said, we’re on to our final project in General Assembly!