04, Social & consumer product
OrganisationBrewDog
BrewDog LIVE
Making participation easy to follow
The live experience needs to make the next action obvious: join the room, choose an answer, lock it and understand the result. BrewDog LIVE designs that sequence for responsive web, with social presence supporting the task rather than competing with it. It is a separate design from the historic BrewDog Online Bar interface.
Product design · Live social web experience · Figma design and prototype
Project brief
About
A shared live event on the web: one quiz, joined from home or from a participating bar, with beer and venue discovery continuing after the game.
Problem
A live social event online has to hold two things at once, the momentum of the group and the clarity of an individual action. Selected is not locked, wrong is not the same as no score, and a dropped connection should not lose the room.
Objective
Give every step of the answer cycle its own visible state, and keep social presence in proportion to the task on both desktop and mobile.
How the interfaces support the task
Desktop shared session: Keep the event, team presence and quiz question visible together, then continue into beer and venue discovery.
Mobile participation: Place readable answer choices and feedback in a focused sequence, with team presence compressed into a compact strip. Preserve a clear way back after a connection interruption.
Together: The web experience supports participation across screen sizes; live media and synchronisation shown in the prototype are simulated.
Scope, work needed
- Product architecture from home and event entry through to beer and venue discovery
- Answer cycle states: open, selected, locked, correct, incorrect, score
- Connection failure and retry that preserve participation context
- Tasteprint and alternative recommendation with availability uncertainty shown
- Reusable quiz answer, connection, score and offer component families
- Frames at 360, 390, 1024 and 1440 widths
Personas
Curious explorer
TaskFind something worth joining tonight, and choose between joining online or going to a bar.
Design responseLive state is the first thing on the event page, with the online and in-venue routes offered side by side.
Connected regular
TaskGet relevant discovery and keep continuity between one event and the next.
Design responseTasteprint and saved beers carry across sessions, and event entry keeps returning players oriented.
Live host
TaskKeep online and in-venue participation connected during a round.
Design responsePresence, round state and reveal controls stay in one strip so the room reads the same in both places.
Experience optimiser
TaskExamine where discovery opportunities sit across the product.
Design responseThe information architecture maps Live, Discover, Offers and Bars as one object model with shared entry points.
Design personas · Portrait · Gustavo Fring / Pexels; Portrait · Jamie Kimball / Pexels; Portrait · Andrea Piacquadio / Pexels; Portrait · Yan Krukau / Pexels.
Our contribution
Event entry and shared live participation, from the event identity and timing through to joining the room from home or from a participating bar.
The complete quiz answer cycle, with open, selected, locked, correct, incorrect and score states each given their own visible feedback.
Connection failure and recovery that keep the participant's place in the event rather than dropping them back to the start.
Tasteprint beer discovery and venue continuation, shared state patterns and mobile and desktop layouts across 360, 390, 1024 and 1440 widths.
Design narrative
01An online pub, designed as one experience
The project sits in the context of lockdown, when communal pub experiences moved online. In March 2020, BrewDog announced 102 virtual bars intended to reconnect local communities through tastings, masterclasses, quizzes, music and comedy. That is the context for the work, not evidence that this interface powered those bars.
BrewDog LIVE designs the online-pub idea as one cohesive experience: event entry, social presence, participation, recovery and discovery in a single product.
Event entry, one identity, one participation action, and the demo label kept visible.
02Give the event a clear entry
The home view combines event identity, timing, a visible live label and one participation action, with the choice between joining online and finding a participating bar made explicit.
The design keeps a single obvious route into the event and shows what is about to happen.
03Design the whole answer cycle
A selected answer is not yet a locked answer, and a wrong answer is not a silent non-event. Selected shows the choice is held but changeable, locked closes it, and correct and incorrect each carry their own visible result and score consequence.
Separating those states is what lets a participant trust the game while the room moves quickly around them.
Answer feedback, correct and incorrect states are visually distinct, with score kept separate.
Demo teams and scores; quiz points only, no spend or consumption ranking.
Question on mobile, a compact team strip, stacked answers and an unlocked selection.
Answer states, one component family covering open, selected, locked, correct, incorrect and closed.
Design-system specimen; no live quiz service is implemented.
04Keep social presence in proportion
On desktop, team presence sits beside the question. On mobile it compresses into a strip above the question, keeping the event alive while the answer targets stay large and stacked.
Presence supports the task at both widths instead of competing with it for the moment when an answer has to be chosen.
Live session, presence supports the round without crowding the next action.
Demo session with fictional participants and AI-generated bar settings. Captions are part of the design; no live captioning service is demonstrated. Camera use is optional.
Live session on mobile, presence compressed to a strip above the next action.
Fictional participants and AI-generated bar settings. Captions are part of the design; no live captioning service is demonstrated. Camera use is optional.
05Let discovery follow participation
Beer and venue exploration continue after the quiz. Tasteprint expresses the taste attributes behind a recommendation, and alternatives explain why they are being offered rather than presenting a bare list.
Venue continuation carries the event onward, and uncertain availability stays visible instead of being smoothed over.
Tasteprint, start with what you enjoy; no account needed to explore.
Recommendation, an alternative explains what it keeps and what it explores.
Recommendation fit is illustrative, and availability is deliberately shown as uncertain.
Venue discovery, the venue's published information stays the source of truth.
Venue details are time-sensitive sample content.
Architecture, five consumer contexts over shared beer, venue and event objects.
Product architecture; Pulse is a forward-looking area shown with illustrative data only.
06What was delivered
Connected event, answer, score and recovery states, reusable answer, connection, score and offer component families, and the information architecture linking Live, Discover, Offers and Bars.
Responsive compositions at four widths and an interactive prototype of the event, answer and recovery sequence.
Systems & responsive
Design system
Reference, semantic, context and beer-context variables back a component page covering quiz answers, connection, score and offer states, so a state means the same thing across the event, the question and the discovery views.
Responsive behaviour
The desktop question pairs answers with team presence. Mobile keeps a compact team strip above a stacked question and answer area, with large answer targets. Frames exist at 360, 390, 1024 and 1440.
Prototype
BrewDog LIVE prototype walkthrough
Discovery and shared quiz walkthrough
Includes a visit to the external Waterloo venue website.
2:20
Move from beer discovery into a shared quiz, answer feedback and standings, then explore the Waterloo venue.
Recorded prototype walkthroughs with illustrative data.
The prototype demonstrates event entry, the full answer cycle, score progression and connection retry. It is an interactive design, so video, live synchronisation between participants and the recommendation service are represented rather than running.
Explore prototype routes
Gallery
10 images
1 / 10
Event entry, one identity, one participation action, and the demo label kept visible.
Project notes
A short set of notes on the material shown in the screens.
- The prototype demonstrates event, answer and recovery states using sample participants and scores.
- Photography in the social views is illustrative content, not research participants or live attendees.
- Public offers and venue details shown are time-sensitive sample content.
- The recording includes a visit to the external Waterloo venue website; that site is not part of this project.
Takeaway & evaluation
Shared participation works when every state of the moment is visible: the answer you picked, the answer you locked, the outcome, and a clear way back when the connection drops.
Outcome metrics not available.
What to measure
Proposed evaluation, not conducted research.
- Can a first-time participant join an event and reach the first question without explanation?
- Do players read selected, locked, correct and incorrect answer states correctly, and can they recover from a dropped connection and rejoin?