How to (re)design an app in 2 weeks — a UI/UX Case Study

Our redesigned football matchmaking app

0. Introduction

Over a year ago, our startup Moovle launched its app to the public. Our first MVP functioned well and we received a lot of useful feedback. But we went a little quick and dirty in the development without taking any scalability or design guidelines into account. As a side project, we decided to entirely redesign our app. The people who worked on this were Quinten Verniers, Joris Saenen and myself.

The product

Moovle is a football (or soccer, for our American friends) matchmaking app that helps you find football games, teams & players in your city. Our mission is to connect football players and help them save tons of time in organizing their games. Call it the “Tinder for football”.

(Note: as I publish this article, Moovle does no longer exist. We ceased operations and wanted to show a little ‘behind the scenes’ with this article)

The challenge

Completely redesign the old app in 2 weeks. We worked after-hours of our corporate job.

The process

These were the steps we followed:

1. Research

Start with the problem, not the solution. To fully understand the problems our users were facing, we took a deep dive into all the received feedback, organized the pain points and made user personas.

Pain points of the football experience

I experienced it myself, so I know how frustrating it is to find enough football players for a casual game. To understand the problem even better, I went to parks and football venues and started talking to people playing football. I was quickly added to many Facebook and WhatsApp groups of people fancying a game. Proposals to play quickly ended up in endless conversations like these:

Both the face-to-face conversations and the group chats quickly exposed the following key issues:

• Finding enough football players for a game is frustrating
• People don’t know where nearby football activity is going on
• It is a hassle to find available football venues
• It takes a lot of time to organize and inform attendees
• Facebook and WhatsApp groups are inefficient alternatives and not tailored to football needs

Pain points of the old app

We already had an app to solve the problems above. That app also had its problems:

• Users joined games but didn’t create enough games
• First-time users needed a push to join their first game. Once they played a game via the app, they became recurring users
• We launched during the Cambridge Analytica scandal and our app only offered sign up via Facebook. Many people didn’t want to use Facebook authentication

This is how our old app looked like, before the redesign

Personas

Based on the research, we created user personas. They help to increase empathy and put the entire team in the shoes of the user. This was one of them:

Objectives of the redesign

• Create a frictionless onboarding to activate first-time users
• Improve the game creation experience to increase the supply of games
• Apply a consistent look and feel that is aligned with our image

2. Ideate & sketch

Inspiration board

Instead of trying to reinvent the wheel, we looked at other, non-related apps to get some inspiration. They all did a specific thing extremely well. Either a call-to-action, an animation, design style, conveying a feeling,…

Exploring scenarios

Then we started brainstorming, playing around with ideas and sketching multiple scenarios. You want to consider your options before committing to a final scenario.

Deciding the scenario

Having concrete, visual sketches makes it easier to estimate a feature’s chances of success. We used silent dot voting to decide on our favorites and avoid debate. This is a hard part because you feel like you are letting go of a lot of good ideas. Document those for later.

3. Prototype

After sketching, it’s time for prototyping. We made clickable mockups with the Figma tool (which I highly recommend!). One of the objectives was to apply a consistent look and feel. Therefore, we first made a design style guide or library.

Icon style

Moovle is a social football app, focusing on team spirit and the fun of the game. We are about people, so we needed a joyful image. Flat design gives that informal touch. Monocolor, linear icons keep the design clean. Non-filled icons make the view less heavy.

Icons on Flaticon

Font style

In line with our icon style, we chose a font with soft corners. Dosis is a free Google font that is informal, yet readable. We created a font library to avoid a cacophony of different font sizes and types.

Color palette

Football is passion. Passion is red. To avoid an aggressive tone, we took a soft red and compensated it with a calming blue and grass green as secondary colors. We used black for text, grey for icons and white as a clean background.

Design iterations

Using our top voted sketches as a base, we started creating prototypes. We had 2 internal design feedback sessions to refine the prototype before testing it with users.

Final designs

We redesigned the 3 most crucial user flows: getting the user onboard, letting him search for a football game and giving the option to create a game.

Onboarding flow

• As we saw during our app launch, fewer and fewer people want to sign up for an app via Facebook. Phone number and email signup are on the rise so we needed to offer multiple authentication options.
• Increasing public awareness around privacy and mental health is moving people to disable location access and push notifications for apps. Answering these concerns required a clear call-to-action, providing the necessary context on why we needed to have location access and when we would send notifications.
• We removed the onboarding walkthrough to focus on speed. People are annoyed by walkthroughs and skip them. If your app is straightforward, you also don’t need one

Search game

• The most crucial decision factors to join a game are time and location. These factors needed to stand out from the other data when scanning the list of games
• To push the user to the aha-moment of participating in a fully booked game, he needs to find a suitable game fast. Therefore, we included directly accessible filters (no extra click required) and a map view to easily customize their view
• Nearly fully booked games need to have some extra promotion to avoid disappointment when a game falls short of just 1–2 players. We stressed the scarcity for games with less than 3 spots left
• Virality is crucial for a hyper-local social network like Moovle. So we included a sharing feature

Create game

• People who create games provide the supply side of the app. They will define our app’s success. The challenge was to find the sweet spot between asking enough game information so other people would join, and not overcomplicating the process
• Our objective was that a user could create a game in less than 60 seconds. We limited the number of clicks and the text input
• We used a step-by-step flow instead of a fill-in list to give the feeling of progress and speed
• The flow needed to be personal and conversational, so we asked questions (‘When will this amazing game take place?’) instead of impersonal commands (‘Enter date’)
• Remember that 1 of our 3 objectives was to improve the experience for first-time users? We added a little personalization for these people by addressing them with their first name
• To increase the supply of games, we created an option to let a game automatically recur every week since many people play weekly on a fixed moment

4. User test

Recruiting

According to Jakob Nielsen, you need 5 user tests to get to 85% of your product’s insights. I recruited both existing users from the old app and new people via Facebook groups about football. Both groups fitted the target audience.

Tasks

I started the user test by letting the tester talk about his background, then I proceeded to the following 3 user tasks. I observed the tester’s actions very closely and kept on drilling down on topics until I fully understood the tester’s reasoning.

1. Can you sign up for the app? What signup method do you prefer and why?
2. Can you join a game that you are interested in? What factors make a game interesting for you?
3. Can you create a game? In which situation would you decide to create a game?

I recorded the user tests so my team members could learn as well. This tester agreed to be featured in this article.

5. Conclusion

Learnings from user tests

• The list view and map view with all the games were very well understood. Participants could find a suitable game very efficiently
• Surprisingly, an important decision factor was the number of comments on a game. Comments increased the credibility of the game and showed engagement
• People were overwhelmed by information on the details page of the game
• It was unclear where the entry point was to create a game

Next steps

A next UX refinement should be organized to take up the usability issues and validate the new UX with an extra wave of user tests. We will continue to test and refine iterations until we reach a certain level of saturation. Once we have that, we should start coding.

Final notes

This case study was an excellent mix between product strategy, creativity and actual hustling. I was surprised about how efficient we were. In a matter of 2 weeks, working after-hours, we managed to completely redesign and radically improve our app. Personally, the most fun part for me was the user testing. Meeting with users is so incredibly powerful. It keeps you going to see you’re solving relevant problems in people’s lives!

Thanks for reading!

If you enjoyed this post, then please give it some claps and share it with your friends.

I’m a trilingual product strategist and banking consultant. I’m passionate about consumer startups and the future of banking. Connect with me on LinkedIn.

Our startup failed but if you have the dream of connecting football players yourself, then please contact me. I truly hope someone can fix this problem for those millions of football players out there and I would be more than happy to help.

Special thanks to the authors of the icons and illustrations I used in the designs!