My I.A. Foray: A Journey Into the Depths of Information Architecture
Introduction
I had been told that Information Architecture (IA) was a massively powerful tool in the UX designer’s tool kit. On the subject of IA, Jakob Nielson said, “It simultaneously increases human satisfaction and your companies’ profits. Very few jobs allow you to do both at the same time, so enjoy.” I was told that IA is the result of conducting some tests, sorting some cards, bringing that together into a prototype, running some more tests and bada-bing-bada-boom, IA.
Ok maybe that was a bit of an exaggeration, but, in truth, what I think I was not told,(I believe purposely) was the breadth and depth of analysis, synthesis, and critical thinking that is required to convert card sorting results, graphs and dendrograms into data backed recommendations.
Research
The first part of the assignment came in the form of a client, Pearl River Mart, an iconic New York-Chinese department store, who hired me to complete a heuristic assessment and competitive/comparative analysis of their website. From there, part two of this adventure continued on to include User Flows of both the existing website as well as the proposed site, Open and Closed Card Sorting, Tree Testing, and Site Maps for the existing site as well as the proposed navigation structure, Hi Fidelity Mockups of the proposed website, and a Usability Test of the changes.
The real pressure here for me was the order of operations. Clearly as UX designers, we have to be able to provide evidence for the changes we are proposing. And looking at the list of deliverables for this client’s website was daunting.
How was I going to fit in all the research, the tests, the data synthesis and provide evidence-backed recommendations when I didn’t fully understand how to perform half of these deliverables? Well, in this instance I let the demand necessitate where my efforts would be best placed.
As somebody once told me, “What’s hard by the yard, is a cinch by the inch.”
And with that, here are my inches:
- Heuristic Analysis- Heuristics, derived from the Greek heuriskein meaning ‘find’ is an analysis of how easily a user can navigate to do what they want to do at a website.
I used the Abbey Method criteria to rate their homepage, checkout page, and join page based on the following:
- Findable
- Accessible
- Clear
- Communicative
- Useful
- Credibile
- Controllable
- Valuable
- Learnable
- Delightful
The grades given are “Meets Best Practice”, “Minor Problem”, “Medium Problem”, or “Major Problem”. With this done, I could see that although my client had a fine enough website, it was missing the mark in many accessibility subsets that make the difference between a site you don’t ever go back to, and one that you do. Specifically: Contrast readability, and accessibility issues for peoples using assistive technologies or other languages.
2. Competitive & Comparative Analysis- The measure of how they stack up against two direct competitors(Blackbarn & Daiso), and one indirect competitor (IKEA) in 10 categories of functionality.
My client’s website was compared side by side on the following features:
- Online purchasing
- Online payment functionality
- Search
- Search filter results
- “Join” functionality
- “Contact Us” functionality
- Find closest store
- Other language transition
- Event planning
- Returns & exchanges
Here I was able to see that my clients website had some amazing features and offerings that were not being highlighted as well as a lack of some features that seemed obvious considering their market position. They offered event planning services for Asian themed events, but didn’t have a language selection option for their website.
3) Initial and Revised User Flows- What is the current process like when using PearlRiver.com to buy something?
My initial User Flow was done on Sketch and showed all of the possible options for buying fun socks.
While straight forward, it does show that there were more than 10 clicks required for the simplest of flows to purchasing socks. Reducing the clicks was one initial recommendation. I also recommend providing direct-to-cart access from any webpage versus the three clicks required to view the shopping cart once a user has found the socks they desired to purchase.
The revised user flow shows the recommended changes to the Primary Navigation elements after synthesizing the data from the open sort, closed sort and tree test. The changes show a more direct route to Clothes + Accessories which was shown in testing to be where users looked for Fun Socks.
4) Open & Closed Card Sorting- How would users of the site expect the information to be organized and how might they name the categories?
I used Optimalworkshop.com to conduct the card sorting and tree test but this came with a constraint of a 30 card maximum. To get the best results possible, the initial 54 content/functionalities were modified and trimmed to 30 as to retain the most varied offerings available.
Open sorting allowed me to see what categories users thought made sense for the content. Then I used this data to inform the changes to primary navigation elements and conducted a closed card sort with the category labels found to be most recognizable by users.
This round saw a much more expected placement of cards with only “Asian Cultural Goods” and “Figurines + Statues” being categorized differently than anticipated.
5) Tree Testing- Where card sorting data is turned into a test of your data synthesis abilities.
All of the test participant were asked to complete two tasks; Find fun socks & find chopsticks. 4 of 4 participants were successful in finding both of the items. In two instances participants indirectly located chopsticks, but this test result still validated that the items were easily located. One participant mentioned that “I thought Kitchen would be a main item on the homepage, and everything related to Kitchen underneath it.”
6) Initial and Revised Sitemaps- All the site, in one graphic, and make it make sense too!
This is the layout of the original site showing the primary and secondary navigation elements. The blue and green boxes are the elements that were under review and the green secondary items needed to be trimmed for the 30 card limit previously mentioned in card sorting.
There are some glaring items to notice including ‘In Stock Collections’ and ‘Now On Sale’ which provide little context for what a users would find. Also the size of the list under ‘In Stock Collections’ contains items that users still would not understand and could be relocated under a redesigned navigation for easier access.
In this revised sitemap the blue and green boxes still represent the elements that were being tested but I wanted to show where all the items would fall in a hybridized version of the new navigation structure with products not represented in the 30 card card sort limit.
In this revised sitemap you can see the placement of the categories gleaned from the open card sorting, as well as the placement of the secondary elements as learned from the closed sorting and verified by the tree testing.
7) Hi Fidelity Mockup Prototype- And now, a test of the mockup site with the proposed changes!
I used screen shots of the original website in Sketch to build the navigation elements I was proposing into the current site and made a working prototype in InVision.
This mockup used the current layout of the navigation but included the changes to the primary and secondary elements. I built a new mockup image for each page that would be required for testing the prototype totaling over 10 pages with active links.
8) Usability Test - Nice fake website, but what do the actual users think?
To test the redesigned navigation, I had three participants complete the tasks of first finding fun socks and secondly finding chopsticks on the mockup prototype. The results are in! 100% of 3 testers agree. Its easy to find fun socks and chopsticks on the redesigned navigation. I performed the test through InVision and in each instance, participants easily found the items.
9) Recommendations- Bring it all home with an exhaustive list of what to do!
It was a long and exhaustive list and I don’t think that makes for great reading but some pinpoint take aways are worth while:
- Bring the website up to AA average if not AAA for Web Accessibility.
- Affix the header with a more visible search bar, home button, navigation status, and direct to shopping cart link.
- Gamify the shopping experience.
- Reduce the number of actions required to find and complete the checkout process.
- Adopt the new Primary and Secondary navigation element architecture.
Conclusion
PearlRiver.com has an amazing foundation from which to build a great user experience. Fun products, engaging experiences and a heart warming story. Pear River Mart’s in store appeal can also be represented in its digital form giving more people easier access to what New Yorkers have known and loved for a long time.
This project in total was a beast. Due to having a combined research data group but individualized data analysis and the interplay between them, I found my self really wishing to be working strictly alone or strictly in group. Now with the project completed, I would surely wish to complete such a valuable analysis in a small and sharp team. At times, synthesizing the data into something that was comprehensible and data backed seemed like chasing after a firefly in a dark field. You know that you know you saw the light, but all the way across a very large and very dark field littered with crumbs of data. You know you saw something valuable out there, you know can find it, but it might take some hunting, and you will surely find a bunch of nothing and bumps along the way, but with perseverance and determination, you can find what you seek.
