Changing the MUJI Site
Step One: The Site
Just casually viewing MUJI’s website makes it clear that some slight reworking needs to be done in order to make the visuals more appealing and readable. From there though, casually perusing the categories and what items fall under them will leave you scratching your head. Figuring out why the adding items to the cart seems to be not working is another headache on all its own.
My heuristics analysis for the MUJI website found that the navigation of the website was fine in the sense that pages lead from one to another in a logical progression. However, the findability was atrocious. Many items are not in intuitive spots to find when searching by category. Even finding the category you want to search by becomes increasingly difficult the smaller the window is, since the category bar compresses the choices together.
Another problem with the site I had initially was the cart and buying items. The website is not very snappy in responsiveness. When adding an item to the cart, it would sometimes take upwards of 3 to 5 seconds before the cart would update. If you forget to do something like select a color or size, the error warning that pops up on desktop is extremely tiny and nonexistent on mobile.
The user also has to go back to the cart in order to checkout.
The first thing I did after navigating through the website and writing my heuristic analysis was create a user flow for the pre-existing website. I figured this would help a lot with seeing just how unbalanced the organization for the site was.
Step 2: Making a MUJI Sitemap
The website for the American MUJI store is flawed in a number of different ways. The site map for the existing Muji website encourages you to sort by primary category, then secondary category, and then tertiary category if there is one. Whenever you hover over the primary category, the window containing the secondary categories opens. A lot of the time, this happens by accident, but leads me to believe that was the primary method of finding what you want to buy, just like in a real store. MUJIs stores in real life are very organized and aesthetically pleasing, often sorting items by color. That’s why it’s baffling that the MUJI website has such extremely confusing secondary categories. “Seat Cushion” and “Cushions and Cushion Cover” are two separate categories under “Home Fabric”. “Storage and Organizers” is a separate category from “SUS-Shelves” in the “Furniture and Interior” category.
Creating the site map for the existing site was a mess because of how many primary and secondary categories there were to go through. A new user would probably feel overwhelmed from all the options and feel analysis paralysis. For improving the site, it would definitely be beneficial to cut down on the amount of primary and secondary categories so that the user can use broader categories to find what they want in the beginning, and on the store page narrow down the tertiary categories with a filter option. Another option I thought of would be to remove the line of primary category options and put an increased emphasis on the search bar. That way, the primary category options won’t drop down another window whenever the user has to inadvertently scroll above them.
My revised sitemap would not come for a while. After creating the existing sitemap, I figured the best next step would be to see how others would categorize these items instead.
Step 3: Card Sorting
Notice how everyone was either unsure where they would put things like “Travel” and “Bags & Luggage” or had them in their own travel category. These were originally in the “Health and Beauty” and “Apparel” sections. Health & Beauty created the least amount of controversy, and that section was left relatively unchanged for the final design.
Another thing that people were confused about was the terminology of a few words. Every single interviewee asked what the difference was between “Cutlery” and “Utensils”. No one thought of “Linen” as a material for clothes, but as a fabric itself or something that would belong in a furniture section.
The closed card sorting provided more interesting data because it forced people to conform to the pre-existing categories in order to organize the cards.
The terms “housekeeping” and “furniture & interior” generated some confusion when compared together. While “housekeeping” tended to refer to cleaning related objects, “furniture and interior” referred to stationary objects inside the house. This meant that things like Storage & Organizers and Dustbins could be in either category.
Gifts, Travel, and Accessories were terms that went all over the place in the closed card sorting due to their vagueness.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —-
Here is a list of changes that was made to the organization based solely on data from the card sorting:
Combine shoes and slippers into Footwear category
Change Linen and Denim to “Linen Wear” and “Denim Wear”
Move Rugs and Mats, Seat Cushion
Remove Home Fabric
Potentially add a Bedroom category
Make Fabrics a subcategory
Rename Housekeeping to Cleaning
Remove “Gifts” as a secondary category
Change Laundry to Laundry Supplies
Change “cutlery” to silverware
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Everyone in the MUJI group combined 1 or 2 of their open and closed card tests into a matrix. This provided slightly more conclusive data regarding how people organized the different categories.
Notes from the chart and matrix:
Bags and Luggages/Travel had no consistent spot. This is because most of MUJI’s supplies are home-based, the exact opposite of what those two items are for.
Linen, Storage and Organizers, and Bedding were evenly split between the Housekeeping and Furniture/Interior categories. Bags and Luggages/Travel were also even split between these categories. Linen and Bedding both could fit into a “bedroom” category. However, I think the bigger insight here is that housekeeping and furniture/interior are categories that should be renamed for clarity purposes. Perhaps rename to “Cleaning” and “Furniture/Interior”
Gifts and Appliances only had a 6 and 7 in their most popular categories because the term is too vague and could mean a variety of different items.
Gifts had no spot in. Possibly remove it as a category. Accessories is also not very specific but people figured it would be placed in apparel.
Step 4: The Tree Test
The tasks I prepared for my tree test were based off the things that generated the most confusion for users during my card sorting. Some users were confused as to whether slippers belonged in Apparel or Bathroom. Every user needed to ask me what the difference between Utensils and Cutlery so one of my tests involved getting a chef’s knife. Third, dustbins were split between Housekeeping and Furniture & Interior so I used that as a task as well. I even used different terminology (“garbage can”) to see if users would find it with the different name.
I was surprised. I figured that due to the confusion of terminology with “Utensils” and “Cutlery”, finding a kitchen knife would’ve been the task with the most failures. The dustbin ended up creating the most controversy because one person assumed it counts as a “Cleaning System”, which is a category mainly meant for things like vacuum cleaners.
Another poor user had this pathway through the tree test to find where a trash can might be.
During the open card test, 70% of users put the dustbin in the same category as “Storage and Organizers” and 2 out of 3 of my closed card sort tests put Storage and Organizers into the Housekeeping category. This lead me to put both Storage & Organizers and Dustbins together in the Housekeeping category when it came time to do the revised sitemap.
Step 5: The Revised Sitema — just kidding it’s the Competitive Comparative Analysis
The Competitive and Comparative analysis helped a lot when it came to redesigning MUJI’s webpage. I figured IKEA and Crate & Barrel would make for good competitors due to their selling similar products and similar “homely” feel to their stores. IKEA and Crate and Barrel are not about being flashy, but about providing a reliable product. MUJI’s contemporaries were doing things that made them far more convenient and appealing. IKEA, Crate & Barrel, and Dollar Tree all had a pop-up window appear after adding an item to the cart, making it quicker to achieve checkout. It also helped streamline the user flow. Another thing that helped with the user flow was looking at the search features for every other website. Every other site has the search bar already visible from the start, whereas on MUJI the search bar can only be accessed by clicking a “Search” button. This removed a step from the revised user flow. The competitive and comparative analysis also pointed out that MUJI has no feature to filter results, just sort them.
Step 6: The Revised Sitemap
The heuristic analysis and Competitive and Comparative analysis also helped shape the size the category windows for the final mock up. The size of the drop down window took up the entire screen and was filled with unnecessary negative space. Not only that, but the tertiary category pop-up would sometimes cover up the second row of categories. This gave me a goal to keep the number of secondary categories in each primary category low. Another problem I had when interacting with the site was that whenever I needed to access the cart, you would inevitably have to scroll your mouse above a category and it would drop down a large disorienting window. The second goal was to thin down the primary category menu so that there is space on the right-hand side to freely mouse over to the cart.
Crate and Barrel did something similar.
Another problem with the drop-down window was the inconsistency in which some secondary categories had tertiary ones, and others didn’t. I wanted to eliminate this consistency and try my best to move secondary categories with minimal items into the tertiary categories of other secondary ones.
Goals:
Skim down the primary categories so that there’s space for the user to scroll up to the cart. This will also prevent the categories from scrunching together in a run on sentence.
Make the number of secondary categories more consistent so that they only take up one row
Add a Travel category to deal with the confusion from the open and closed card test
New Sitemap:
Annotations:
Step 7: The User Flow
The user flows between the old site and revised one are very similar. The navigation on the old site was perfectly fine. It was the findability that was a problem. Regardless, there were a few things that needed to change.
Because the findability was so bad, I actually accounted for that in the user flow by including the steps taken to correct for error.
One way I figured I could correct for error would be to display both the second and tertiary categories together. After mocking it up on paper, there was just too much information on screen for the user to look at simultaneously. It would also require fundamentally redesigning the website’s navigation.
Replacing the search button with a search bar removed a step from the new user flow.
Having a notification window pop up after an item is purchased is a feature that was in the IKEA, Crate & Barrel, and Dollar Tree websites. Adding it here saves a step on the user flow, meaning the user doesn’t even need to scroll up to click on the cart anymore! Doing testing on the amount of items people tend to buy from the MUJI site will determine if having this window pop up would actually end up saving clicks over all.
Step 8: Many MUJI Mockups
So I made 7 Hi-fidelity front page mockups because I am horribly indecisive. I am glad I did though, since the design was definitely improving each time.
Mockup 1:
This mockup removes the “search” button and replaces it with an omnipresent search bar to speed up the user flow. I also moved the logos on the right to be in-line with the category bar. The category bar is also now listed alphabetically except for “Special Deals” which is too important to shove between two other categories.
Mockup 2
This version makes the cart and info buttons larger while moving the sign in to fill the gap between the logo and the search bar. This version also adds Snacks as a category again after I found out how popular the MUJI brand snacks are online. Now that there is less space again on the category bar, I moved the Sign In button elsewhere.
Mockup 3
I removed the words underneath the symbol so that they don’t blend with the primary category bar. To be consistent with design practices from other online stores, I moved the sign in/account button next to the cart. The info button has moved to the top right corner to be in line with other websites and to create symmetry with the new bolded text on the left hand side to emphasize the importance of the special offers.
Mockup 4
I returned back to the original design idea, but moved the right-hand symbols down so that they are all on the same level on the same row as the categories.
Mockup 4A
This alternate mockup moves the logos to the top so it’s in-line with the search bar and logo. This allows for more space for the category bar to breath and prevents an issue with the words compressing if the window’s width changes. Maybe it could be used for an adaptive responsive web page?
Mockup 5
For this mockup, I figured the info button was unnecessary and taking up space. Its importance is not on par with the sign in and cart buttons, especially considering the info is completely accessible from any screen by scrolling down to the bottom, like on other websites.
Mockup 5 was the one I ended up using for Usability Testing.
Mockup 5A
Just like with 4A, this alternate mockup moves the logos to the top so it’s in-line with the search bar and logo. This allows for more space for the category bar to breath and prevents an issue with the words compressing if the window’s width changes. Maybe this could be used for an adaptive responsive web version?
Prototype Navigation
After performing usability tests with the new mockup, an interesting complaint arose. Because of the bolded “Special Offers” button being on the left-hand side of the screen, it could be assumed that the rest of the category items are special offers as well. Because of this, I made a final mockup moving it to the right-hand side of the screen, and I think I prefer it better over there next to the cart and sign-in buttons. There’s more “importance” on that side of the screen anyway. The other special deal pictures are also on that side of the screen too.
The InVision Prototype was a nightmare by the way. Every category on top needed to have a drop down window that could be accessed from any other drop down window. It led to an interaction diagram that looks like this.
Overall, it initially seemed obvious what on the MUJI site needed to be redone. But after performing card sorting and tree tests and various analyses, I got a much clearer view of what needed to be changed to make the website at least a marginally better experience.
Link to InVision Prototype:
Try buying some slippers!