Club Manager WebApp

A complete redesign of a Sport Management App for FECAM, a Spanish NGO for sports championships within the Special Olympics.

Overview

FECAM is a 25 years old instiution that promotes the integration of mental disabilities through sport. They are honor members of the Special Olympics International and the organized national championships in Spain for 8 sports every year. FECAM grants more than 1800 licenses for athletes, coaches, and delegates every year and its championships are followed in realtime by sportsmen and spectators every weekend.

Problem

In January 2013, FECAM realized its current website is almost inaccessible from mobile devices and its traditional admin panel is based on an old technology multipurpose software that doesn't let them the immediacy.

Figure 1. FECAM's classical sheets before the redesign.

So, at the end of 2015, I helped FECAM redesign their Sport Management Web app. Acting as their Lead UX Designer, we backed their original needs and we defined the guidelines and most of the features that you see to this day.

Research & Analysis

User research focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies. For me, user research is “the process of understanding the impact of design on an audience”.

Identified Roles

Due to FECAM`s project needs, they required different actions from different people. They couldn't afford to spend more time managing an old software where staff couldn't edit their team members or creating championship rounds manually anymore.

SuperAdmin Admin Staff Sport Fans

Superadmin is the role they needed to manage everything and double-check what other colleagues in the NGO were doing in terms of Championship creation and player additions or cancelations.


We limited this role to the general manager in the organization who does not depend on any shareholders but is independent of any circumstantial change.

Admin is the role of the person who will manage the WebApp regularly and who will create the championships.


A sports expert profile who is working inside the Federation and who will assist other staff and players to complete the required actions for championships and registration.

The huge time-saving tool for FECAM.


Now coaches and delegates will be able to add their own athletes to the federation, cancel old ones, and to create teams for each championship and sport.

Those who share the passion, supporting the championships every weekend.


Relatives of athletes and sports fans are the ones who demand the results of each game in real-time in order to know the latest qualifying marks and team matchings for the next round.


Seeing how people relive the most exciting moment of each proof while checking his mobile device is very satisfying.

Figure 2. FECAM's user scenarios.
Personas

With common scenarios in place, we were able to define detailed personas, using their vast data pool. The personas looked something like this:

Person #1 Person #2 Person #3
Name & Job David, FECAM Staff Elena, Club Coach Roberto, Sport fan
Age group 25-34 y.o. 25-34 y.o. 35-44 y.o.
Motivation and benefits of product usage

Fast and simple way to organize a championship with several sports and proofs. Athletes supervision in minutes. Save the time of calling the coaches to ask for athlete submission.

Fast and simple way to apply to a championship with one or more teams of the Club's athletes. Athlete submission to proofs in minutes. Get notifications and alerts if any license is not suitable for the championship.

Save time knowing the schedule of his favorite athletes. Check results in real-time from any device.

Need and context of use

To organize a championship manually would take days and there is no time to waste when you have to do it every week, apart from the hours of communication to every invited club coach. To have a system that offers sports and proofs that can be checked by everyone at the same time is a must.

A quick way to submit your athletes' teams to the digital environment without using those old documents or phone calls.

Going to the sporting event without any updated information is so frustrating! So it is necessary to know, in real-time, when your favorite heroes are participating and what their result was.

Way to product

Tought by the UX Designer of the WebApp.

Promotion via official meeting.

Promotion on the spot and via FECAM social networks.

Digital literacy

High

Middle

Middle-Low

Figure 3. FECAM's personas.

Without a clear understanding of what your product does, what problems it solves, or for whom it solves these problems, ultimately, there’s no need for your product. Our goal was to make sure FECAM's app solved typical online ticketing problems in a clear and simple way.

Wireframing & Prototyping

With the proper planning, we were able to confidently move into creating wireframes for the app. We took the decision to focus more on the functionality and structure of the app, using Balsamiq and opting for low-fidelity wireframes with very little detail. Ultimately, we could add design elements later. What was important for our users was that the product, above all, was clear and simple.

Figure 4. FECAM's low-fi wireframes.
User testing

User testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. We decided to use this technique in our app with these tasks:

  1. Create new Championships.
  2. Submit Clubs and Teams.
  3. Generate double round K.O. Tournaments.
  4. Identify non-eligible players for a proof.
  5. Check real-time results.
Figure 5. User testing results (before & after redesign).

Design

One major change in the Web app, was focusing on the speed with which the association needed to create championships and the speed people demanded to check the results. Our aim was to improve Admin and visitor interaction by understanding more about a Sport Manager’s personal preferences, allowing us to predict and tailor relevant options to every different sport and its features.

Once we created the tools to generate championships and to add sports, the next step was to dive deep into teams, matches and series. This is a complex system of conditions and it differs between players who qualify for the next round and those who are not qualified after the proof.

We also needed to create a simpler, easier, and more structured way to see the sports while the Championship is being celebrated. By categorizing the event by sports and adding search features, we would get the casual visitor to easily identify where the player they want to find is and their competition mark.

Figure 6. FECAM's final UI Design for the public site and Admin Panel.

Results

As a result, we redesigned a Web app for Sport Managers with the same needs they had for years which weren't solved with the original website they bravely designed with their internal department. The Web application they have today is a powerful tool that quickly solves the previous mechanical work. UI testing gave us an idea of how to properly prioritize the structure of the application and provide the most positive user experience for FECAM's staff and users.

We understood the errors of the previous version of the application, which was mostly focused on solving very basic needs. The client understood that the less time you take to correct mistakes, the more time they have to progress and search for their real needs.

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs, US computer engineer & industrialist.

The Special Olympics is going to add more integrated sports in organizations all over the world and we'll have a lot of work to do on the application together with FECAM`s new Clubs and Teams. Stay tuned!

Date December, 2016
Type Web apps, UI Design, UX Design
Share

Contact

Are you working on something great? I would love to help make it happen! Drop me a message and start your project right now! Just do it. I will not spam you with
e-mails or add to MailChimp list.

Email hola@iamperi.com

Find me in Madrid, Spain

Social

done

done

done