Matching Players with Challengers

Designing a onboarding flow for a new sports matchmaking startup

The problem
Who solved it
How I did it

A sports training and matchmaking startup needs someone to design their onboarding flow and screens for a mobile-based app with an emphasis on badminton players.

I was the only designer on this 1-week project but I collaborated with the primary stakeholders and engineers based in the SF Bay area and in India.

It was a one-week design sprint.
 

Tools that I used were:

  • InVision

  • Sketch

  • Adobe Illustrator

  • Google Suite

  • Zoom

 

Methods that I used were:

  • Competitive and comparative analysis 

  • Wireframes

  • Prototypes

  • And more

Ready to play but no time
 

I had a time constraint which wouldn't allow me to be able to work on this project for more than a week. This led me to use existing and well know design heuristics because I knew I would be setting the groundwork for the designers that were to follow.

Comparing the competitors 

I started with what my clients were able to tell me about there primary user group, where they are going to first launch, and the basic designs they were able to come up with. My own research included a couple of things but I got the most from the comparative and competitive analysis. I reviewed several sports apps but got the most from Reclub.

Reclub
Reclub Inspiration

I adopted how Reclub used the mobile affordance of swiping to allow the user to gain more information about the app and what the app can do for them. This was appealing because the app that I was designing is meant to be more than a sports matchmaking app, it was also meant to help people to train and get better at those sports. 

With my clients initially focusing on Badminton, they wanted to flush out the design focusing on badminton players but have the app be able to grow and scale to include other sports.

Designing starts here 

With this being such a short design sprint I went from low fidelity to mid-level fidelity very quickly but it was a very iterative process with daily client presentations.

Original Concept
New Concept
These screens would be reached by swiping through the first couple of Info screens explaining how the app works and how it will help you to become a better player. While keeping the ability to sign in using Google or Facebook is similar most of the rest is different.
 

Key differences:

  • Instead of reaching this point and then having to click sign up I went with the assumption that they were interested in signing up and put the input fields on this screen

  • Also, I went with keeping the login consistent throughout the onboarding process 

Skill Splash Screen
Reward Splash Screen
The above screens are an example of where I took inspiration from Reclub. Here on these screens, you can see the dots that signify different screens that the user will go through to create an account for the first time and on these screens the user will gain information on how the app will help the users to become better players. If the user already has an account and knows how the app functions the user is also given the opportunity to bypass the informative screens by logging in using the link on the bottom of the screen.
The final deliverables
  • Mid to high fidelity mockups of all account opening screens

  • My design notes to the next designer

  • Clickable prototype

 
Thinking back

  • Would have liked more time on this project, I'm happy with where I got but would have like to see where I could have gone.

  • My research gave me a fairly solid understanding of what people expect to see it when using a sports app.

What I learned

 

  • That working with engineers adds to the overall well-roundedness of your designs. 

  • Better time management skills. 

Thinking to the future

  • Design iterations based on user testing insights

  • Extensive user testing

© 2018 CJ Zarback | UX/UI Designer - Prototyper - Gamer

Reclub Inspiration