Face It

— worked together during 2015-2017

Competitive Gaming Platform

  • Mobile App

Work Type

Product Strategy

UX Design

UI Design

Full project overview

Work Type

Product Strategy

UX Design

UI Design

Background

In 2015, when FaceIT and Pixelmatters started working together, FaceIT was already a big name on the eSports scene, with millions of users using their platform on a daily basis. Now, it is even bigger!

Pixelmatters was hired to do all UX and UI of FaceIT iOS and Android Apps, that unfortunately were not released to the public. Still, here's a sneak peek of what was done.

FACEIT Dashboard
Same screen, a contextualized experience. First: Website on Desktop. Second: iOS App.

The Basics

FaceIT is a huge platform, with lots of screens and flows. So, the first task to start the project was the creation of a navigation map.

This allowed us to have a high-level view over the whole the platform, therefore getting visibility to translate the Desktop experience into a Mobile one.

FACEIT flow pages

Creating the Skeleton

After the navigation map was done and approved, we went on to actually starting to create the structure and hierarchy of elements of each screen, putting together some hi-fi Wireframes, that were then used as a basis for the UI.

FACEIT draft examples

Making it Beautiful

With the Wireframes for pretty much all screens in place, it was time to start building the UI.

The Look and Feel created was bold, sporty, refreshing, adapted to the Mobile environment, but keeping in mind FaceIT brand guidelines, as it was an already established and well-known brand.

FACEIT player overview

Impactful

We just had so much fun doing this project! The idea was to try to combine FaceIT look and feel with the games' imagery. A match made in heaven!

FACEIT featured games ELO

Unique but Flexible

The same foundation that was created for the iOS App was then used to create Android designs. Some adjustments were necessary given both platforms intrinsic differences, but the core of it was kept.

FACEIT android iOS

Design System

Based on the scale of the platform, it was essential to have a design system in place, in order to keep consistency and speed up the process, not only in terms of design but also development, with a full component-based approach.

FACEIT components

Modular Consistency

The scale of the project enabled us to generate a wide range of components which then allowed us to create new screens with ease.

FACEIT leaderboards results