For our third project at general assembly, I was tasked with redesigning the .com website. If you’ve ever visited .com, you know then, that I had a lot on my plate. I was ready.

Navigate to MUJI.com and the first thing you’ll notice off the bat, is the utter lack of thoughtful navigation. There is just way too much clutter, and way too much of what you don’t need or want.

MUJI is a brand which seems to carry an aura of meaningful minimalism in their products, designs, and brand ethos. Shop in any of their physical stores and you’ll enter a world of order. Everything is arranged in a thoughtful and meaningful manner. How then was the MUJI online experience so utterly chaotic? It just made no sense. It was as if MUJI was going for a look similar to the popular 70’s mullet haircut. It’s called the MUJI. Business upfront, and utter chaos in the back.

This was the very problem we were asked to address. How could we make online shopping at MUJI similar to the in-store shopping experience?

Methods

Our would take into account both the user as well as the business:

User:

  • Screener surveys
  • Usability testing
  • Personas
  • Problem Statements
  • Contextual inquiries
  • Card Sorting

Business:

  • Competitive/Comparative Feature Analysis
  • Business Model Canvas
  • Business Competitive Matrix
  • Heuristic Evaluation
  • User Flows
  • Sitemaps

The research

To make quality improvements to the site we would need to properly understand both the MUJI user, and the MUJI business itself.

Our first step was to get a real down-to-earth sense of what the in-store shopping experience looked like. We conducted an in-store contextual inquiry, in which we would observe participants navigating throughout the physical store, and use the insights to inform our design decisions.

To get a better sense of the specific problems inherent within the current site, we conducted a 6 usability tests and documented our finding. These participants were all vetted through our screener surveys to ensure we would be testing from the right pool of users.

Next, we compiled a list of 100 key inventory items from MUJI, and conducted 7 card sorts in which participants would create their own logical groupings and form categories based on what made sense to them. This data would be instrumental in forming the product categories on our redesigned website. We also conducted another version of card sorting in which the categories were already predetermined, and users would place the items in the categories that made sense to them.

We had a good idea of the what the problems were and who we would be solving for. But to get a better sense of how MUJI could benefit from a site overhaul, we had to look into the business side of things and find out where MUJI stands in the industry landscape, how they measure up to the competition, and what we could learn from the other players in the industry.

To do this, we created a competitive/comparative feature analysis, and jotted down all the features within the current site, measured up against 6 competitors and 3 comparators within the industry. This was super informative in terms of what has already been done, and the constraints and challenges involved in created any new features.

competitive/comparative feature analysis

We also plotted MUJI on a Business Model Canvas, and later on a matrix along with the competition.

The real nasty came with the heuristic evaluation. We took a long and hard look at the website and judged it against the 10 Abbey Heuristics. We asked, is it: findable, accessible, clear, communicative, useful, credible, controllable, valuable, learnable, and delightful, and graded our findings on a 4 level scale of 1 = Critical Problem, 2 = Serious Problem, 3 = Minor Problem, 4 = Meets Best Practice. Let’s just say MUJI did not get such a good grade.

All said and done, we were ready to begin working on our solution.

The Solution

The design and solution phase would be a solo project. Gone was the security and comfort of working with a crack team. For the last leg of the project, it would be every man for himself.

I started out with some rough sketches and once I had my ideas down on paper, I was ready to begin working on the structure of the site.

Left: Sitemap | Center: User Journey Map | Right: User Flows

I created a sitemap forming the basic hierarchal structure of the site, and 2 user flows outlining the possible interactions with the site. The flows also highlighted the different states of the site depending on the user actions, and really helped create opportunities for innovative design solutions.

I spent the next good part of the 2 days creating mid-fidelity wireframes for my new site. I turned the wireframes into functional prototypes and conducted 3 rounds of usability tests with 6 participants each round. After each round, I made some slight iterations on the designs based on user feedback and insights gleaned during the testing.

My initial mid-fidelity prototype
My initial mid-fidelity prototype

In my first round of testing, a whopping 6/6 users were left confused after adding an item to the shopping bag. There lacked any sort of visible confirmation that the item was in-fact added the shopping bag. And so in the second iteration, I made sure to include a feedback message overlay whenever an item was added to the bag. After implementing this change there was no more confusion.

In my second round of testing, I found that users were having a difficult time finding the Storage and Organization category, so much so, that I ended up having to create a totally separate category from within the mega menu.

Another big observation I found was that during the checkout process, users were having a hard time finding the “Guest Checkout” button. All users expressed distaste in having to sign in or sign up for an account in order to complete the checkout. While I did include a guest checkout option within my designs, I initially had it a little to far below the fold and in my next iteration, I was sure to make it more readily visible.

The final iteration employed a hi-fidelity prototype with functional buttons and flows from navigation through checkout. I was super happy with my final design, and I was glad that after a 3 round of usability testing, all users were able to complete the task.

The project finale ended with a presentation in front of my instructors and classmates where I recounted the methods, findings and results in my .

And with that, P3 was in the books and I had my eyes on a nice, relaxing weekend.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here