GOAT
product / web

Goat is a service for improving your gaming skills. I created a user interface that makes it easy to learn through curated courses, challenges, and community feedback.

My Role
Product Design
User Experience

Product Strategy Jackson Latka
Development Barbershop Labs

Getting started

Goat is a web app where gamers improve their skills through tailored courses, challenges, and feedback. Goat uses sources like the Blizzard API to track progress — giving players insight into how they are doing compared to the rest of the playerbase.

Goat needed a user interface and help mapping out the user experience for the beta launch, which would focus primarily on Overwatch.

Foundation

I grew up playing Super Mario and Banjo-Kazooie, but wanted to start by getting a better feel for this gaming universe. Twitch streams and Overwatch lore seemed like a good place to start.

While we wireframed and iterated on the structure, I began honing in on a library of styles based on the dark themes and bright content colors I’d found in game replays.

The typography uses two font families: Rift — a tall and condensed family for things like stats and titles, and Usual — a workhorse for the primary messaging. Finally, I customized an icon set, based on Symbolicons.

This system was created using the Ether library as a base

Structure

Goat’s primary focus is to get gamers on specific learning tracks based on hero or skill — similar to the way you’d move through a Treehouse class. We call these Courses, and they contain groups of video lessons that can be upvoted or downvoted by the community.

I used Invision Freehand (and pencil + paper) to work through how the dashboard, Course tracks, and video threads should behave. After several feedback rounds, I iterated in Sketch, syncing everything to a prototype where we could discuss further and make revisions.

Supporting other learning styles

Tailored course aren’t for everyone. We added Gamesense to serve as a knowledgebase on discrete topics, Challenges for players to build mechanics during gameplay, and VOD Reviews to give and receive feedback on your own videos. A final section, Achievements, allows you to earn points for hitting milestones during gameplay.

In the app, I organized these within a side nav so they’re easy to discover. A global search offers a quick way to fuzzy-search within all sections at once.

Keep everything flexy

Throughout the wireframing, design and handoff process it was important that we make something easy to build and maintain.

The Goat design system is a set of flexible components — it’s systematic and succinct to avoid chaos, but there’s room to breathe if (when) exceptions come up.

Overwatch images courtesy of Blizzard Games

To sign up for the beta, check out goat.gg︎

Product Strategy Jackson Latka
Development Barbershop Labs