Problem
Buying a board game without knowing which one to pick
General stores mix games with toys and don’t filter by what matters when you play: how many players, how long it lasts, what age it’s for and how hard it is.
← Projects / Case study · E-commerce
A store that helps you choose your next board game.
- Role
- UX/UI design From idea to prototype
- Duration
- 5 days October 1–5, 2026
- Context
- Google UX Design Certificate
- Tools
- Figma
Site screens · Swipe to explore
Solution
A store that guides the choice and the payment
Board-game-specific filters, a five-question quiz, product pages that explain how to play, and guest checkout with local payment methods (PSE, Nequi or Efecty).
Outcome
Five people completed all five tasks
A moderated test with the high-fidelity prototype. Nobody needed help, and what they asked to improve led me to develop the quiz further.
01 · Research
The problem isn’t a lack of stores, it’s a lack of guidance
I started from secondary sources (market reports, player surveys and e-commerce usability studies), an analysis of three reference sites, and informal conversations with players and shoppers.
71%
of hobbyists discover games through recommendations, not advertising.
PrintNinja · 545 players · 2018
42%
of large online stores have no category-specific filters.
Baymard Institute
70%
of carts are abandoned; 4 in 10 abandonments are due to extra costs.
Baymard Institute
63.9%
of online payments in Colombia are made with PSE.
CCCE · Q2 2025
Discovery
You can’t filter by players, duration, age or complexity, so you can’t tell whether a game works for your group.
Confidence to decide
The product page doesn’t explain how to play or show useful reviews, so people go looking elsewhere.
Hidden total cost
Shipping shows up at the very end, on top of an import price that’s already high.
A checkout not built for Colombia
It forces you to create an account and doesn’t offer PSE, Nequi or cash.
The player surveys come from the U.S. and Europe; the informal conversations, without a structured script, helped me check them against the Colombian context.
02 · Personas
Three people, three ways of shopping
Built from the secondary sources and the informal conversations.
Andrés Ruiz
The hobbyist · 31 · Bogotá
“Before buying, I watch a video review and check how long a game takes. If the store doesn’t tell me, I leave.”
Goal
Find new releases and expansions by mechanic and complexity, know whether they come in Spanish, and pre-order.
Frustration
Product pages without duration, language or complexity; not knowing if it’s in stock.
Laura Mejía
Gift buyer · 27 · Medellín
“I want to get something for my brother, who plays a lot, but I don’t know which ones he has or which one is good.”
Goal
Quickly pick a safe bet for 4 to 6 people, know when it arrives, and pay without creating an account.
Frustration
Too many options with no guidance, jargon she doesn’t understand, and shipping that appears at the end.
Catalina Torres
Mom of two · 41 · Cali
“I’m looking for something my 8- and 11-year-olds can understand in ten minutes, that we can all play.”
Goal
Filter by age and short duration, see that the game is easy to learn, and get it before a certain date.
Frustration
Worries about buying something that ends up on the shelf, and doesn’t trust stores she doesn’t know.
03 · References
Three references and an open space
None of them combine discovery designed for board games with local payment. That’s where Boardos fits.
Amazon
General marketplace
Does well
Search with a category selector, a clear buy box, “frequently bought together” and reviews.
Missing
Mixes games with toys and doesn’t filter by players or duration.
Boardos takes
Search with autocomplete, the buy box and cross-selling.
Steam
Video game discovery
Does well
Tags by mechanic, recommendations and discovery quizzes.
Missing
Doesn’t sell physical games.
Boardos takes
The tags and the “Find your game” quiz.
Buscalibre
Online store in Colombia
Does well
Catalog by category, pre-orders, prices in pesos and local payment.
Missing
A product page designed for books, with no game attributes.
Boardos takes
Category navigation, pre-orders and local payment.
04 · Information architecture
Six branches and ten screens
The sitemap separates catalog, search, discovery, purchase, account and help. The dark boxes are the ten screens that got a wireframe.
05 · From low to high fidelity
From gray wireframe to store
First, ten wireframes at 1440 px and a low-fidelity prototype of the purchase flow. Then the design system and the same ten screens at 2560 px.
Low fidelity · Home
Structure and hierarchy in gray, with the header, footer and product card as components.
High fidelity · Home
The same structure with the brand, illustrated covers and interactive states.
Oct 1
Architecture and wireframes
Sitemap and ten grayscale wireframes.
Oct 2
Low-fidelity prototype
The full purchase flow, with autocomplete and an add-to-cart notice.
Oct 2 – 5
Design system
Color tokens with AA contrast, two typefaces and components.
Oct 5
High-fidelity prototype
Ten screens at 2560 px and about 600 interactive elements.
After
Testing and iteration
Five usability sessions and a more complete quiz based on what participants asked for.
06 · Decisions
Four decisions, one for each pain point
Decision 01
A quiz for people who don’t know games
Five questions about the group, ages, time, style and budget lead to a list sorted by match. You don’t need to understand categories or mechanics. After testing, I built it out fully, with your answers always in view.
Addresses
Discovery
Decision 02
Filters for what matters when you play
Players, duration, age, complexity, mechanic, publisher and language. The same data appears on every product card, so you can compare without opening the product page.
Addresses
Discovery
Decision 03
A product page that saves you from hunting for reviews
Players, duration, age and complexity sit at the top. Further down: how to play, what’s in the box, and reviews rated by aspect.
Addresses
Confidence to decide
Decision 04
The total in view, and payment the way Colombians pay
Shipping and the total are visible from the cart. You can check out as a guest and pay with PSE, Nequi or Efecty, under a simplified checkout header.
Addresses
Total cost and checkout
07 · Visual identity
A warm brand, like a game night
The die replaces the “o” in the name, and the tilted plate recalls a stacked board. The system is called Warm Tabletop Modern.
Exploration
Eight directions for the logo: six come from hand sketches and two are new proposals.
Final logo
The plate with the die, in three color combinations for different backgrounds.
- #B84A39TerracottaPrimary actions
- #E08A1EOrangeAccents and deals
- #234E43GreenSupporting blocks
- #FAF4F0CreamPage background
- #24201DCharcoalText and footer
Typography
- Outfit
- Headings and prices
- Plus Jakarta Sans
- Body text, labels and UI
Design system
Base colors are never used directly on screens: each one goes through a token named after its role (background, text, action, state). Every piece of UI text uses one of the 14 styles.
- 39base values in use
- 36tokens in use
- 14text styles
Covers
Ten made-up games with their own covers, built as components to fill the catalog without using real brands.
Components
Buttons, chips and badges, documented with their variants. White text only goes on terracotta or darker; orange gets dark text to meet AA contrast.
08 · Usability testing
Five participants, five tasks, all completed
Moderated 15-minute sessions with the high-fidelity prototype, thinking aloud. Five people aged 19 to 64 took part, three men and two women.
Success rate
25/25
tasks completed without help: all five tasks, by all five participants.
Ease of use
94/100
on an SUS-style usability questionnaire, in its eight-question version.
Recommendation
9/10
average likelihood of recommending Boardos to a friend. All five answered 8 or higher.
Confidence
8.8/10
average confidence in choosing a good gift with the quiz.
The tasks
A full visit, from gift idea to confirmation
- T1
Use “Find your game” to choose a gift for someone who has never played.
5 of 5 - T2
Find Reinos de Ámbar and open its page.
5 of 5 - T3
Say how many players it’s for, how long it lasts, whether it works for a 10-year-old, and how hard it is.
5 of 5 - T4
Add it to the cart and say the total, how many items are in it, and how much shipping costs.
5 of 5 - T5
Complete the purchase and say the order number and delivery date.
5 of 5
One participant took a while on task 4 looking for how to scroll. I discarded it as a finding: the Figma preview doesn’t show the scrollbar a browser does.
What they liked
- The covers, the color palette and the site’s visual identity.
- How familiar it felt next to platforms like Amazon.
- How easy it was to add a product to the order.
- The way each game’s information is laid out.
What they asked for
“It would be nice to see which option is selected in the quiz.”
“I’d like the quiz to go deeper.”
Iteration after testing
The quiz, deeper and with your answers in view
Both requests pointed to the same place, so I built out the full quiz.
Step 1 · Players
Step 3 · Time
Step 5 · Budget
Five complete steps
Players, ages, time, play style and budget, each with its own screen and options.
Answers always in view
The “Your answers” panel and the step bar show what’s been chosen and what’s left.
Results that narrow down
The list goes from 128 games to 37 and then to 12 as you answer, sorted by match.
Made for gifting
The first step asks whether it’s a gift, and the ages step asks whether the person has played before.
09 · Wrap-up
What I learned and what’s next
What I learned
Filtering by players and duration is worth more than a large catalog.
And designing for Colombia changes the checkout: PSE and guest checkout aren’t extras, they’re the main path.
Next steps
- Test the new quiz in a second round, with the full ten-question SUS questionnaire.
- Design the mobile version, because Laura shops from her phone.
- Design empty and error states, the mega menu and the mini cart.
- Add focus and pressed states to the buttons.
Next case study
TuHuella