Screen Shot 2018-01-03 at 4.38.28 PM.png

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

 

 

OVERVIEW

THE GOAL

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.

MY APPROACH

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.

Eureka! - Current Web Presence

Eureka! - Current Web Presence

 

 

DISCOVERY & MARKET RESEARCH

THE MARKET

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.

CURRENT WEBSITE

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.

 

HEURISTIC EVALUATION

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.

 
Eureka! Heuristic Evaluation

Eureka! Heuristic Evaluation

 

 

COMPETITIVE ANALYSIS: LOCAL COMPETITORS

COMPETITIVE ANALYSIS: SITE FEATURES

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: Part I

Competitive Analysis: Part I

Competitive Analysis: Part II

Competitive Analysis: Part II

COMPETITIVE ANALYSIS: PRODUCT PAGES & USER FLOWS

COMPETITIVE ANALYSIS:
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

The E-Commerce Landscape: J.Crew, TJMaxx, Banana Republic, Kate Spade

The E-Commerce Landscape: J.Crew, TJMaxx, Banana Republic, Kate Spade

 

J.CREW: THE GOOD

J.Crew Checkout Flow & Notifications

J.Crew Checkout Flow & Notifications

 

TJMAXX: THE GOOD

TJMaxx Shopping Cart

TJMaxx Shopping Cart

 

BANANA REPUBLIC: THE BAD & THE UGLY

Banana Republic Checkout/Shopping Cart

Banana Republic Checkout/Shopping Cart

 

KATE SPADE: THE JUST PLAIN WONDERFUL

Kate Spade Mega Menu / Information Architecture

Kate Spade Mega Menu / Information Architecture

Kate Spade Product Page

Kate Spade Product Page

 

 

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!

Screen Shot 2018-01-05 at 3.52.07 PM.png
 

 

THE PROBLEM

Organization

& 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.

 

 

USER RESEARCH

RESEARCH METHODS

Research Methods I Used in Eureka! Analysis

Research Methods I Used in Eureka! Analysis

 

USER INTERVIEWS

SCREENING

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
A screenshot of the first part of the Screener

A screenshot of the first part of the Screener

 

INTERVIEWS

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]?

 

INTERVIEWS: FINDINGS

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.’”

 

 

INFORMATION ARCHITECTURE

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.

Results:

  • 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
 
Card Sorting Activity

Card Sorting Activity

FOUR TAKEAWAYS

  • 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
 
 

 

THE SOLUTION

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

Feature Ideas Based on Interviews & Card Sorts

Feature Ideas Based on Interviews & Card Sorts

 

 

INFORMATION ARCHITECTURE

Information Architecture of Eureka Web Re-Design

Information Architecture of Eureka Web Re-Design

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
3: Sub-Categories
4: Product Level

Mega Menu & Visual Representation of Information Architecture

Mega Menu & Visual Representation of Information Architecture

 

 

USER FLOWS

ADD TO CART + CHECKOUT

Checkout User Flow

Checkout User Flow

FIND A SPECIFIC PRODUCT

Product User Flow

Product User Flow

ADD TO WISHLIST

Add to Wishlist

Add to Wishlist

 

 

SKETCHING & SKETCH ITERATION

HOME PAGE

SEARCH FEATURE

PRODUCT PAGE

SHOPPING CART

CHECKOUT PROCESS

 

 

USER TESTING

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
The (nearly illegible) notes from user testing

The (nearly illegible) notes from user testing

 

 

FINAL INTERACTIVE WIREFRAMES


https://r7144w.axshare.com/#p=home_page&hi=1

Password: uxdi