Back to projects
mobile app - UX/UI REdesign

Blablafoot

Blablafoot is an application that allows anyone to participate into debates and talks around subjects related to Football.

CASE STUDY

4 min read

a 3d iphone mockup of a Blablafoot app screen

I. Context & Problem statement

General informations

Back in march 2019, Blablafoot was my first project as a freelancer. I had the opportunity to work with Studiolabs, a digital studio that entrusted me to be the Lead UI Designer of the project.

image showing a soccer ball on a soccer field

The company

Blablafoot is an application allowing everyone to debate around subjects related to football. User can register to participate to a debate as a commentator or just as an auditor. For each debate, there is also a referee, just like in a football game. His role is to make sure that every commentators follow the rules and moves discussion forward. He also has to make replacements between titulars commentators and alternates. The referee can also sanction players by giving yellow or red cards if needed.

The brief

Blablafoot already have a functionning app, but they wanted to redesign it. The goal was to give a more modern and pleasant image for the product. Indeed, the old UI was fuzzy and confusing which frustrates the user. The layout was unclear and could lead to errors, some colors were misused and reflected some wrong messages for the users, there was also a lack of consistency for the components and for the screens structure.

The challenges

For this project, It was necessary to completely rethink the UI and the UX of the application. We had to make sure that the information architecture, the navigation and the wording were clear and efficient for the user. In addition to this, we had to build a design system from scratch to ensure a real consistency in all the product. Our main concern was also to keep the user’s experience simple and intuitive in order to allow them to easily interact and take part in debates.

II. Solution

Functional Analysis & Wireframes

When i arrived in the project, some work has already been made. The product manager created a functional analysis to have a concrete view of the different features of the produt. Of course, some of them were already in the old version of the application. But new features were needed particularly to improve the experience of the referee during a debate. Some revisons on the other flows has also been made to enhance the global experience.

This functional analysis bring out some user stories which allows the rest of the team to create the wireframes. As i was not involved in the project at that time, i couldn’t take part of that step. But when i joined it, it was super easy for me to understand the work made thanks to the functional analysis and wireframes.

grpahic showing the functional analysis process for the Blablafoot project
Graphic showing how the functional analysis is used to define the wireframes we have to design for the product.

Here is a selection of wireframes created for the project :

image showing some wireframes designed for the Blablafoot app

Graphic charter & UI Explorations

Once the wireframes were validated, we had to focus on the visual aspect of Blablafoot. Our first interrogation was to determine if a revision of the graphic charter was needed. To answer this question, i create 4 masters screens of the app, to give the client a vision of the appearance of the final product. 2 screens with his actual graphic charter and 2 with the charter that i imagined. This process allows the client to have a concrete idea of what his product would look like if we decided to go with one or the other graphic charter.

old graphic charter of blablafoot
Original graphic charter of Blablafoot
new graphic charter of blablafoot
NEW graphic charter created for Blablafoot

Wireframes screens used for the exploration :

  • Homepage Screen
  • Live debate Screen
wireframe of the blablafoot project
wireframe of the blablafoot project

Exploration n°1

Using the orignal graphic charter of Blablafoot

ui screen of blablafoot app showing a design exploration with the old graphic charter
ui screen of blablafoot app showing a design exploration with the old graphic charter

Exploration n°2

Using the new graphic charter imagined for Blablafoot

ui screen of blablafoot app showing a design exploration with the new graphic charter
ui screen of blablafoot app showing a design exploration with the new graphic charter

After we present those explorations to the client, we unanimously decided to go with the new graphic charter (Exploration N°2). Personally, i think that’s a good choice because it brings a more modern and trendy image to the application. In addition, it really contrasts with the old graphic charter. For us, that is an opportunity to give a breath of fresh air to the application.

Design System

For the UI Design part, i worked with an other designer. To ensure the coherence and the efficiency of our interfaces, we worked with a design system that i settled for the project. It was a big first for me ! I never had the opportunity to create a design system that could be used by other designers before.
The design system evolved all along the project by having a lot of exchanges and iterations between me, the other designer and the product manager to ensure the aesthetic and the efficiency of the app. During all the process we also have to keep in mind that the design system will also be very useful for the development team. So, our components should take in consideration the technical feasibility to make the developers's work  easier.

image showing some components of the design system made for Blablafoot
preview of some of the design system's components

UI Design

Now that we had our design system and the general guidelines, we started designing the interfaces. As a Lead Designer, my role was to make sure that the screens created were viusally appealing and coherent together. Each time we had to create a new complex component (cards, widgets etc…) i also had to ensure he was coherent with the rest of the UI, and if so, integrate it into the design system.

Here is a selection of ui screens before and after the redesign :

Homepage

old ui screen of blablafoot app showing the home page of the app
Before
ui screen of blablafoot app showing the home page of the app
After

Live Debate

old ui screen of blablafoot app showing the conduct of a debate
Before
ui screen of blablafoot app showing the conduct of a debate
After

Columnists management for the referee

old ui screen of blablafoot app showing the commentators management for the referee
Before
ui screen of blablafoot app showing the commentators management for the referee
After

User profile

old ui screen of blablafoot app showing the user's profile management
Before
ui screen of blablafoot app showing the user's profile management
After

Countdown before the beginning of a debate

old ui screen of blablafoot app showing the countdown before the beginning of a debate
Before
ui screen of blablafoot app showing the countdown before the beginning of a debate
After

Entry question when registering for a debate

old ui screen of blablafoot app showing a modal to register for a debate
Before
ui screen of blablafoot app showing a modal to register for a debate
After

Design -> Development

Once all the stories were created and validated by the product manager, i had to regroup them all into a single file to create the prototype of the product. This prototype allows the client to have a concrete view of the product before the development. After the validation by the client, the final mission for me was to prepare the screens and the components for the development team.To do it, i used Zeplin, an awesome tool that allows designers and developers to collaborate easily. At this point, stories were also important, I classified each screen in one of them to make sure every action determined during the functional analysis was possible. I also integrate the Design System on Zeplin by exporting the screens, components, color palette and text styles.

graphic showing process between design and development stages during blablafoot project

III. Synthesis

Next steps

The application Blablafoot is now available on iOs (4,9/5⭐️) and Android(5/5⭐). Based on the users returns and comments, we’re continuously working with the Blablafoot team to improve the application and integrate new features (as i’m writing this, our next point is to implement the possibility for the user to propose his own Debate topics) !

Learnings

Blablafoot was my first big project as a freelancer. It allows me to work inside a team and to understand the point of view of each stakeholder (Client, Product manager, Development Team, Users). With this project, i made some huge progress in terms of Interface Design mainly on coherence and also with the development side that i wasn’t take into consideration into my creative process. I also had the possibility to create my first design system which brings me a lot in terms of reflection and organization for my future projects.

Huge thanks to Studiolabs and Blablafoot for their trust !
&
Thanks for reading 👍
Interesting in having Blablafoot ?

Next projects

mobile app - back-office

iZclean

A mobile app allowing users to have their vehicles washed anywhere, at anytime.

a 3d iphone mockup of a iZclean app screen
mobile app - back-office

Molitor

Allowing the guests of the famous parisian hotel to manage their entire stay with a mobile app.

a 3d iphone mockup of a Molitor app screen