LineUp — Team Sports App

Ironhack UX/UI Bootcamp

Joao Campos
Nov 4 · 8 min read

For my last project at Ironhack Berlin UX/UI Bootcamp I’ve chosen to focus on people playing team sports. More specifically, what kind of blockers or problems do they face. This was a two-week project where students were expected to develop an end-to-end project by implementing all that’s been learned throughout the Bootcamp.

1. Why team sports?

In the past, my group of friends and I used to play indoor football every Saturday and we had a WhatsApp group to organize it. Despite the fixed date, we would always struggle with one or two things: having enough players to play 5-a-side or find a pitch that was available at the time which was more convenient for us.

Although I moved to another country, I’m still part of this group and I still see my friends struggling with the same problem week after week. This got me wondering if we were the only ones and it sparked my interest in working towards a solution.

On the other hand, now that I’m settled in Berlin, I haven’t been able to keep playing football as my social group of friends is not interested in team sports.

2. UX Research:

I knew that being so close to the topic and my user could work both as an advantage and against me. It was important to let go of my assumptions while conducting my research and really being open to listen and empathize with the people that I reached out to.

2.1. User Surveys and Interviews:

With over 40 survey respondents and many personal interviews I was able to gather a lot of quantitative and qualitative information.

Below are some quotes taken from the User Interviews:

“I’ve stopped being the organizer or taking part in it just so that I don’t go through all that trouble.”

“I know I need to start planning the games far in advance and recruiting people to avoid stressing out very last minute looking for the missing players.”

“I don’t find so many options for a female team (also I don’t know where to look).”

“I’m new in town, I don’t have friends to play with.”

2.2. Affinity Diagram

Creating an Affinity Diagram has helped me clustering all the gathered information into groups and also to structure and organize my ideas.

2.3. Define the problem to target

My research has shown that the problems my friends and I face are common to many others. In short, the main blockers can be listed as follows:

  1. Finding a booking a venue that’s available;

Although my research validated my assumptions, I still didn’t have clarity on which topic to pursue: finding a place to play or finding/organizing a group of people to play with. I knew I couldn’t explore both of them in a two-week span so I had to get back to my users once again.

Through a second shorter survey, I got the answer I was looking for. For my users, the hardest part to handle is finding People (70%).

2.4. User Persona

Having covered the previous steps enabled me to have a clear understanding of the problem, the frustrations and goals of my users. My primary and secondary Personas originated from a combination of these factors.

2.5. User Journey & User Stories:

Creating a User Journey for Chris that represented the actual steps he goes through when organizing a game was essential to empathize with him and also identify possible high-level touchpoints for my solution. Below we can see a possible scenario of Chris’ current journey when organizing a game with his friends.

For Matt, no User Journey was developed. In his situation, he doesn’t even begin to organize a match or look for players, he doesn’t know where to start. For Matt, I’ve created a User Story to describe what he wants to accomplish.

As an expat that moved to a new city I want to join sports games that are taking place near me so that I can play my favourite sports and connect with people.

3. Benchmark Analysis

If most of the users I interviewed are facing the same problem, it was certain that others have already tried to solve it and also come up with their own proposed solutions. I had to get informed, learn more about them and, most importantly, understand why they were never brought up in my surveys and interviews (i.e. why people don’t seem to be using them).

This benchmark analysis would also help me set my solution apart from what’s already out there, both visually and in terms of the value proposition.

I’ve come across an immense number of Apps and tried to evaluate each one and identify any trends or similarities:

  • Excessive features that turn the product into Feature creeps (i.e. the product becomes complicated and difficult to use);

Also, I gave it a try to look at these Apps under the Usability Heuristics for User Interface Design defined by Jakob Nielsen. In my opinion, there’s room for improvement in some of these broad rules set by Nielsen. For example (#4) Consistency and standards; (#6) Recognizing rather than recall; and (#8) Aesthetic and minimalist design.

4. Information Architecture (IA)

Every website and mobile app wants to be as simple and easy to navigate as possible, there’s simply no point in aiming for the opposite. However, it’s much easier said than done and, for this project, this is where I’ve struggled, tested and iterated the most.

Through open and closed card sorting (and iterating) I’ve sorted and grouped the information and defined the Taxonomy in order to set the naming convention and vocabulary to be used.

In green, one can see “create new game” and “book a pitch” as these would be pivotal sections of my app to entice users to generate opportunities for others to play. The more games created the more value this app brings to its users.

5. Branding & visual elements

As mentioned before, my solution had to stand out from its competitors. To achieve this, I needed a strong Brand Personality and to develop a UI that matched its attributes and tone.

5.1 Logo design and Brand Attributes

The word sports is immediately connotated with movement, adrenaline and being dynamic, energetic and bold. When we take it further into team sports, then we imagine pushing our limits, challenging our opponents and winning over them.

All of these terms and feelings are very powerful. LineUp brand attributes are a direct result of these associations: Daring & Energetic, but never Ordinary.

5.2 Moodboard

My moodboard goes in the same direction as my attributes. One thing that fascinated me and is present in every single team sport were the lines. They define the boundaries and different sections of the fields/pitches. They’re very visible, geometrical, and with sharp edges and would inevitably influence my visual direction.

5.3 Style Tile:

My style tile derives from that feeling of power and movement. With a bold typeface, dark background and white text and electric green elements for high contrast.

For better usability of the app, I’ve considered different Form field states, defined how error messages would look like (yellow), primary/secondary buttons that are very wide for impact and a progress bar that shows a different color and shape (bolder) as you advance.

6. Hi-fi Wireframes & Interactive Prototype

After determining the visual elements and structure of my LineUp’s mobile app, I’ve created all the screens which are part of the happy flow I imagined for my Persona — Chris. Below are some of the screens I created. In them, we can see the elements present in the style tile coming together.

LineUp and all the screens I created came to life with the help of principle, where I could already define the animations and micro-interactions, turning this prototype into an experience that really translates the real feel of actually using the App.

This flow consists of creating an account, exploring the app and creating a game that he can then share with his friends on WhatsApp and that other LineUp members can also join.

In this happy flow, one can also easily picture the happy path for my other persona, Matt, as he just has to create a profile and join any game near him.

7. Learnings and Next steps

7.1 Next steps

This was a case study developed academically. If LineUp was a real product, the next step would be to pair up with local pitches and venues and provide an online booking experience (commission-based). This could be the business model or one could ideate on paid accounts for users.

7.2 Learnings

I’ve touched upon a topic that has way more variables and complexity that I could have expected. To reach my final concept and MVP I had to stay as close as possible to the problem my research pointed as the most pressing one and a Design Principle that inspires me: Direction over choice”.

Many screens had to be dropped due to time constraints but also to keep LineUp as a fully functional but simple and intuitive product. With no over the top features or settings such as skill rating, rankings, gender differentiation, public/private options, etc. LineUp can be used by anyone who wants to play team sports.


That’s all folks! These two weeks were intense but so much fun at the same time. A perfect ending to nine long weeks of learning and becoming a UX/UI Designer!

Thank you for reading and clap if you like it. Cheers! ❤

Now, go out and play!

Important Notes: This project was developed with the purpose of exposing research results and solution proposal for a specific problem. For development and implementation, the icons should be developed from scratch for greater consistency.

Joao Campos

Written by

UX/UI Designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade