Desktop and Mobile Muji Responsive Web Design

Responsive Web Redesign

Research phase: lead by McKellen Rattray, Weiying Yu, myself| Design phase: Myself | Duration: 2 Weeks

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 Rattray and Weiying Yu really helped me assimilate a new workstyle. 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.