Kaptain 11 — UI/UX Case Study

After working a few months in a gaming startup I got an offer to give my hands to this product. Though I have worked on only a few screens so let’s see How I solved the problem for the given use cases.

About the Product

Kaptain11 is a fantasy sports app where users can play Cricket, Football, Basketball and kabaddi by building their dream teams. Kaptain11's mission is to provide a smooth, hassle-free gaming experience to all fantasy sports lovers with exciting features such as multiple sports options, live scores, tournaments, daily quizzes, and huge cash rewards.

Overview

So, I have to build only two screens for this product.

1. Home Screen which needs a few minor changes.
2. New feature- for selecting Captain and Vice Captain for multiple teams.

I did collaborate with a lot of other people for this project.

1. Product Managers: To understand the whole scope of the project and its requirements.
2. Senior Designer and stakeholders: To get timely feedback on my designs and the design direction.
3. Engineers: To ensure that the final output matched the design exactly.

Let’s talk about the Use Cases

1. Home Screen

Stories on the Home Screen

So our company wants to showcase our other features on the home screen.

Like- bonuses, polls, Information ( Which contains news, related to cricket), Scratch Cards, Referral Programs, and many more which come in the future.

So the problem arises here I have to show the maximum features on the home screen. For this, our team discussed and decided to replace the advertisement banner with the stories. This idea or inspiration has come from social media apps like Instagram, Snapchat, and Messenger.

It fits around 4 features at one time or to show other options it will be horizontal scrolling.

2. Captain and Vice Captain Selection

Use Cases-

1. Multiple teams should be visible on one screen.

2. Each player shows all details like Player Picture, Rolls, Points, Teams, and

Selection Percentage.

3. We can directly able to remove or replace the player.

4. Able to compare one team with another team.

I tried two solutions for this.

Solution 1

Captain and Vice Captain Selection Sol 1

In this solution, I tried to show the teams in vertical form although the solution was good for profile details and the rest of things.

But where is the problem arises?

1. The problem with this solution is we can’t able to compare all 11 players who are playing. We have to horizontally scroll the players which take more effort.
2. The selection percentage is not individual for both captain and vice-captain.

Solution 2

Final Design Solution

So for comparing all 11 players I use a vertical lineup of players and horizontal scrolling for the team. We can compare two teams at once which we needed.

And here the selection percentage is also individual.

After Selection

And… That’s a wrap!

I hope you guys found this case study useful and informative. Please drop your valuable feedback.