Case Study: Information Architecture

The second project for my UXDI class required me and my cohorts to design a website for a local NYC retailer which would help them compete with large online retailers such as Amazon. I was assigned the store “Whisk.”

Objective

We were tasked to design a website that required us to meet the needs of three personas. The primary persona assigned to Whisk was Roland, a grandfather of two who enjoyed teaching his grandchildren how to cook. He had low tech empathy, which meant that he is not tech savvy. From the brief, I identified Roland’s primary needs:

• Simple and clean layout so that he will not feel overwhelmed by choice.
• An “Account” page where he would be able to view past purchases, as well as save address and payment information.
• Item recommendations based on previous orders and items viewed.
• Ability to store payment information.

Regarding the other two personas, I identified their most important needs as:

• Customer ratings on product pages to show how users feel about a product after purchase.
• Ability to search by brands.
• Ability to submit customer reviews.

Research

Before I started sketching my design, I did my research through methods which included a contextual inquiry of Whisk’s physical store, analysis of competitor websites and card sorting in order to figure out how to properly organize the products on the site.

Contextual Inquiry

First, I performed a contextual inquiry at Whisk, which involved going into one of their stores to observe and speak with customers about their experience in the store.

The store has a friendly atmosphere with soft lighting. I noticed that there was no particular type of organization to most of the sections, except for “Baking.”

I approached a customer (Male, early-30s) who appeared to look confused while looking for a cutting board. I asked him if he knew a lot about the product and he said that he didn’t. When asked for his thoughts on the presentation, he questioned how the cutting boards were organized. He stated that there was “no description” and that it was hard to differentiate what made one cutting board better than the other. He mentioned that he was trying to buy a gift, but had a “hard time” picking one out.

Competitor Research

I started researching three competitor sites by sketching their layouts to see what I felt worked and what could be made better.

I also performed a heuristic analysis of their sites by following Abby Covert’s IA Heuristics, which focused on the site’s navigation and how a user would feel browsing the website. I used a scale of “1–5,” with “1” being a poor experience and “5” being an enjoyable one.

Competitor User Flows

Next, I analyzed the user flows of these sites regarding product discovery and checkout, to see if there was anything that I could improve upon. The process took eleven clicks for two competitors, and twelve clicks for the other.

Findings from Competitor Analysis: I noticed that two of these sites featured crowded top navigation bars and cluttered pages which featured numerous options to choose from. This was something I felt I should avoid, since my primary persona noted that he felt overwhelmed by too many choices.

I saw some good things that I wanted to incorporate into my design, like the “Find in Store” option. I also noticed that there did not appear to be any options for users to store payment information, which was specifically one of the needs of my primary persona, Roland.

Card Sorting

Open Card Sorting

After I analyzed the three competitor sites, I performed three open card sorts to see how users would categorize my client’s products. Two of the card sorters cooked regularly, but seemed to have trouble classifying the products, to my surprise. All three felt that some items could be placed in more than one category. They also categorized the items by picturing how they would group them in their own kitchen. Some of the responses I heard included:

• “This is a little complicated.”
• “There are so many grouping possibilities for some of these items.”
• “There should be a general category for kitchen tools, except for pasta which should have it’s own category.”

Closed Card Sorting

Based on my findings from the open card sorts, I felt that broad terminology for the main categories would allow for an easier flow to the site. Within these main categories, I knew that specific categorization was required in order to avoid confusion. The five main categories I developed were: Cooking, Baking, Coffee & Tea, Accessories and Tools.

Users had an easier time grouping the items compared to the open card sorts. I received feedback on certain subcategories from a few of the card sorters, so I took those into effect:

• “Baking tools should fall under one group. It’s pretty weird how ‘Decorating’ is separate.”
• “There should be a category for tools that focus on measuring.”

Site Map and Sketches for Site Design

From the card sorts, I developed a sitemap of how my card sorters found items to be best categorized. The main categories were broad and each one broke down into more specific subcategories which would help guide the user in locating items they are specifically looking for.

I sketched the initial design of the site based on my findings from the competitor analysis I performed earlier, as well as the needs of my personas. As previously mentioned, since I don’t want users to feel overwhelmed, my design had generous spacing between the items on each page, which also provided for a cleaner look.

Wireframes and Site User Flows

Next, I developed wireframes based off my initial sketches using. I also took into account the needs of my personas, and some of the features that I thought were useful for users based on what I learned through analyzing competitors.

The user flows I had my primary persona perform required Roland signing into his account to view his past purchases. Next, I had him look for cookie cutters, which he wanted to purchase for his grandchildren.

Regarding the checkout process, I made sure to address his frustration around having to remember payment details during checkout. My design allows him to click saved addresses and payment information through a click, which automatically fills in the fields with his saved information.

User Testing and Design Iterations

I performed two user tests with my initial prototype. I received good feedback regarding the overall design:

• “I think it’s cool how my information would appear automatically with one click.”
• “The design of the site is looks really clean, I like it.”

I also received some feedback criticizing the placement of certain items on the screen, which I incorporated into my next design iteration.

Prototype of Design

The moment you’ve been waiting for, here is a link to the prototype of my design which I made using InVision. As always, I’m happy to hear your thoughts on the design and appreciate any feedback, good or bad.

Conclusion

This project served as a great learning experience. When we were first briefed on the project, I felt a little overwhelmed and unsure of myself. While researching competitors, I noticed a change in how I started to view e-commerce websites, and how certain things were arranged. I learned that I had to quickly make judgement calls in order for the project to progress, and I became more comfortable with failing.

I also learned about dark patterns, and how important it was to ensure that users never feel trapped into committing a certain action.

I feel that I need to practice card sorting more, since I think I may have led users a little too much at certain times during the process. At certain times during this project, I felt out of my comfort zone since I was not sure if I was doing things correctly. I feel that I’m a lot more comfortable with that feeling of uncertainty now, so I hope fear won’t hold me back going forward.

Thank you for reading my blog post. I am currently a UXDI Padawan at General Assembly. Please find my Twitter handle and e-mail below if you’d like to connect and chat. I’m new to the field and would appreciate any tips, insights or resources that you think I would find helpful in my journey.

• Twitter: @holyshucks
• Email: ux.nico@gmail.com

-Nico