Awards Page Redesign: Barcbots.com
The awards page became the centerpiece of the redesign: a way to turn 227 awards across 13 seasons into a story visitors can actually understand in seconds.
The problem with the original page
The legacy awards experience was effectively a long scroll of rows. It had rich data, but almost no editorial framing. Visitors had to do the work of spotting the big story, understanding the team hierarchy, and mapping award types on their own.
That made the page accurate, but not persuasive. It documented achievement without making achievement feel legible.
Information architecture decisions
- Pull the highest-signal metrics into a stats grid so the scale of the team’s success is visible immediately.
- Surface the headline accomplishments in a peak moments strip near the top of the page.
- Replace a more complex filter matrix with simple VRC and VEX IQ pill filters for faster interaction.
- Organize awards into team accordions sorted by award count, with the most decorated team expanded by default.
Award system mechanics
The redesign introduced two semantic systems to make the archive scannable: award types and event types. Award rows gained icon circles and color treatments for Excellence, Champions, Skills, Design, Worlds, and Other. Event badges separated Signature, State, Worlds, and Qualification events.
These rules turned an undifferentiated list into a quick-read interface. Visitors no longer had to inspect each line item equally; the page created its own hierarchy through visible patterns.
Round 2 refinements
- Add animated counters to the stats grid so key numbers feel active rather than static.
- Insert a horizontal bar chart between the stats grid and highlight strip to show awards by team at a glance.
- Improve accordion breathing room with tint, spacing, and left-border accents on season labels.
- Strengthen motion and hover behavior so the page feels more polished and deliberate.
Outcome
The awards page moved from a flat archive to a presentation layer that communicates prestige. It still preserved the full dataset, but now it tells the story in the right order: scale first, standout moments second, detail on demand after that.