Apex: Fantasy Esports Web App, UX/UI Case Study

Role: UX/UI designer, end to end

Client: fantasy esports product, via Upwork

Platform: responsive web app, desktop and mobile

Timeline: about 4 weeks

Tools: Figma

Delivered: sitemap, user flows, wireframes, 20 desktop and 5 mobile screens, 2 landing page layouts, 9 component sets, 3 prototype flows and a developer handoff

Fantasy esports has a lot happening at once: matches, lineup deadlines, budgets and leaderboards. The job was to turn all of that into a product players understand at a glance, from the lobby to locking in a lineup, without burying them in numbers.

I mapped the product before designing it: a sitemap first, then user flows for how players join contests, draft and follow results. For the hardest screen, building a lineup, I explored three wireframe layouts and chose the one that keeps the lineup, the budget and the player list on one screen.

A complete dark UI for desktop and mobile: a lobby that shows what needs attention first, a three-step draft flow, the right player numbers at the moment of picking, and standings that show where you stand and why.

Every screen is built on one system of 9 component sets, with 3 clickable prototype flows to show how it works. The Figma file was prepared for developers with a full handoff, so the team could build it without guessing.

Rated 5.0 on Upwork.

Building a SaaS product or web app? Message me your product, who it's for and your deadline, and I'll reply with how I'd approach it.