EventHub,a plataforma de Live Opsthe Live Ops platform
Três jogos, três Game Designers, três Product Managers e um jeito de criar eventos que passava por código, planilha e duas ferramentas diferentes. O projeto se tornou uma ferramenta unificando todas essas etapas.Three games, three Game Designers, three Product Managers and a way of creating events that went through code, spreadsheets and two different tools. The project became a single tool unifying all those steps.
Meu papelMy role
Product Design UX ResearchProduct Design UX Research
Definição de visual: cores, fontesVisual definition: colours, fonts
Interface e protótipo V1Interface and prototype V1
05
TestarTest
Fase de testeTest phase
AlteraçõesChanges
HandoffHandoff
Validação e acompanhamentoValidation and follow-up
roadmaproadmap
Uma grande entrega em 4 mesesOne big delivery in 4 months
De setembro a fevereiro, com a documentação do processo entrando junto do handoff, não depois.From September to February, with the process documentation landing alongside the handoff, not after it.
Seis pessoas, dois contextos de dor.Six people, two contexts of pain.
Conversei com os 3 Game Designers e os 3 Product Managers dos três produtos. Mesmo problema, expectativas opostas: quem cria o evento quer parar de escrever JSON; quem responde pelo número quer parar de depender de dev.I talked to the 3 Game Designers and the 3 Product Managers behind the three products. Same problem, opposite expectations: whoever builds the event wants to stop writing JSON; whoever answers for the numbers wants to stop depending on a developer.
Game Designers
3 pessoas · quem monta o evento3 people · they build the event
dorespains
Edita evento por JSON, com códigos específicos que precisa decorarEdits events through JSON, with specific codes they have to memorise
Meses numerados de 0 a 11 — fácil de errar, e errar quebra o eventoMonths numbered 0 to 11 — easy to get wrong, and getting it wrong breaks the event
Alterações podem passar por duas ferramentas diferentes, intranet e FirebaseChanges may go through two different tools, the intranet and Firebase
Pouco visual no processo: revisão é feita relendo código em sites validadoresBarely visual process: review means re-reading code in validator websites
ganhos esperadosexpected gains
Um ambiente de teste para pré-visualizar as escolhas antes de subirA test environment to preview choices before shipping them
Escolher o período do evento num calendário, não num campo numéricoPick the event period on a calendar, not in a number field
Opções pré-definidas para escolher, em vez de digitar o códigoPredefined options to choose from instead of typing the code
Avisos de erro mais claros e uma ferramenta que centralize as configuraçõesClearer error warnings, and one tool that centralises the settings
Product Managers
3 pessoas · quem responde pelo número3 people · they answer for the numbers
dorespains
Sente que a empresa usa várias ferramentas que não se conectamFeels the company runs on several tools that don't talk to each other
Precisa fazer a mesma alteração em dois lugares ao mesmo tempoHas to make the same change in two places at once
Demora para tirar um analítico e para implementar qualquer coisaSlow to pull an analytics report, slow to ship anything
Nas ferramentas internas, nunca conversam com outro usuário final além do GDOn internal tools, nobody ever talks to any end user other than the GD
ganhos esperadosexpected gains
Uma ferramenta independente de dev e independente de outras ferramentasA tool that depends on no developer and on no other tool
Fazer alterações nos jogos de forma mais ágil, sem filaChange things in the games faster, without a queue
Dados analíticos no mesmo lugar em que o evento é criadoAnalytics in the same place where the event is created
Comunicação constante com PM, considerando que também será usuário finalConstant communication with PMs, since they're end users too
competitive auditcompetitive audit
Benchmark com nove ferramentas de Live OpsA benchmark across nine Live Ops tools
A pergunta era se valia construir a ferramenta. A tabela respondeu: gerenciamento e segmentação de jogador o mercado resolve bem, mas pré-visualização de evento, calendário e edição de assets de evento quase ninguém entrega. Foi ali que o produto se justificou.The question was whether building the tool was worth it. The table answered: the market handles player management and segmentation well, but event preview, event calendar and event asset editing are almost nowhere to be found. That's where the product justified itself.
Condições/Jornadas (ações, reações e regras)Conditions/Journeys (actions, reactions and rules)
✓
✓
–
✓
~
–
–
✓
✓
Análise de dadosData analytics
✓
✓
✓
✓
–
✓
–
–
✓
Testes A/BA/B testing
✓
✓
✓
✓
–
✓
~
✓
✓
Economia do jogoGame economy
?
✓
✓
~
✓
–
?
~
–
Gerenciamento de inventárioInventory management
?
✓
✓
–
✓
–
?
?
–
AtualizaçõesLive updates
✓
✓
–
✓
–
~
?
?
–
Push notificationPush notification
✓
✓
✓
✓
–
–
✓
✓
✓
Acompanhamento de erros e falhasError and crash tracking
~
?
–
–
–
✓
✓
–
✓
Criação e edição de eventosEvent creation and editing
~
?
✓
–
–
–
~
✓
–
Calendário de eventosEvent calendar
–
–
✓
–
–
–
~
✓
–
Upload e Edição de assets (de eventos)Asset upload and editing (events)
–
?
–
–
✓
–
–
✓
–
Pré-visualização do eventoEvent preview
–
–
–
–
–
–
–
~
–
Suporte multiplayer (leaderboard, torneios)Multiplayer support (leaderboards, tournaments)
–
✓
✓
–
~
–
✓
–
–
HospedagemHosting
✓
✓
✓
–
?
–
✓
✓
?
Levantamento de 2024 — pode estar desatualizado hoje.Surveyed in 2024 — may be out of date today.
definir · featuresdefine · features
Definição das principais features.Defining the main features.
Com as dores mapeadas e o benchmark na mão, foi o momento de definir as principais features da ferramenta e organizá-las por prioridade: o que é pré-requisito de acesso, o que é a solução central e o que existe para alimentar o evento.With the pains mapped and the benchmark in hand, it was time to define the platform's main features and order them by priority: what is an access prerequisite, what is the core solution, and what exists to feed the event.
01 · pré-requisitoprerequisite
Access
Poder acessar a plataforma e ver só o que a minha hierarquia permite.Being able to access the platform and see only what my hierarchy allows.
Fazer registroSign upFazer loginLog inAdministrador: gerenciar usuários e acessosAdmin: manage users and accessAcessar e editar o próprio perfilAccess and edit my own profileVer a plataforma conforme a minha hierarquiaSee the platform according to my hierarchy
02 · o coraçãothe heart
Core solution
Gerenciamento de Live Events. Se essa camada falha, a plataforma não tem motivo para existir.Live Events management. If this layer fails, the platform has no reason to exist.
Criar e editar eventosCreate and edit eventsPré-visualizar a UI do evento na criaçãoPreview the event UI while creating itPré-visualizar o JSON do eventoPreview the event JSONSer alertado sobre erro ou conflitoBe alerted about an error or conflictNotification in app sobre eventosIn-app notifications about eventsEvent Preview (alerta pré-evento)Event Preview (pre-event alert)Sistema de lojaStore systemSuporte multiplayer: torneios, leaderboardMultiplayer support: tournaments, leaderboardVer um calendário de eventosSee an event calendarAcompanhar a performance do eventoTrack the event's performance
Criar e gerenciar segmentação de jogadorCreate and manage player segmentationCriar condições e jornadas para segmentaçõesCreate conditions and journeys for segmentsGerenciar perfil de jogadoresManage player profilesGerenciar inventárioManage inventory
Ferramentas gerais de LiveOpsGeneral LiveOps tools
Dashboard com análise de dadosDashboard with data analysisExperimentos e Teste A/BExperiments and A/B testsCriar, editar e enviar push notificationCreate, edit and send push notificationsGerenciar a economia do jogoManage the game economy
priorizaçãoprioritisation
Impacto × esforçoImpact × effort
A matriz definiu o MVP.The matrix defined the MVP.
alto impacto · pouco esforçohigh impact · low effort
Fazer agoraDo it now
Criar e editar eventosCreate and edit eventsTemplate básico de eventoBasic event templateCalendário de eventosEvent calendarSegmentação de jogadorPlayer segmentationSubir assetsUpload assetsRecursos, customizáveis e colecionáveisResources, customisables and collectibles
alto impacto · alto esforçohigh impact · high effort
Planejar para fazerPlan to do
Template complexo de evento (jornada real)Complex event template (real journey)Sistema de lojaStore systemEvent PreviewEvent PreviewNotification in app sobre eventosIn-app notifications about eventsSuporte multiplayerMultiplayer supportExperimentos e Teste A/BExperiments and A/B tests
baixo impacto · baixo esforçolow impact · low effort
Fazer quando derDo it if there's room
View de lista de usuários, vinda da intranetUser list view, coming from the intranet
baixo impacto · alto esforçolow impact · high effort
Não fazerDon't do
Pré-visualizar o JSON na criação do eventoPreview the JSON while creating the event
O JSON era exatamente o que a plataforma vinha para esconder. Manter o preview dele seria manter o problema à vista.The JSON file was exactly what the platform came to hide. Keeping its preview would keep the problem in sight.
idearideate
Card sortingCard sorting
Aplicamos uma dinâmica de card sorting individual com os três GDs. A dinâmica tinha duas etapas: a primeira de features gerais e a segunda especificamente de criação de evento. Cada um organizou do seu jeito, mas as três respostas convergiram em Eventos, Conteúdos e Jogadores. Essa convergência nos ajudou a mapear a estrutura do que viria a ser o site.We ran an individual card sorting session with the three GDs. It had two rounds: the first on general features, the second specifically on event creation. Each of them organised it their own way, but all three answers converged on Events, Content and Players. That convergence helped us map the structure of what would become the tool.
tipo abertoopen sort3 participantes3 participants21 cards21 cards2 rodadas2 rounds
Game Designer 1cinco grupos, do conteúdo às infos internasfive groups, from content to internal info
Eventos5
Calendário de eventosCriar e editar eventosCriar e gerenciar o "Event Preview"Criar e gerenciar notification in app sobre eventosOverview de estatísticas dos eventos
Jogadores4
Poder gerenciar inventário do jogadorGerenciar perfil de jogadoresCriar e gerenciar segmentação de jogadorCriar condições e jornadas para segmentações de jogadores
Conteúdo12
Subir novos assetsCriar um leaderboardOverview dos leaderboardsCriar novos colecionáveisVer/editar colecionáveis existentesOverview de estatísticas de colecionáveisCriar novos recursos/currencyVer/editar recursos/currency existentesOverview de estatísticas de recursos/currencyCriar novos customizáveisVer/editar customizáveis existentesOverview de estatísticas de customizáveis
Infos da plataforma2
Visualizar lista de usuários internos e suas funçõesVisualizar histórico de edições
Teste A/B2
Poder realizar experimentos e Teste A/BVisualizar testes A/B feitos anteriormente
Game Designer 2agrupou pelo que a plataforma gerencia, não pela telagrouped by what the platform manages, not by screen
Criação de eventos6
Criar e gerenciar segmentação de jogadorPode realizar experimentos e Teste A/BCriar condições e jornadas para segmentações de jogadoresEscolher período(s) de início e fim do eventoEscolher segmentação de jogadores que terá esse eventoCriar e gerenciar o "Event Preview"
Gerenciamento de jogador6
Poder gerenciar "inventário" de customizáveis/colecionáveisGerenciamento de carteiraVerificação de recursos (coins, scrolls, candies etc)Verificação de posição e pontuação em leaderboardVerificação de progressão em featureVerificação de pontuação e progressão em Saga Map
Gerenciamento da plataforma3
Visualizar lista de usuários e suas funções/permissõesVisualizador: pode apenas visualizar as configuraçõesEditor: pode editar as configurações
Game Designer 3separou progressão e o que é interno do timesplit progression and what is internal to the team
Eventos6
Criar e editar eventosCriar condições e jornadas para segmentações de jogadoresCriar e gerenciar o "Event Preview"Calendário de eventosPode realizar experimentos e Teste A/BCriar e gerenciar notification in app sobre eventos
Perfil/inventário3
Poder gerenciar inventário do jogadorGerenciar perfil de jogadoresCriar e gerenciar segmentação de jogador
Visualizar lista de usuários e suas funçõesDefinir permissões de cada perfil de usuário
Os nomes dos grupos e dos cards estão como cada participante escreveu.Group and card names are kept exactly as each participant wrote them, in Portuguese.
namingnaming
O time escolheu o nome.The team picked the name.
Uma dinâmica de brainstorming de naming com todo o time, votação aberta.A naming brainstorm with the whole team and an open vote.
O board da dinâmica, com as sugestões e os votos.The workshop board, with suggestions and votes.
nome definidochosen nameEventHub
sitemap mvpmvp sitemap
A estrutura da ferramentaThe tool's structure
O jogo é escolhido no login e filtra tudo o que vem depois.The game is picked at login and filters everything after it.
Homepage
Jogo 1Jogo 2Jogo 3Game 3
Acesso à ferramenta, filtrado pelo jogoTool access, filtered by game
Engajamento
EventosVer eventos cadastradosVer detalhes de um eventoEditar eventos cadastradosCriar novo eventoEscolher entre os templates
RankingsVer leaderboards cadastradosVer detalhes de um leaderboardEditar leaderboardsCriar novo leaderboard
LojasVer lojas cadastradasCriar uma ofertaAdicionar item ou bundleDefinir período da oferta
Notificações no appVer notificações cadastradasEditar notificaçõesCriar nova notificação
Conteúdo
AssetsVer lista de assetsEditar um assetCriar um novo assetEscolher ou criar categoria
MoedasVer lista de currenciesEditar uma currencyCriar uma nova currencyDefinir sistema e tempo de reset
CustomizáveisVer lista de customizáveisEditar um customizávelCriar um novo customizável
ColecionáveisVer lista de colecionáveisEditar um colecionávelCriar um novo colecionável
Jogadores
Segmentação de jogadoresVer segmentações criadasVer detalhes de uma segmentação
Experimentos
Teste A/BVer lista de testes no arVer resultados de um testeEditar ou tirar do arCriar um novo teste A/B
Perfil
Minha contaVer perfil
Lista de usuáriosVer lista de usuários
prototipar e testarprototype and test
Wireframe e teste de usabilidadeWireframe and Usability Test
Criei um protótipo em wireframe para validar a estrutura do sitemap em testes de usabilidade com os 3 Game Designers.I built a wireframe prototype to validate the sitemap structure through usability tests with the 3 Game Designers.
Calendário de eventos, criação em etapas, detalhe de leaderboard e cadastro de conteúdo.Event calendar, step-by-step creation, leaderboard detail and content registration.
research card
hipóteses · acreditamos quehypotheses · we believe that
O fluxo principal faz sentido e atende as necessidades dos usuários finaisThe main flow makes sense and meets the end users' needs
Os textos, títulos e instruções podem não estar clarosThe copy, titles and instructions may not be clear
Talvez a criação de evento não atenda contextos além do BuracoEvent creation may not fit contexts beyond Buraco
teste · para verificar, iremostest · to check, we will
Conduzir testes de usabilidade com os GDs em formato de lista de tarefasRun usability tests with the GDs in a task-list format
Apresentar para os PMs para colher insights de melhoriaPresent it to the PMs to collect improvement insights
métrica · e medirmetric · and measure
Se completam as tarefas sem dor de cabeça, se entendem as telas, se os textos fazem sentido e se as features cobrem o que precisam hoje e adiantam o amanhã.Whether they finish the tasks without headaches, understand the screens, find the copy meaningful, and whether the features cover today and get ahead of tomorrow.
critério · estaremos certos secriterion · we'll be right if
O teste indicar os quatro pontos acima, ou se as melhorias necessárias não forem grandes.The test points to all four items above, or the required improvements turn out to be small.
research planning
informações geraisgeneral information
conduçãomoderatorFernanda Netto
acompanhamentoobserverViviane Mesquita
participantesparticipants3 Game Designers
métodomethodTeste de usabilidade com protótipo, em lista de tarefasUsability test with prototype, task-list format
ferramentatoolFigma
roteiro · lista de tarefasscript · task list
Abra os links e se situe no protótipoOpen the links and get your bearings in the prototype
Adicione um asset na plataformaAdd an asset to the platform
Agora uma currencyNow a currency
Se tivesse que criar uma notification in app, onde seria?If you had to create an in-app notification, where would it be?
Adicione 2 itens em uma loja já existenteAdd 2 items to an existing store
Crie um small eventCreate a small event
learning card
Com os insights e aprendizados recolhidos no teste, seguimos para a versão final das telas.With the insights and learnings gathered in the test, we moved on to the final version of the screens.
entrega finalfinal delivery
Um novo design systemA new design system
Ferramenta interna, um dev na frente: partir de um tema Bootstrap (o Craft) foi decisão de projeto, não atalho. Construí o design system a partir dele, com botões, inputs, labels, paginação, etc. para que cada tela entregue já existisse em componente.Internal tool, one developer on it: starting from a Bootstrap theme (Craft) was a design decision, not a shortcut. I built the design system on top of it, with buttons, inputs, labels, pagination, etc. so that every screen I handed off already existed as a component.
Tema Bootstrap escolhido como base. Theme preview montado para ver comportamento e interação antes de desenhar tela.The Bootstrap theme chosen as the base. A theme preview was assembled to check behaviour and interaction before drawing any screen.
Documentação e Handoff
Grandes entregas em quatro meses, com a documentação do processo no Confluence entrando junto do handoff.Big deliveries in four months, with the process documentation on Confluence landing alongside the handoff.
Protótipo navegávelNavigable prototype in Figma
Onde antes eram duas ferramentas e um JSON escrito à mão, o evento passa a nascer, ser revisado e publicado com a nova ferramenta criada no Figma.Where there used to be two tools and a hand-written JSON, the event is now born, reviewed and published in the new tool designed in Figma.
theme previewtheme preview
Os componentes do design system, montados antes de desenhar qualquer tela.The design system components, assembled before drawing a single screen.
botão primárioprimary button
botão secundáriosecondary button
outros botõesother buttons
inputsinputs
labelslabels
paginaçãopagination
formuláriosforms
resultado final · telasfinal result · screens
EventHub
Criação de evento em sete etapas, calendário com os tipos de evento por cor, detalhe de evento publicado com progressão e recompensas, cadastro de item com preview. O protótipo mostra hover, estados, animações de loading e o processo de criação de evento inteiro.Event creation in seven steps, a calendar colour-coded by event type, published-event detail with progression and rewards, item registration with preview. The prototype shows hover, states, loading animations and the entire process of creating and publishing an event..
Home de eventos: calendário do mês com os tipos por cor, próximos eventos na coluna e legenda.Events home: monthly calendar colour-coded by type, upcoming events in the side column and a key.
Edição de progressão com o aviso de cancelamento, protegendo o que já foi configurado.Editing progression with the cancel warning, protecting what has already been set up.
Criar evento, etapa 2: regras e balanceamento, com preview do que o jogador vê.Create event, step 2: rules and balance, with a preview of what the player sees.
Criar evento, etapa 4: interface, FTUE e escolha de assets e background.Create event, step 4: interface, FTUE and the choice of assets and background.
Cadastro de item: categoria, asset e comportamento do item, com preview ao lado.Item registration: category, asset and item behaviour, with a preview alongside.
Lista de todos os eventos, com tipo, status de publicação e status de agenda.All events list, with type, publishing status and scheduling status.
Para ver o fluxo completo, acesse o protótipo navegável.To see the complete flow, open the interactive prototype.
