Tennis
Ranking
Tennis Ranking platform was created to help amateur and semi-professional players organize championships and contests. In few years, hundreds of customers were already using the platform, so it was necessary to create an application that had all the functions presented on the platform and more functions because of all the convenience mobiles have to offer. Because there was already an existing platform being used, this allowed us to take time to discover the product and focus on creating solutions and navigations that used established mobile patterns. Below, I present a little bit of the process of building the application.
Tennis Ranking had a web version already with several functions which are now in the application as well, and was already being used by many to manage tournaments and rankings. This made the process of understanding the problem and how this platform was being used a lot easier. We were able to identify players who either participated in Rankings or Tournaments, and players who participated in both. It was important to think of a navigation system that would fit both types of situation.
We also focused on choosing the right elements to show on screen. We asked for users to give their feedback so we could find out what they prioritize and which existing and non-existent features would have more impact on their experience with the app.
Features and a web platform to build on already existed. For this reason, we created user usage streams first. On the app, there are several different types of users and user scenarios. For example, some users only participate in Rankings (a kind of tournament with no beginning or end. They are for users who are just looking to have some fun with friends and monitor their progress). Armed with this information and features, we created several wireframes to test with users, we wanted to know if the navigation we created made sense in the application.
The app has a lot of screens so the purpose here was to focus on navigation and how, initially, everything would fit on the screen. As we already had some ideas concerning flow and visual references, we chose to create the wireframes on the computer. I used the Sketch and the Marvel App to create basic wireframes and we created the connections in the Marvel App. Then, we shared the projects with everyone involved so that they could analyze it and give feedback.
Once we had laid a solid foundation for application navigation, it was time to translate low-fidelity wireframe into a high-fidelity prototype. We put some visual references together, such as other apps, sports websites and other models and started the screens creation process. Usually, for projects like this, I like to create some main screens to define an identity, and once we get to a defined line, I start creating all the other screens to connect them in a single prototype. I used the Sketch and Marvell App for the creation of the screens and for the construction of the prototypes.
The platform already had an identity, but in the Tournaments, the idea was to create a customizable base that could be changed later with themes specific to each Tournament. It was also important to predict the different situations of the matches, with no date set and game already finalized for example, so that when the application was ready, any possible scenario had already been mapped and drawn.
At the end of the process we had an application that met the expectations of our customer and, most importantly, their users. The various navigation tests and reference searches carried out since the very beginning were paramount for building a cohesive app from Registration and Login (which can be done in several ways depending on what the user had access to) to visualization and monitoring of other players’ profiles during tournaments.
Particularly, it was a very fun project to build, I really like the visual identity we achieved after a few attempts. I think services involving more relaxed themes, such as sports, allow me to have more freedom when creating concepts and details in the interface, which is not always the case with more corporate projects. It was a best-of-five match and we won.
