Overview

SmartGames is a US-based platform that combines gaming with brand engagement. Businesses can build a custom or template game, place coupons and ads inside it, target where those run, and track redemption, all from a single admin panel.

The product was conceptually rich and operationally dense. My job was to make the surface feel simple even though the underlying model was anything but.

The Challenge

Two distinct audiences

Business owners building games and ads needed a guided, low-friction wizard. Admins managing live campaigns needed a dense, scannable dashboard. Same product, two opposite UX requirements.

What Customers Actually Needed

Design Work

Structure first.

Before any visual design, I mapped the platform as wireframes. The home, billing, and FAQ flows revealed which screens needed density and which needed breathing room.

Smart Games home wireframe
Low-fidelity wireframe: admin home with metrics and quick actions.
Smart Games billing wireframe
Low-fidelity wireframe: plans, payments, and invoices.
Smart Games FAQ wireframe
Low-fidelity wireframe: FAQ and tutorials inline.

Admin dashboard

The admin dashboard surfaces three top-line metrics: current plan, coupons redeemed, patron reach, at the very top, then twelve quick actions arranged in a grid. Cards instead of nav. Icons + labels. The "Coming soon" badge on Game Maker manages expectations transparently.

Smart Games admin dashboard high-fidelity
High-fidelity admin dashboard.
Smart Games coupon screens
Coupon management screen.

FAQ & tutorial system

Help shouldn't take you out of the product. The FAQ and tutorial system lives inside the surface, with progressive disclosure for longer answers and a search field anchored to the top.

Smart Games FAQ high-fidelity
High-fidelity FAQ with embedded video tutorials.

My approach

1. Build a design system, then screens, then polish.

Design system as the foundation. Colour, type, spacing, and components built first. With a system in place, the platform could grow without each new screen looking like it came from a different team.

2. Wireframe everything before pixels

Density and hierarchy were the hard problems. Wireframes let me solve them without being seduced by visual polish.

3. Help in the surface, not behind it

Tutorials, FAQs, and tooltips live alongside the product, not in a separate help centre. First time users could discover features without leaving what they were doing.

What I Learned

Help is part of the product, not separate from it

The decision to integrate tutorials inline rather than build a separate help centre was both a design and a product strategy decision. PMs should own this call.

Cross-timezone async forces clarity

The team was distributed across the US and Nigeria. Async documentation became the primary mode of collaboration. Clear writing was the most important skill on the team.