[Hidden Level] — Uncovering Information Architecture (IA)
OVERVIEW
The project brief entails designing a new information architecture (IA) and content strategy around an online shopping experience for existing users of the site in question. The design was based off goals of the users (represented by 3 given personas), the goals of the business, and the goals of the brand. The prototype was then tested by users and followed IA heuristic best practices.
Disclaimer: This was a class project in learning about the methodologies of UX Design. And has no affiliation with any of the retail stores mentioned.
Project Duration: 9 Days
Tools: Pen & Paper, Card sorting, Omnigraffle, Sketch, InVision
Client: Year-Round Costume Shop
PROBLEM/OPPORTUNITY
With a very loyal customer base, the store will be expanding its business into online retail to reach a larger audience. The design of the website will be based off the research that caters to the customers.
RESEARCH
The research methods used allowed the creation of the framework of the navigation sitemap and features for the website and mobile app.
Open Card Sorting
In open card sorting, users would organize sample product inventory of 100 items.
FINDINGS:
- Users grouped items together based on similarities.
- Some items were difficult to group since the text or image were very ambiguous
- When many items were similar it was likely to become a category (ie. hats)
- Although users have different ontology of the categories, items that were very similar were grouped in the same manner
DEDUCTIONS:
Product items need detailed product descriptions in order to eliminate ambiguity.
Closed Card Sorting
Analyzing the categories created from open card sorting and looking at competitor websites, 3 Main categories were created along with 15 subcategories.
Major categories:
- Costumes
- Fun & Games
- Accessories
Sub categories:
- Props
- Jewelries & Necklaces
- Make up & Body Art
- Things you put on your head and face
- Hats
- Masks
- Wigs
- Special effects
- Decorations
- Tricks
- Pet costumes
- Adult costumes
- Kids costumes
- Characters
In this round, users were asked to perform a 2-Part card sort. The first task was to group the subcategories into the main categories. The second task was to group the 100 items into the subcategories.
FINDINGS:
- Main categories were dependent on the context, each user definitions for the 3 main categories
Wig or Masks are part of a costume, it can belong in either Accessories or Costumes
- Subcategories were well defined, so items in those categories were always grouped in the same manner
DEDUCTIONS:
- Subcategories that were eliminated: Things you put on your head and face, Characters
- The subcategory Jewelries & Necklaces became Jewelries & Accessories to encompass all items for the neck, wrist, hands, and waist
Contextual Inquiry
Visiting the physical store allowed a better understanding of the products. Most customers were there to buy items for Mermaid parade weekend.
Based on general consensus from those interviews, masks and wigs are definitely Accessories.
Comparative Analysis & User Flows
Three user flows were created with the task of adding items to the shopping cart and editing the shopping cart.
FINDINGS/DEDUCTIONS:
- Adding item to cart was easy process for Costume Warehouse and Spirit (1 page/action in order reach shopping cart page)
- Party City had one extra action that could be a pain point; by default the quantity of an item is set at “0”. Other competitors set theirs at “1”.
- Costume Warehouse failed editing test. Once a size is selected it cannot be changed on the shopping cart. This is a major pain point since the user would have to through the whole user flow to change the size of an item.
Personas
My main focus was on John. However overall the personas want a responsive site and quick checkout.
Features to include:
- What’s New
- Ratings & Reviews
- Sorting & Filtering
- Support or Contact
IDEATION & PROTOTYPING
Goals & Focus
Based off the research gathered. These were must haves:
- Having clear ways of locating specific products
- Having an efficient means of adding to and editing a shopping
- Steer customers toward popular products
- Allowing customers to browse related products
- Allowing customers to read and write reviews
The Sitemap
After further analysis with other competitive sites the costumes category was removed and Adult costumes, Kids Costumes, and Pets Costumes became main categories. Since the customer is coming to buy costumes there is no need for to waste an extra click having a Costumes page.
Sketching
I looked at a couple of the competitor sites and started pulling features that I would want in my prototype.
Wireframes
The initial layout of my product detail page was well received during pin-up session. Since a lot of the detail was well thought out from research phase I focused building the rest of the other pages while remembering to focus on the goals.
Prototype
Scenario:
John is a single parent of 12 year old girl. He loves spending time with her whenever he can. Halloween is one of their traditions. Last year they rocked Olaf & Elsa (Frozen). And this year he wants to find something to top that. Perhaps Jurassic World theme? Or Star Wars? Who knows…
Let’s see what this app has in store.
NEXT STEPS
Short term
- Integrating more of the features that cater to the personas
- Have both the web/mobile prototypes fully built out
- Conducting more usability testing of the prototypes
- Continue to compare and contrast competitor e-commerce sites
Long term
- Actually have a website built for next year
- Transition current business into online retail
Conceptual
- Measuring the metrics of online shopping for the business
- Would people prefer the in-store or the online experience?
- How important are reviews/ratings for the customer?
Granular/UI
- Looking at the ADD TO CART button
- Adding color to the button and working with higher fidelity wireframes
REFLECTIONS
I hit a lot of roadblocks in this project. But I knew this was part of the learning curve process.
At first, I couldn’t make the connections with some of lecture concepts. There was a lot of information and a variety of approaches. There were many examples that gave me a general understanding, but when trying to applying them specially to the project, it was difficult to grasp. I tried seeking more detailed examples since I lacked understanding of the terminology. However, given some time those concepts began to sink in allowing me to utilize those research tools for the project.
My second roadblock came to me when I began tried making sense of all the research that I had found. What was my problem statement? How do I synthesize my findings? Again by allowing myself some time to dwell on my observations I was able pick out key points to move into onto the ideation phase.
Lastly, my third roadblock came when I tried putting together the client presentation. Having never had any experience working for a client, I had no idea how to condense all the information from the past 2 weeks. I couldn’t gauge what they already know or not know and what would be too much UX process lingo. I spent most of the day feeling overwhelmed by the work I have not done yet.
The moment when things clicked for me was when I took a shower (Epiphany moment #2). I recalled the fortune cookie message that I got from takeout. “Try a new system or different approach.” I had been approaching putting together the my presentation the wrong way. Why was I trying to put together a narrative from beginning to end? It was much easier from the reverse order, end to beginning. I had been using that approach when I made my prototype. Why did it not dawn on me earlier to use the same approach? #facepalm
Nevertheless, a presentation was put together. I was also able to learn a few things from classmates during presentation day on how I can improve myself for the next time.
The takeaway I learned from this project were:
- Don’t rush the learning process. Give it time. Things will eventually come to you.
- Break tasks down into smaller bits. (Although I know this already, I still need to work on it).
- Try something different if one way is not working.
