Desktop and Mobile Muji Responsive Web Design

Responsive Web Redesign

Research phase: McKellen Rattray, Weiying Yu, myself | Design phase: Myself | Duration: 2 Weeks | Project Status: Complete

My Role: UX Designer, UX Researcher (Recruiter, Usability Test Moderator)

Overview

MUJI is popular for its minimalist design and simple brand experience. It products consist of stationery, personal organization, and the home lifestyle.

The team was tasked with conducting research on MUJI’s in-person and online store experience.

We used the following methods in the research phase:

  • Contextual Inquires
  • Feature Analysis: Comparative & Competitve
  • Competitive Matrix
  • Heuristic Evaluation using Abby’s Method (evaluating the usability of the current website)
  • Card Sorting using a tool called Optimal Sort by Optimal Workshop (used to evaluate how participants categorize products vs MUJI’s categorization)
  • Sitemap
  • Creating User Flow, Task Flow, User Journey
  • Usability Testing

The research phase informed my design phase and where to begin.

What did you set out to achieve?

MUJI’s website had some layer of difficulty in it’s website layout on the mobile and desktop. I set out to improve the design layout and checkout process of the website. I begin by looking at the card sort, sitemap, and contextual inquiries to inform the design.

Currently the desktop:

  • Doesn’t follow the trending standards of E-commerces website design
  • There are two layers of websites before getting to MUJI’s online store. First, you’d have to select the region. Then second, find the online site from the USA company page.
  • Once you’re at the online store. The layout feels dated and needs a design that’s responsive and follows web standards.
  • The menu on was left side had no preview image of the possible products look like in the categories. User would have to visit the category to explore and discover.
  • There was two hamburger menus.
  • From User testing, one mentioned there’s no filtration for search on category list.
  • The checkout process was a bit of challenge for users.

As for the mobile experience:

  • It’s exactly the same task for the user to reach the online store
  • The mobile version was same as desktop version

What does success look like? How did you determine success?

I determine that improving upon the flow on the site would guarantee findability and likeability for the site. After all MUJI’s brand experience is minimal and simple design.

While comparing MUJI (to name a few) it gave me a barometer of what a successful e-commerce site looks like:

  • MoMA Design Store
  • Kikkerland
  • Container Store
  • UniQlo
  • IKEA
  • COS

I then sketched a low fidelity wireframe of the desktop and mobile experience.

I then iterated on the design and produced the following hi-fidelity of the site for the desktop and mobile.

Did you redesign improve overall experience? How do you know?

I redesigned the overall experience that included:

  • relocation of the menu into mega menu dropdown menu.
  • relocation of the region selection.
  • relocation of the shopping cart or shopping bag.
  • relocation of the sign-in.
  • mega menu has a visual element of what products look like in the categories for the associate of the user’s mental model.
  • redesigned the checkout flow and include checkout as a guest.

From usability testing, participant found an overall improvement of the site. It was clean, navigable, and easy to use the menus. Below you’ll find the URLs to the prototype to get a sense of what that experience would feel like.

Prototype of the New Experience

Desktop: https://invis.io/8REOH6557#/266176183_Online_Store

Mobile: https://invis.io/9MEOEMEZJ#/266267354_iPhone_8_Wireframe

Reflection

I learned to adapt and cope with competing priorities. It was really tough to have worked over the thanksgiving holiday on the design phase.

In the research phase. Working with McKellen and Weiying really helped me assimilate a new work style. It felt like we a had shared sense of knowledge on task and time management. We were very communicative and collaborative. They’re great team players! ðŸ˜€

Although; certain UX process was a challenge for me as I was unaware how to estimate the time for them. I was surprised how great it felt at the beginning as we’re approaching each research method in the UX process.

I wish I had an opportunity to redo it again now that I know how to time estimate the research method. At times, there was a point of decision fatigue and paralyzation in my own process. I would have loved to have communicated this to my team for support.


MUJI Web Experience Redesign was originally published in Victor de la Cruz | UX UI Portfolio on Medium, where people are continuing the conversation by highlighting and responding to this story.