Competitive Gaming platform

Mobile App

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.

Same screen, a contextualized experience. First: Website on Desktop. Second: iOS App.
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.

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.

Summing it up

Even though the Apps were not released, we've designed a full, in-depth mobile experience based on a complex Website such as FaceIT. It was a tremendous challenge and one we couldn't have enjoyed the most!