Interface banner
banner bar test smaller radio toxic roles2
overwatch new hero 700

 

Featured Project: Overwatch Esports Stats Dashboard

Role: Lead Interface Designer (Contract)

Client: Akshon Esports (Overwatch League Coverage)

Tools Used: Sketch, Zeplin, InVision, Adobe Creative Suite, WordPress

The Challenge:
Overwatch is a fast-paced, data-heavy esport with millions of players. New users and casual fans often find the depth of game statistics overwhelming. The client needed a "Gamified User Experience" that could translate complex JSON data dumps (match stats, hero usage, player rankings) into a visual, intuitive dashboard that felt native to the game's futuristic aesthetic.

The Solution:
I designed a high-fidelity analytics platform that fused "Moneyball" statistics with video game UI patterns.

Key Deliverables:

  • Visual Data Drudge Technology: Developed a UI system that parses raw data into visual graphs and heatmaps, allowing users to "drudge" through thousands of match stats without cognitive overload.
  • Gamified User Experience (UX): Modeled the interface after the game's own HUD (Heads-Up Display). By using familiar visual cues (health bars for win rates, "ultimate" meters for player impact), I reduced the learning curve for new users while keeping hardcore fans engaged.
  • Persona-Driven Design: Created distinct user flows for "Casual Fans" (who want highlights) vs. "Pro Analysts" (who want raw numbers), ensuring the platform served both audiences effectively without clutter.

Results:

  • Engagement: The gamified design increased session duration by keeping users exploring stats like a mini-game.
  • Adoption: Successfully bridged the gap between casual viewership and hardcore analysis, helping the client capture a wider segment of the Overwatch League audience.
  • Design System: Delivered a reusable component library in Zeplin, allowing the development team to rapidly build out new feature pages consistent with the brand identity.

PROJECT DESIGNS

Font-cover-newlow fidelity compare desktop 2interaction-arhcetecture-designdesktop-stats-compare-interaction-design-fixUser-Personas-4asset-prepranking-stats-light-dark-fix-stats-2overlaye-moderanking-stats-light-dark-fix-3thank-you-1