Community Hoops

A mobile basketball league app that gives players a chance to compete in recreational tournaments.

Role

UX/UI Designer

Duration

4 months

Tools

Figma, Miro, Microsoft Teams

Team

Project Manager (1x), Mobile Developer (1x), and me!

Overview

A client project in the agricultural tech (AgTech) industry

During 2021, I was a product designer for a small agency called Iron Forge Development. One of the projects I worked on involved designing a minimum viable product (MVP) of a basketball league experience for a sports client. My responsibilities ranged from creating an information architecture and visual design to producing high-fidelity designs and prototypes. Although I was the sole designer in this project, I did work closely with my project manager and a designated mobile developer.

Design Process

On a macro level, my process for this project looked like the following:

Understanding project goals and requirements with the client.
Creating an extensive information architecture.
Establishing an art direction.
Creating high-fidelity designs and interactive prototypes.
Iterating based on client feedback.
Handing off final designs to my mobile developer.

The business Opportunity

How might we create a platform that gives players a "shot" at achieving their professional basketball dreams?

Proposed solution

Introducing Community Hoops: a self-serving, mobile application

Goal: to help bring more professional opportunities to aspiring, young basketball players alike.
About $100K in cash prizes would be offered to those who compete in tournaments and win.
Target audience mainly consists of post-high school and college players, male and female.

High-fidelity wireframes of CBL HoopCity

Information Architecture

Designing with two user types in mind: player and team owner

Having a better understanding of the business goals and needs for this product, I began by creating an information architecture which helped me outline the screens and specific features requested by the client.

Mid-fi Designs

Going through multiple iterations based on client feedback

Next, I moved on to the wireframes starting out with the "home" screen and working my way through the rest of the app. Here are a couple design iterations I made for certain key screens and components.

Moving notifications to a second navigation

Originally, this was meant to be a part of the main navigation.
However, because the client wanted the news feed to be one of the main screens, I decided to move it to a secondary navigation menu that houses mostly resource-related content.

Implementing client's brand throughout designs was crucial

In version 1, I experimented with placing it in the background. This was immediately scrapped as their brand needed to be more visible and clear for users.
In version 2, I tried moving the logo to the left and have the other elements stacked below it. However, the client didn't love the logo's placement and so this design was also scrapped.
This time around, I used a different logo and positioned it to the center which can be seen in version 3.

Art direction

Utilizing an existing design system with a few custom assets

For this project, I was only allowed to use Google's material design library due to development constraints (with the exception of creating a few custom components such as the cards and buttons shown below). In addition, the client already had a pre-existing color palette for me to use throughout the designs which saved some time in having to experiment with different colors.

Final UI Designs

Breaking down Community Hoop's key flows and features

Feature #1

Join team request

As a player, you can find a specific team near you and request to be drafted. A team owner would then approve your request to join their team. While requesting a draft, you can view a small summary of the team including the full roster and a list of previous games played.

Feature #2

Draft players

As a team owner, you can recruit players to join your team. Players would then review your draft request. While drafting a player, you can view that player's summary containing important traits such as their height, weight, and position.

Feature #3

Schedule games

In addition to drafting players, team owners can request a match against
other teams by searching for them in the leagues page. From there, the
ability to message that team in the app is unlocked.

Feature #4

Messages

Communicating with other teams to discuss upcoming game plans and details is important in the game scheduling process. Team owners can access their messages by tapping the chat icon on the top-right part of the screen.

Results + Impact

So how did the product turn out?

After receiving client feedback on my final designs, I handed them off to a mobile developer and initiated the development process. Even though usability testing was not a part of my agency's design process, I still wanted to reflect on the measurable impact that my designs could have on both the users and the client's business. That said, here are a few quantitative metrics that I would look for:

User Satisfaction

How pleasing it was for players and team owners to use the product

Number of Drafted Players

How many players are getting drafted to compete in tournaments

Subscription Count

How many players and team owners signed up and paid for the platform

Revenue

How much did business raise after a certain amount of months

Challenges + Reflections

What I learned, and what I'd do differently?

Overall, I’m very proud of the work I've done! Designing a product for a real client from start to finish was truly a fun and memorable experience, and I've definitely grown a lot since then. That said, here are some of the biggest takeaways from working on this project:

Be prepared to go through multiple design iterations. This is especially true when working with clients. When starting out, I would become easily attached and protective of my designs, thinking they were already "perfect" (whatever that means). However, later on, I learned the importance of listening to others and accepting design feedback from my senior designer/mentor, traits which are crucial to being a good designer.
Design processes vary within each company. There's always a possibility that designers won't go through the entire UX design process for a project due to time and budget constraints. In my case, this meant not being able to conduct user research and perform usability tests in order to fully understand our users and validate my designs. That said, I realized later on the importance of adopting a user-centric mindset, something I hope to apply in future design projects.
What the client says, goes. This piggybacks on the first point. Regardless of what one thinks, a designer must be able to listen to client feedback and adjust accordingly to produce the most appropriate outcome possible.
Asking for help and collaboration are encouraged. Being the only designer on this project was daunting initially, especially since I was very new to my design team and their process at the time. However, that trepidation went away as soon as I began working with my wonderful project manager and mobile developer who made this process a lot smoother and more manageable for me. Also, I cannot forget my amazing design mentor for offering me guidance when necessary.