PROJECT OVERVIEW
SUMMARY
This is the official app of the Romanian Football Federation. The client’s brief was to bring together all RFF’s digital entitites under one roof and to find new ways to engage the Romanian football fan.
This proved to be quite tricky as their ecosystem includes services that are completely different from eachother, from ticket selling to publishing news and articles. Another major challenge was making the app feel more about Romanian football than the Romanian Federation itself, branded content being secondary.
MY ROLE
Research, Product Design, UI, Prototyping, Testing
Part 1 Empathize
USER SURVEYS
We kicked off the project by conducting a user survey that targeted Romanian football fans. Our aim was to learn more about what their football related digital habits are, what apps they use and how they use them.
There were a total of 643 respondents (89% male) to the survey, all above 14 years old. 84% of them were football fans, but there were also a great percentage of professional players, coaches, referees and staff members, among others.
One surprising discovery was that the average daily time spent consuming sports content was > 3 hours for all age categories, fact which confirmed to us that there is plenty of screentime to be grabbed, but also heavy competition.
Part 2 Define
PERSONA
Creating the user persona enabled us to step into our fans shoes in order to see things from their point of view. We developed the persona based on the notes we took from the survey answers. George is the average football fan and National Team supporter.
USER NEEDS
Defining the problem we were trying to solve meant finding sweet spots in how the RFF ecosystem could better respond to the football fan’s goals. The role of the app is to mediate this exchange, providing engaging content to the users and valuable insights to the internal team.
Part 3 Ideate
MVP
Knowing what users enjoy and expect from sports related apps and content, we made a list of all relevant features that could be implemented in the app. Our task now was to decide which of them should be present in the 1.0 version. To do this, we mapped all features based on how easy they are to develop and how much value they bring to the users. Then we checked those that would be prioritized.
USER FLOW
Before moving on to the prototyping phase, we first laid out the entire architecture of the app through a User Flow, marking the decisions a user has to make in various screes of the app. This helped us create the foundation and get a clear picture of how different features relate to eachother, how they would be sorted and clustered.
Part 4 Prototype
WIREFRAMES
After gaining a broad overview of the app, I moved on to sketching the first set of wireframes. This allowed me to try different designs as well as to share a first prototype with the client’s team. The wireframes were tested a couple of times with the internal team, which helped us figure out which features require more visibility and which don’t.
INTERACTIVE PROTOTYPE
This is the final version of the wireframes prototype. Here are some of the changes that we did after testing it with the team.
Separate shopping carts for Merchandise and Tickets.
Option to post gallery of photos was added.
Added Follow button to channels that you are interested in.
Related articles were linked at the end of a news content.
TYPOGRAPHY
Creating the visual universe of the app meant designing a language that would best represent modern football. The criteria when choosing the font was to be easily accessible and to have a minimum of 10 weights. This is how we ended up with Exo 2, a Google Font that looks dynamic and in motion, sparking excitement and boldness.
COLORS
Judging by the sheer size of the app, we needed a color palette that would fit every use case. The rationale behind choosing dark blue was to pick a color from the Romanian flag, but without being too focused on the National Team, which play in yellow jerseys. All colors were hand picked using the HSL color picker technique. For an overall better aesthetic, we opted for a blue toned set of greys, borrowed from the TailWind CSS 2.0 collection.
VISUAL DESIGN
This is the final result of the visual language that we created. I aimed for a clean, minimalistic look that allows photos come forward without making the app seem crowded. The main color is mostly visible in the header, with high contrast so that users always know which screen they are on. All the elements are tied together by soft shadows and careful color selection.
Part 5 Testing
INTERACTIVE PROTOTYPE
This is the visual prototype that resulted from linking all the screens together. The prototype was tested with the internal team along with 10 football fans several times in order to ensure all flows respond to the client’s needs. Some minor changes were brought after testing.
Font sizes increased in some use cases.
Edit Profile input fields were changed to match the SSO.
Shop and Tickets flows were slightly changed to match the API.
Related Menu buttons were clustered.
WRAP-UP
PROJECT LEARNINGS
Finding ways to fit so much features smoothly together was a great challenge and has proven to be a very rewarding learning experience. Having sufficient time on my hands for the design, I had the opportunity to really try out various design approaches, especially in terms of layout and colors.
I also had the chance to learn more in-depth knowledge about API integrations and Data Lakes, which will definitely prove valuable in the future.
NEXT STEPS
The obvious next step is to gain feedback from the users after the official launch in the app stores later this year. I am mostly interested to discover which features get the most attention and if any of them are ignored. I consider it to be very important to constantly monitor user activity in the early stages in order to learn which assumptions work and which not.
Based on what we have learned so far and what we will learn after the launch, I will start working on the second version of the app which should improve the current flows and explore the high-value ideas from the MVP Matrix that haven’t been implemented. Plus designing a Dark Mode.