Eureka Puzzles & Games
Website Information Architecture & Wireframes
TYPE: Class Project, Individual
DURATION: 2 weeks
TOOLS: Pen + Paper, Axure
MY ROLE: Researcher, information Architect, user flow-er & wireframer
SHOPPING FOR BOARD GAMES IS NEVER AN EASY TASK. WHAT GAME WILL HOLD YOUR INTEREST? WILL IT BE OK FOR AN 8-YEAR-OLD? HOW DO YOU KNOW IF YOU'LL LIKE THE GAME PLAY?
As part of the project requirements for the General Assembly User Experience Design Immersive program, I chose to re-design the Eureka! Puzzles & Games web experience to create a place for board game enthusiasts and newbies alike to find that perfect game -- easily. Furthermore, the new Eureka! site should also serve the needs of the business itself, with more space allocated to not just showing off product, but marketing the products towards the right audience.
I OPTED FOR A NO-COST, YET THOROUGH APPOACH. DESIGN DECISIONS SHOULD BE BACKED BY DATA.
I recruited friends, loved ones, neighbors and acquaintances for interviews and card sorting exercises to gather insightful and highly qualified data. The next steps would include a thorough analysis of the user research, ensuring the forthcoming strategy would meet the user expectations. Once certain features and needs were documented, card sorting and sketching would begin, along with user flows and a review of the information architecture schema. Lastly, Axure would be used for wireframing.
DISCOVERY & MARKET RESEARCH
The core target market for Eureka! includes kids and adults who prefer a fun night at home instead of an expensive night out.
On the fringe, Eureka! also targets "hardcore" gamers (hobbyists), serious chess players, college-aged students searching for party games, and children who are interested in S.T.E.M. (Science, Technology, Engineering, Mathematics) toys, such as chemistry sets and telescopes. This is evidenced by their overall design and breadth of product offerings.The inconsistent taglines of "Puzzles & Games" and "Explore Puzzles & More" emphasize the quantity and variety of available products. The breadth of Eureka's products an issue that will be addressed in the re-design.
The current Eureka! website fails to achieve it's goal of being a one-stop-shop for gamers and the game-curious.
The left-side menu poses unfamiliar categories of games, puzzles, and toys, potentially leading some to believe there is no order to the menu madness. The navigational area appears to be split into two and is designed using blocky, Internet 1.0 design schema. The hierarchy of information leaves much to be desired. Furthermore, the out of date design breeds a lack of trust.
I evaluated the current website using Jakob Nielsen's 10 Heuristics for User Interface design.
Eureka's website does two things well: it lets you know what the system status is - that is, you can see if you're logged in or not. Secondly, it actually does a pretty good job at giving you useful error messages. Nifty!
Eureka! scored low on the remaining 8 heuristics. Most notably, the consistency and standards across pages was poor. This could be an easy fix in the re-design.
COMPETITIVE ANALYSIS: LOCAL COMPETITORS
COMPETITIVE ANALYSIS: SITE FEATURES
Eureka's competitive edge is that it has a curated selection of games, puzzles and toys. I evaluated Eureka's web presence against its competitors in order to get a sense of where it might stack up against them.
I decided on a loose rubric of elements one would find on a typical e-commerce site, such as J.Crew or REI. These are considered either standards or baselines in current e-commerce UX.
SITE FEATURE ANALYSIS
COMPETITIVE ANALYSIS: PRODUCT PAGES & USER FLOWS
PRODUCT PAGES & USER FLOWS
Although Eureka! has a leg up on its competitors by having a website capable of purchasing product, it still had a long way to go in terms of the overall shopping experience.
For the product page and user flow analysis, I looked at several e-commerce giants, including J.Crew, TJMaxx, Banana Republic, and Kate Spade. Although these are all in similar industries, the similarities between the user flows provides some clues as to what makes them so sucessful. Can't guess? It's simplicity!
THE E-COMMERCE LANDSCAPE
J.CREW: THE GOOD
TJMAXX: THE GOOD
BANANA REPUBLIC: THE BAD & THE UGLY
KATE SPADE: THE JUST PLAIN WONDERFUL
DISCOVERY: KEY ISSUES & OPPORTUNITIES
What can we do better?
Based on these analyses, Eureka has:
- A large set of unique products
- A large set of nameless or unknown products (aka: “I don’t know the name for this!”)
- Product pages with little information
- Products in which there is a significant potential for categorical overlap (as it relates to the current menu information structure)
- A poorly organized left-side menu
- Little in the way of marketing messaging and conversion opportunities
- The best functionality among its competitors, but that doesn’t mean there isn’t room for improvement!
& Old Web Standards
I suspect that the organization and layout of Eureka’s website makes it difficult and frustrating to find what a user could be looking for, especially when that user just wants to browse and doesn’t know exactly what they are searching for.
Screeners were sent out to friends, family, acquaintances, neighbors and strangers on the internet to assess their knowledge of board games and understand their experiences with e-commerce.
- 'Survey Monkey' design
- 28 valid responses received
- Included demographic questions
- Included behavioral questions (contextual questions around board game usage + e-commerce habits
- Final "Can I interview you?" question
For participants who scored "high" in their screener knowledge of board games, an invitation to interview was extended.
- Screener resulted in three 10-minute interviews
- Focused on two key areas: knowledge the user might seek in the board game purchasing process and experiences with e-commerce
- One question in particular was revealing about what users wanted to see when purchasing a game...
THE REVEALING QUESTION
Can you describe what kind of information might be useful for you in deciding whether or not to buy [a game]?
A: “Number of players! I’m either looking for two player games, or something for like 4 people.”
A: “Maybe a long description? Give me attributes. ‘Strategy’ or not. How long does it take to play, things like that.”
A: “[I need a] heavy indicator of quality.” “[I want to know about] board games of certain styles and types.” “[Or] ‘It’s kind of like X with X twist.’”
CARD SORTING EXERCISE
Users were asked to sort the cards into whatever groups they think made sense then provide a label for each of the groups.
For the card sorting exercise, I chose to pick a sampling of 30 products for sale on Eureka's website. These ranged from board games, to toys, to chemistry sets. Cards were named exactly as the product was named on its product page.
- The sort garnered some unexpected categories, such as "Games old farts and my brother likes" and "For Travel"
- Card sorters noted that many of the cards could have been in two or more categories
- Most card sorters didn’t recognize 100% of the cards
- Every person established “For Travel” as a category in the card sort
- Mostly for games such as “Magnetic Chess,” “Magnetic Checkers,” and “Boggle”
- This made its way into the final sitemap
- In every card sort, the user pulled out Age categories
- This did not fit into the the main structure of the site - most categories are descriptive of the games themselves, not necessarily appropriate demographic attributes
- Age was described by users as “For Kids,” “For Adults,” or “For...Old People”
- “Shop by…” includes a short menu to shop by Age range
- Game descriptors such as “Strategy” and “Fantasy” aren’t straightforward to almost any user.
- One conveys how the game is played, the other conveys a theme
- “Shop by..” includes a short menu to shop by game Themes
- Some descriptions overlap. A game could be both “strategy” and “card.”
- A tagging feature was introduced in Product pages
Re-design the Eureka website to make purchasing a more pleasant experience with less friction by streamlining the menu, creating a memorable and predictable architecture for category and product pages, and creating features that allow users to browse products across categories
IDEAS BASED ON RESEARCH
A NOTE ABOUT INFORMATION ARCHITECTURE STRATEGY
It is extremely important that the Mega Menu reflects the various levels of product categories available to the user
There are 4 levels:
1: All Navigational Elements
2: All BOLD UNDERLINED
4: Product Level
ADD TO CART + CHECKOUT
FIND A SPECIFIC PRODUCT
ADD TO WISHLIST
SKETCHING & SKETCH ITERATION
USER TESTING: RESULTS
- Ability to click on navigational menu item led to some confusion
- Typical nav menu behavior would open menu onClick
- This would also open the menu on hover
- User would have preferred to filter by age range and sort by price
- Functionality added in final prototype
- Zip code box has unclear significance during the checkout process
- Added a label with instructions for prototype
- Checkout flow language could be clearer
- Modified page headlines and button language
- First iteration of the checkout flow did not work well; hidden fields would pop up upon typing in certain fields
- Streamlined the checkout process, added an additional step for clarity, deleted most hidden fields