Face It

— worked together during 2015-2017
Competitive Gaming Platform
- Mobile App
Work Type
Product Strategy
UX Design
UI Design


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.

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.

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.

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.

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!

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.

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.

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.
