Three weeks into the world of UX, I have learned about information architecture during my UX bootcamp course.
What is information architecture?
It is the structural design and organization of a product or system. Basically, it’s making sure the way the content is laid out is an effective way for users to find information and complete their task.
For this project I was to assess the usability and functionality of the desktop website for MUJI.
Time frame: 1 week
Tools used:
- Heuristics evaluation of the website
- Competitive and comparative analysis
- User flow
- Open card sort and closed card sort
- Tree test
- Sitemap
One of the first things I did was to create a sitemap of the original MUJI site. What is a sitemap?
A sitemap represents how the content in your system is structured and interrelated. Think of it as a map of your website.
Research
Heuristics evaluation is, in simple terms, an audit done to help find usability problems on a website or product.
There are several different methods you can use when conducting a heuristics evaluation. In my case, I used the Abby method. Was the website:
Findable? Accessible? Clear? Communicative? Usable? Credible? Controllable? Valuable? Learnable? Delightful?
From the evaluation I identified a few insights to start working with:
- Accessibility needs to be improved upon by increasing the spacing on the navigation bar (not depending on the user to adjust the zoom on their webpage in order to see it clearly). The proper linkage for accessibility needs to be made for those users who are blind.
- For users who have never of MUJI and are accessing the site for the first time, there is no indication which deems this site as credible.
- MUJI site struggles with bringing the user delight when using the website. Everything is straight-forward and basic from beginning to end. There is an opportunity to add delightful features to the user experience.
- MUJI seems to keep the website very basic to get the job done. I’m not sure if it is to go along with their brand of simplicity, but this results in nothing memorable about the website.
Competitive and Comparative Analysis is done by identifying features on a website and conducting an audit comparing your website to other competitors and comparators.
Competitors:
- IKEA: Minimalist, simple and easy designs. Affordable.
- H&M: No brand name/logo clothing. Affordable. Sells similar products.
Comparator:
- Apple: Sells a type of minimalist and simple lifestyle through their products.
Ten features were compared across all the websites to see how the features functioned and were laid out on the sites. This allowed me to gain more insight in the different ways I could incorporate and structure the MUJI website.
User Flow was created to visualize how a user would move through the site in order to accomplish the task.
I chose a single task for the user to complete on the existing MUJI site, in this case it was to purchase some storage and organizers. The user flow was mapped out with three key elements — Start/Stop, Process and Decision Points. The user flow helped me see the multiple paths a user can take to accomplish the same task.
Next up…
Card Sorting was conducted to discover how users interpret and categorize data (mental model). There are two types of card sorts.
- Open card sorts: Allow the user to create their own categories when sorting cards.
- Closed card sorts: Users are given pre-determined categories to sort cards into.
It was really interesting to me to watch how people sorted the same cards differently. Is it nerdy for me to say I throughly enjoyed this part? The card sort information was then compiled from all ten users interviewed in a program called OptimalSort and then it was time to analyze!
Several insights were discovered through the open and closed card sort results. I then jotted down some recommendations as to how I could redesign the website to better fit the users’ needs of navigating the website more efficiently.
Card sorting was then followed up with tree sorting. That’s right, more researching!
Tree test is also known as ‘reverse card sorting’. It is used to evaluate the findability of topics in a website.
Basically it is a text version of the website structure that you have a user click through to find the information they are looking for.
I came up with three tasks for the participants to complete with the tree test — Locate a mop, locate an alarm clock, and find some storage options. A total of 5 participants were tested with the tree test. Average time taken to complete all tasks was 1m 47s. The overall directness of completing the tasks was 60% with a success rate of 93%.
Task 2 (alarm clock) scored the least on directness, this means participants had clicked into different categories first before finding their way down the correct path. The way I phrased task 2 could be improved upon. I should not have specified a type of clock. By including such a specification I believe it led users to look for the product under the “Bedroom” category.
Since task 1 was most successful, task 2 was a bit skewed, I went with continuing on with task 3 (storage & organizers).
Next Steps
Based on the card sorting and tree test results, I re-organized, re-categorized and re-structured the website. Keep in mind for this project I had only focused on primary and secondary categories.
A few of the changes made were:
- Clearance and Special Offers categories were combined into “Sale”.
- Slippers was moved from “Home Fabric” to “Apparel”.
- “Home Fabric” was completely eliminated due to confusion by participants about the category as a whole.
- “Bedroom” category was created to accommodate some of the secondary categories under the eliminated “Home Fabric” category.
- “Linen” was changed to “Linen Wear” as participants interpreted “Linen” as housekeeping goods.
- A “Travel” section was created since this was a category that was created by participants in the open card sort.
- “Storage and Organizers” was moved from “Furniture and Interior” to “Housekeeping” based on the card sorts.
High Fidelity Mockups and Testing
I continued my testing with the newly categorized “Storage & Organizers” under “Housekeeping” in my high fidelity mockup.
What was interesting to me from the high-fidelity mockup testing was that none of the participants behaved as predicted from information collected via previous card sort and tree tests. What do I mean?
The card sorts and tree tests all showed that participants related “Storage & Organizers” with other items that were also grouped with “Housekeeping”. This was the reason I had moved “Storage & Organizers” to “Housekeeping”. In the high fidelity test, participants did not initially think to look under the “Housekeeping” tab for storage. I would be interested in doing more testing to figure out this inconsistency.
In the high fidelity test, all participants went immediately to the search bar. This was because there were too many primary categories and their initial instinct was to go to the search bar for the quickest result.
Conclusion
Card sorting and tree testing are both very quick and cheap research methods that result in very informative results. I enjoyed observing how people categorize things differently and learning about their thought process behind their decisions.
If I had the opportunity to reorganize more than just the primary and secondary categories I would have consolidated the primary category a lot differently. For example, instead of separate “Kitchen”, “Bathroom”, and “Bedroom” categories, I would have placed them all as secondary categories under a “Home Goods” category.
Either way, this project was a great way to dip my feet into card sorting and practice constructing a high fidelity mock up. For anyone looking to reorganize the structure of a website, card sorts are the best way to go!
