Information Architecture & UX Design

Reflecting on a heuristic approach to the IA of an online shopping experience


Objective: Design a new information architecture (IA) and content strategy around an online shopping experience for existing users of nycostumes.com.

My role as UX Designer/Product Designer: Follow IA heuristic analyses and principles to research, design, prototype, test, and iterate a new website + responsive mobile site that meets the goals of the user, business, and brand.

Challenge: Taking a vast quantity of research from competitive analysis and IA tools such as card sorting and synthesizing findings into a clear and comprehensive “bigger picture” heuristic approach targeted to the client.

Solution: Break down each UX method into digestible stages. Within each phase, clearly state key takeaways and how they intentionally informed the overall design/features of the new site. Demonstrate the importance of IA heuristics within the UX process from start (research + understanding the user) to finish (prototyping + testing) while keeping in mind both business and brand considerations.


Research

My initial research focused on understanding the competitive online shopping landscape as well as grasping a comprehensive “big picture” understanding of NY Costume’s IA via the 100 product items provided by the client in advance.

My role: I compiled a heuristic evaluation of three marketplace competitors. During this competitive analysis process, I was able to identify key features lacking among my cleint’s competitor sites that helped inform smarter design direction for the new site.

Heuristic Evaluation of three competitor sites

I also conducted multiple card sorting sessions (open and closed) asking participants to sort/group each of the client’s 100 product items as they saw fit. Key findings from these sessions helped me to recognize top main categories and identify smarter word choice, all of which informed the overall organization/content of my site map.

Card sorting interviews to understand how the 100 products fit together in a larger IA framework

The purpose of the sitemap (created in OmniGraffle) was to clearly demonstrate the website’s new IA structure and content strategy which would help users find information and complete tasks more efficiently.

Sitemap outlining new global navigation of 5 main categories and 10 sub-categories

Techniques & tools:

  • Competitive Analysis
  • Heuristic Evaluation
  • Contextual Inquiry
  • Card Sorting
  • Site Mapping
  • OmniGraffle

Key Findings:

  • Clear global navigation allowing for quick visual scanning is top priority
  • Lack of responsive web design, product photos, user ratings, and quick help functions can negatively impact user experience satisfaction (brand goals) and detriment return usage (business goals)
  • Particularly in closed card sorting, word choice of main categories (i.e. “decorations” vs. “party decor”) was essential to whether or not participants could quickly identify where a specific item belonged in the larger IA framework. My six card sorting sessions proved that the more generalized the main category, the easier it was for participants to place and account for all 100 products.

Understanding the User

The foundational research in the three personas already provided by my clients gave me a clear picture of the user’s expectations and also focused my decisions surrounding feature prioritization.

Three client-given personas representing a reliable and realistic key audience demographic

My role: In order to fully gauge each persona’s online shopping needs, I synthesized their individual pleasure points and pain points into “must have,” “should have,” and “must not have” website design features. I also created a clear scenario of purchasing a child’s outfit online to document common issues experienced in existing user flows of competitor sites.

Color key: yellow = online store needs; red = pain points; green = how we can serve
User flow of purchasing a child’s outfit on buycostumes.com — 10 clicks to complete task
nycostume.com’s new user flow completeing checkout task accomplished in 6 clicks

Techniques & Tools:

  • Personas
  • Affinity mapping
  • User Flows
  • Omnigraffle

Key Takeaways:

  • New design must have: Clear navigation, ability to read/write product reviews, and a quick checkout process. Should have: Responsive design, social sharing element, highlight new inventory, multiple/large product photos, and live chat + additional help options.
  • In creating a specific scenario/task (purchasing an outfit online) for the purpose of documenting competitor user flows, I identified how users currently perform specific tasks and uncovered common issues including over-reactive hover states, insufficient product filtering options, and too many active steps to complete the given task.
  • Design ideas sparked: Instead of hover states, test pagination to view alternate product photos. Experiment with different filter and sorting options on local pages in order to locate desired items in less clicks and ultimately, minimize user actions.

Design Evolution: Sketching and Wireframing

The sketching phase began with a rapid design studio session in order to create as much ideation as possible for both web and mobile site designs. Next, I transitioned my lo-fi sketches to higher fidelity digital wireframes using the program Sketch.

My Role: I focused my attention on designing the following pages in order to flesh out a specific user task of checking out an item online: homepage, local page, product page, and cart/checkout. I encourage early feedback in order to gauge user comfort with the interface design through a pin-up session.

Design Studio sketch ideation for web and mobile (homepage, local page, product page, and cart). Pin-up display for class feedback (on post-it notes).

After iterating my initial lo-fi sketch designs following class feedback, I created digital wireframes of each page in Sketch and set up an addition pin-up session for more feedback to spark further design iteration.

Class pin-up session gathering feedback on initial wireframes

Feedback from both pin-up sessions directly influenced design direction in my following wireframe iteration. My final user journey wireframes for both web and mobile (respectively) are illustrated below.

Annotated wireframes for desktop web design
Annotated wireframes for responsive mobile design

Techniques & Tools:

  • Design Studio
  • Sketching
  • Wireframing
  • Sketch

Key Takeaways:

  • Pin-up feedback: Remove side bar navigation and create a more robust and clear filtering option via individualized drop down menus (theme, gender, and sort by price and ratings)
  • Initial cart page did not include direct option to add or subtract product quantity. This function was added into my final wireframe iteration.
  • Most users desired immediate feedback when adding items to their cart. My final wireframe iteration included a number signifier directly in the cart to communicate immediate action recognition.

Prototyping and Testing

Prototyping and performing usability tests is a terrific problem solving exercise because this is the stage where you can tangible discover whether or not your conceived design has legs! Can the user actually complete the given task? How did the user’s reaction differ from what you had expected? When in design-doubt, test it!

My role: Using InVision, I created a testable prototype of my second round digital wireframes. Leading with a specified scenario (noted below), I led multiple task-oriented usability tests, noted any user pain points, and further iterated my design based on test findings.

“Imagine you are babysitting your 6-year-old niece for the weekend when she tells you that she’s been invited to a slumber party by a group of very ‘exclusive’ girls, so this is kind of a big deal! Her invitation, however, is contingent on her outfit matching the party theme: Disney princesses. Being the benevolent uncle/aunt that you are, you decide to immediantly check out nycostumes.com with the goal of purchasing a suitable outfit for your niece. Sometime during this process, she also mentions that her best friend is now invited and they want to match in identical outfits! ‘Won’t you buy a matching dress for my BFF? Pretty puuhhlease?’ she pleads.”

Techniques & Tools:

  • InVision
  • Usability Testing
  • Scenarios

Key Takeaways:

  • Given the scenario (above), most users wanted to look up sizing details in the product page. I iterated my final wireframes to include an expandable option detailing the product’s size & fit in relation to age range.
  • If a user decided not to purchase the additional outfit for their niece’s friend, there was no option to share the product via social. In my final wireframe iteration, I added an email and social sharing component in the product page.
  • Two of my four usability testers expected to see a checkout confirmation page as the last wireframe. I updated my design to include a confirmation page with a thank you message + email confirmation notice for immediant action validation (check out successful).

Go on, check out the web prototype!
http://invis.io/N93EA9USU



Insights & Project Takeaways

What I found most surprising: Following IA heuristics is no joke! In reflecting on this entire process, I find it very difficult to apply all (or even half) of Abby Covert’s 10 principles to my finished design. Although I believe my design t0 be findable, clear, communicative, and useful, I have yet to venture into the remaining principles: accessible, credible, controllable, valuable, learnable, and delightful. Going forward on future projects, I hope to keep these heuristics at the forefront of my mind during each UX design process — how awesome would it be to create a truly delightful product!

Why this project is important: Information architecture is essential to understanding how all the smaller pieces fit together to create the larger picture (how items relate to each other within the system). Clearly organized, labeled, and structured IA will allow users to understand where they are, what they’ve found, what’s around, and what to expect. This project was a foray into grasping a heuristic approach to IA which not only informs content strategy but also essentially makes-or-breaks the foundational structure of a given design. Through the process of this project, I feel I’ve learned to be a more empathetic UX designer by immersing myself in the mindset of the user via personas, user flows, and scenarios in order to design a new IA that makes the most sense to the users (repeat mantra: I am not the user).

Like what you read? Give Angela Dong a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.