Clowns, E-Commerce, and Information Architecture.

This was my second project at General Assembly, centered around information architecture and content strategy for an e-commerce website, NYC Costumes (now renamed Halloween Adventure). My design meets user, business and brand goals and follows IA heuristic best practices. The project happened over 2 weeks, producing a responsive website, 100 items of inventory, and some badass research.

The Client’s Problem

Small retailers need to step up their game thanks to the likes of e-commerce retail giants such as Amazon.com.

The Opportunity

How can we redesign NYC Costumes so it serves as a beginning to end, one-stop shop, for all user’s party and costume needs- thus boosting sales and brand recognition for the business, as well as user satisfaction for the buyer?

Research Methods

  • Comparative Analysis
  • User Card Sorts
  • User Flows
  • Persona Analysis

Comparative Analysis

Contextual Inquiry-

To get a feel for the brand and the business, I did a walk through of the NYC Costumes brick & mortar store. Guess who happens to be morbidly terrified of life-sized figurines, clowns, and masked dolls?

From left to right, the fear-inducing storefront, the themed organization of the store, a terrified UX designer and observer.

I learned that shoppers who make their purchases in-store expect their buying experience to also include a walk through of all aisles, and interaction with items and toys they had not initially set out to purchase. Because visiting a costume store is much more of a novelty experience than say, getting groceries or clothes shopping, shoppers expect more of a total experience than a direct path to purchase.

Competitor Research-

I looked at five other competitors in the costume & party supplies industry; Abracadabra, Balloon Saloon, Party City, Gothic Renaissance, and Village Party Store. I looked at their navigation hierarchy.

Balloon Saloon interestingly put their inventory navigation at the bottom of their website. Some competitors focused on corporate pages in their main navigation, others focused on promotions, and most focused on their inventory.

Then I compared each competitor’s Google ratings and reviews which gave me a wider array and direct insight of customer feedback, their pain points, and their happy points.

I looked at each competitor’s homepage layout.

And their market positioning, business model, and value propositions.

My biggest finding was that many of these stores list their inventory as a catalog, without a built-out opportunity allowing users to make an online purchase.

And lastly, compared how each competitor categorized their products.

Gothic Renaissance had no inventory categorization on their website since they had no path to purchase.

I summarized my competitor research in this map based on whether a company specialized in a product (balloons, party supplies but no costumes, costumes but no party supplies, etc), and whether its website led to a purchase or not.

User Card Sorts

Open-

My comparative research helped me understand the general categories that competitors in the industry use to organize their products. I wanted to see if users would intuitively organize in a similar fashion, so I did a card sort. I gave each user the 100 sample products and asked them to organize the products in any category they saw fit.

My user’s self-selected categories aligned closely with the categories listed in my competitive research. I noticed that the user’s categories were broader, allowing room for more specific subcategories.

Closed-

I began to see clear similarities between the categories listed in my competitor research and in the open card sort. It was time to test this hypothesized structure of product information in a closed card test, where a user is given the categories before they begin card sorting.

My organized structure of categories wasn’t yet foolproof (as a 2-week-old UX designer, I wasn’t overwhelmingly surprised). Here was some feedback.

“I wish there were more subcategories, including a category for jewelry under accessories.”
Differentiate between wearable decorations/props/accessories and non-wearable items.”

Site Map-

By creating a navigation site-map based on the competitor research and card sorts, then seeking feedback during our morning pin-up sessions and one-on-ones, I iterated my categories until I landed at version 2.2 where my users were happy and successfully able to understand where a sub-category could be found. This will appear in our prototype, linked below.

User Flows

Add item to shopping cart, then view cart-

Heuristic Analysis-

Shoppers on Village Party Store were unable to finish their task, without a path to purchase.

Shoppers on Balloon Saloon could accomplish the task via a short path with an unclear navigation system.

Shoppers on Party City accomplished their task with multiple points of entry into a product and into the cart.

Persona Analysis

I looked at the three personas given to me and found some common wishes and pain points. Users wanted to…

“Establish trust and a relationship with the brand and product”

To me, this indicated the need for an emotional feature which could include product ratings, social reviews, a profile account.

“Have quick access to many options, product descriptions, suggestions of past and future purchases.”

My features should help users make more educated purchases, which could include modules for related products, expandable details tabs, and purchase history.

“See fair pricing, not be overwhelmed and easily check out.”

This indicates the need for an efficiency feature, which might be an option to rent costumes instead of buy, a minimal layout, and QuickView checkout.

The Features

Affinity map for feature prioritization, based on findings from research as well as the constraints from our brief.

After prioritizing the many different features I could include, I focused on specific features drawn from the different methods of research conducted.

Sketching & Prototyping

Sketch #1 — Paper

Paper sketches for mobile and web, focusing on modular designs.

Sketch #2 — Sketch Wireframe

Feedback: Category menu placement isn’t too intuitive for a small mobile screen. Category buttons are waaay too tiny. Why is the shopping cart icon a hanger when across the retail industry it’s usually a cart or basket?

Sketch #3 — Sketch Wireframe & InVision Prototype

From left to right: home page, category page, category page and QuickView, shopping cart, settings navigation.

Feedback: During my tests, I asked users to find the different menus for settings and categories, save an item for later, add an item to the shopping cart via QuickView and the Product Page, and find related products.

All my testers ran into the same problem. It was not clear how to find the different categories. The category title didn’t appear to be a drop-down menu, because the button didn’t have enough contrast to stick out. I changed the button to a darker, and filled in arrow, which you can take a look at in the prototype listed below.

Sketch #4 — Sketch Wireframe for Web

This web wireframe takes you through the home page, to the category page, through QuickView checkout, the shopping cart, and the alternate path to purchase via the product page.

Because I had started with the mobile wireframe, it was much easier to translate these into a web template. With more space to work with I was able to increase the number of columns as well as hero image size, but still easily maintain template consistency by keeping the same format. Web is more conducive to hover states, so what you would previously tap on in mobile you can hover through on web, streamlining the checkout process.

The Solution (so far)

The Final Prototype

Sketch #4 — Sketch Wireframe & InVision Prototype

My most important task for the next iteration was to more clearly differentiate between the settings and categories menu. By filling it in and making it bolder, I hoped to draw more attention to it.

The Walk-Through Story

John is a single parent of a 12 year old girl. One day she comes home from school, upset because her classmates made fun of her wanting to be the blue Power Ranger. “Only girls can be the pink or yellow power ranger!” they said. As a single parent and art teacher, John wants to instill values of independence, self-expression, and creative freedom in his daughter. He decides to empower his daughter by surprising her with a blue Power Ranger costume over the weekend and having their own adventure! He likes using NYC Costumes because it shows him related products, where he’s able to find a blue Power Ranger in his adult size. It also offers him a rental option, and as an art teacher, he’s grateful for the cheaper option. After their significant day, and after he sees his daughter empowered, he decides to go back to NYC Costumes. He signs in, looks through his recent purchases, and finds that he can easily find the return label to print. While he’s online, he decides to leave a positive review abut the ease of his transaction, the product, and the emotional connection he had just built with the brand.
Check out the final mobile prototype here.

Summary

The user flow for my redesigned NYC Costumes responsive website.

My solution incorporates all the features I had decided were important based on comparative research, card sorting, user flows, and persona analysis. Drawing out the user flow for my design allowed me to clearly see how a user had multiple paths of entry to the product page, as well as to the shopping cart, which is something I found important after comparing competitive user flows. My categories, based on the card sorting and comparative research, had been tested and verified to be logical as a means of finding products. Lastly, by taking a closer look at our personas, I was able to find out what features would best tie in the user and the information I had just organized!

Personal thoughts

What I found most surprising was how much research I ended up doing. Looking back, I’d say it was about 85% of the whole project. I began to struggle with what to do with all the research I had done towards the end of the research process. What did I do with all the information now? How do I consolidate and find out what the important takeaways are? The best way for me to get around to this was just to do it, test, iterate, test, so on and so forth. Having said that, it was still my favourite part. I felt more confident in my plans when I knew they derived from logical observations about competitors and users, and it also made me feel like I had a bigger hand in the overall business. Overall, I found this project to be important to me because it clarified why research was the most important step. Before creating a solution, I really needed to know the problem.

Next steps

If I had more time, I would’ve liked to create a clear annotated form of all my wireframes. By the time I got to the prototyping part of the design, I found myself very stuck in the ‘big picture’. After spending the majority of my time taking all the research I had done, converging those ideas, and then broadening them out again when testing and iterating, I found myself mentally stuck in a loop where I never thought I was going to get to a final product worthy of definitive explanations. “That will come later,” my mind told me. Part of this course has taught me that even though you will never feel like you have a perfectly finished and polished product, you’ll still have to package it and send it off. Be ready to be done!

Other improvements? As always, more tests, more feedback, more iterations. Is there ever such thing as a perfect final product with no more improvements to be made?!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.