Product Design Case Study - MCOC Scout Strategy Tool

MCOC Scout: One Lookup Instead of Five Tabs — MCOC Scout

Independent Product: Champion Database and Match-Prep Tool, Designed and Built Solo

A free strategy tool built around one question players ask hundreds of times: who beats this champion?

Marvel Contest of Champions players prep fights with information scattered across wikis, forum threads, spreadsheets, videos, and alliance chats. The lookup often happens mid-session, on a phone, with real in-game resources on the line.

I designed and built MCOC Scout to collapse that research into one search-first product: champion cards, filters, counters, abilities, immunities, relics, stat focus, and 7-star availability in one place. The result is a live, free tool with a maintenance model small enough for one person to keep moving.

Impact: 300+; champions organized into a searchable matchup tool
Role: Product designer and builder
Tools: Figma, Claude Code, Code, React, Supabase, Cloudflare Pages, Notion
Team: One person across research, UX, UI, front-end build, and live data upkeep

MCOC Scout live champion database showing the full searchable roster of 300+ champions with the filter sidebar.

01Problem

Product context

One lookup for a mid-fight question.

Players do not open MCOC Scout to browse. They arrive with a fight in mind and a specific question: who handles this champion, this node, this immunity check?

Before the tool existed, that answer meant jumping between a wiki, a forum thread, a video, a spreadsheet, and alliance chat. The design problem was never "make more content." It was making the answer findable while the game was still open.

Fast

The core answer had to land in seconds, not after five tabs.

Explainable

A recommendation only helps when the player can see why it works.

Maintainable

Every field has to earn its upkeep in a tool one person runs.

MCOC Scout live champion database landing with search, class shortcuts, filters, and champion cards. — MCOC Scout today: every champion and the matchup data that matters, in one place instead of five tabs.

MCOC Scout champion detail drawer open over the champion grid, showing abilities, immunities, tags, stat focus, relics, good-against, and countered-by data. — One champion drawer holds the abilities, immunities, tags, relics, and counters that used to live across five separate sources.

02Lookup flow

Core interaction

Search first. Explain second.

The main flow stays short: search the defender, scan viable counters, then open a champion only when the player wants the reason behind the pick.

Search

Start from a champion name, a counter need, an immunity, a class, or a rarity.

Scan

Cards surface matchup-relevant data before any click.

Act

Open a champion to see the abilities, immunities, and counters behind the pick.

MCOC Scout search field open with a dropdown suggesting abilities, immunities, and keywords as the player types. — Type a need and the search suggests abilities, immunities, and keywords as you go.

MCOC Scout search reading natural player language, with immunity suggestions surfacing as the player types. — Search reads in player language: ask for "poison immune" and the champions who are come back.

03Process

From sketch to build

A paper wireframe became a component system I could ship.

The layout started as a low-fidelity wireframe, then moved into Figma as a small set of components: the champion card, the filter drawer, the chip groups, and the detail drawer. Designing the system and building the front end in the same hands kept the distance between mockup and product short.

Low-fidelity wireframe of MCOC Scout with filters on the left, a champion grid on the right, and search across the top. — Early wireframe: filters on the left, champion grid on the right, search across the top.

Figma working file for MCOC Scout showing the champion card, filter drawer, chip groups, detail drawer, and a desktop layout overview. — The Figma working file maps every component, from cards to the detail drawer, straight onto the live build.

04Design choices

UX decisions

Designed around player language, not database taxonomy.

Match the way players ask.

Players ask practical questions: who beats Korg, who is poison immune, which 7-stars can handle this fight. The interface keeps those paths visible instead of burying them in a hierarchy.

Make trust visible.

A counter only helps when the player understands why it works. Abilities, immunities, tags, relics, and matchup context stay next to the recommendation.

Keep the data model maintainable.

Champion profiles are the atomic unit. Filters expose the fields players reach for instead of hiding them inside long notes.

MCOC Scout filter sidebar expanded to show the full set of immunity filters beside the champion grid. — The immunity filters mirror the in-game checks players run before committing to a fight.

MCOC Scout list view showing champions as dense rows with abilities, immunities, and tags. — A list view trades art for density when players want to compare champions fast.

05Counter Finder

Matchup tool

A dedicated screen for the matchup question.

The Counter Finder gives the matchup question its own screen. Search a defender and it ranks the best counters, then spells out why each one works: the abilities, immunities, and relics that decide the fight.

MCOC Scout Counter Finder showing a defender search and ranked counter picks, each with a short note on why it works. — Search a defender and the Counter Finder returns ranked picks, each with a short note on why it works.

MCOC Scout Counter Finder with a champion detail drawer open, showing the abilities, immunities, and relics behind a counter recommendation. — Open any counter to check the abilities, immunities, and relics behind the recommendation.

06Mobile

Primary context

Built for the phone in your hand mid-fight.

The lookup usually happens during play, on a phone, with in-game resources on the line. Filtering had to work in one thumb-reach without losing the champion grid behind it.

Three iPhone screens of MCOC Scout showing the champion card grid, the list view, and a filtered result set. — On mobile the grid, list, and filtered views keep the same scanning logic as desktop.

Three iPhone screens of the MCOC Scout filter drawer with match mode, immunity, auto-block, rarity, and sort controls. — The filter drawer brings immunity, auto-block counters, rarity, and sort into one sheet.

Three iPhone screens of MCOC Scout showing active filter chips, a search with results, and a champion detail page. — Active filter chips, search, and the champion detail page all hold up at phone width.

07Outcome

Impact and next

Live, free, and small enough for one person to keep running.

MCOC Scout went from a side project to a maintained product. It is live and free, and it organizes 300+ champions into a search that answers the matchup question first, then lets deeper exploration follow.

The next work sits on the data side: keeping champion profiles accurate as new champions launch and existing ones get reworked.

MCOC Scout champion grid narrowed by active filter chips for class and immunity. — The live product in use: 300+ champions, narrowed in a few taps to the ones that fit the fight.

Visit MCOC Scout