Designing for Sports — Areena Product Design Case Study

Sana Yusuf
5 min readSep 15, 2021

Years: 2019–2020
Clients:
Areena Sports

Areena is a digital platform that organises Amateur soccer and basketball leagues for the people of Texas. It’s a mobile app that allows players to sign up to leagues, manage their teams and track their stats.

It all started with…

I received this project with an already established proof of concept. The owner of the platform had designed and developed a basic version of the app using a no-code platform. They needed to scale at this point and our team helped them create a robust foundation to make that happen. This was done through the redesign of the app to onboard more players, and re-develop it with a much more stable technological architecture.

My job was to re-structure the information architecture, rethink the current features, integrate new features that improved player engagement and re-design the UI for the player facing app.

Design Process

To kick things off, I worked with an intern to pull apart all the existing user flows of the product. This deconstructed version gave me a clear understanding of their underlying goals and work towards optimising the flows to help users accomplish the tasks quickly. This, along with countless conversations with the clients and internal brainstorm sessions with the team helped me create a pool of all the possible features for the redesign of the app. These features were then divided into the ones that were of immediate need to get the product up and running, and the features that could potentially be added later on which helped us efficiently plan a roadmap.

Once we had the features locked in, I crafted an information architecture for the new app. After multiple review cycles with the team and the clients, I had a basic structure of the flows using which I could start working on the screens of the app. I created a few wireframes and presented them to the clients — which helped me lay down the UX foundation.

Due to limited amount of time, it was important that we worked in a lean manner. So I quickly started to design the screens of the app with the visuals and the style guide applied. This not only helped us move the project along faster, but also helped the client get a peak into the final version as soon as possible, which opened up the gate to better reviews and feedback.

One thing I had to always keep in mind while designing this app was that the experience of a user extended much beyond the screen. It included the experience of the players in the field itself along with a sense of belonging to a sports community.

Tackled Core Problems

Here are a few key problems that I tackled while redesigning

  • Players did not show up for matches — High rate of absentees led to cancelled matches which created a bad experience for the players that actually showed up for the game. This was improved by displaying upcoming match cards upfront on the home page, with CTAs (Call to Actions) that asked the players to mark their attendance. An alert feature was also added to send a reminder to players before a match. This led to a 36% increase in the attendance of players and a significant decrease in the number of cancelled matched.
  • Increase in player engagement — It was important that the player’s excitement continued after the final whistle, in fact even when they sat around with their buddies later on. This was taken care of by posting the match scores on the app and allowing the players to track their personal stats for each match and view their progress over time.
  • Easily connect Free Agents and teams — Each team had a requirement of minimum players to play in the league, which was becoming an issue if they fell short. At the same time there were Free-Agents who wanted to play but had no teams. This gap was taken care of by providing the Free Agents with the a list of teams that were looking for players, and providing the team captains with a list of available Free Agents to complete their team. This made it much easier for the people to get on the field quickly!
  • Bring the community online — It was important for the players to feel a sense of belonging and stay connected to their team mates— even when they were away from the field. This led me to improve upon the experience of the existing chat feature. I made it cleaner and included a leaderboard feature with various filters applied, that helped the players easily identify their strength and weaknesses and created a healthy sense of competition.

Challenges Faced

  • Since the product already had a customer base, the re-structuring of the architecture had to be done carefully to not confuse the existing players. I kept in mind the core flows of the app, the ones that the players were used to and focused on making them more efficient as opposed to reinventing the wheel.
  • Working with agility and in a lean manner, we worked to understand, design, develop and deliver the app in a span of 6 months.
  • Situated in India, our team worked through the distance from the main user base which was located in Texas. We used the existing statistics of the product to our advantage and had numerous conversations with the clients in order to clearly understand our target users.

If you like this Case Study or have an interesting idea you would like to chat about, get in touch with me on linkedIn! For my other work you can check out my Medium page or head over to my website.

--

--

Sana Yusuf

Digital Product Designer | Helping dreamers craft their MVP and create an online presence | www.sanayusuf.com