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.
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.
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.
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.
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.
Here is a selection of wireframes created for the project :
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.
Using the orignal graphic charter of Blablafoot
Using the new graphic charter imagined for Blablafoot
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.
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.
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.
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.
