A handy app to find basket ball courts

Vancouver, British Columbia, CANADA (July 2017)

Project: Mobile App Design
Role: User Experience (UX) Design, User Interface (UI) Design, Branding

The Opportunity

The idea for this app came to me after spending some time with my new friend. B is new to town and will be here for few months. Currently his housing situation is of a co-op status that a friend recommended. Living with strangers he just met, the lack of privacy concerns B. It can be quite stressful at times and he doesn’t want to stay confined to his bedroom.

B keeps an active lifestyle and is passionate about basketball. He understands that he can relieve stress from current housing situation by getting some exercise—in the form of playing basketball.

Since B is only here for few months, he decided to not purchase a vehicle but rather rely on mass transit for transportation needs. He would like to find a court close by, where ever he may be, that is also accessible by transit.

The Solution

Create an iOS mobile app, that can provide B the opportunity to find basket ball courts that are close by and accessible by public transit so he can play basketball and maybe make new friends.

Project Goals

  • Create a low-fidelity iOS mobile app
  • Make finding basketball courts easier
  • Provide transit information for easy access


Pen, pencil, paper, sticky note: Interviews, story board, wireframes & low-fi paper prototype
Axure RP: User flow
Trello: Feature Prioritization using the “bucket method”
Sketch: Persona, Competitive & Comparative Analysis
MarvelApp: Mobile prototype
Photoshop CC: Image manipulation, screen/product mockups
Illustrator CC: Logo
PowerPoint: Final presentation

User Research

Guided by the user-centric approach, to gain more insight into user behavior and learn more about B’s motivations, pain points and frustrations, I met with him several times. Sometimes they were just quick calls/text messages and other times, we sat down for a coffee/lunch and had more in-depth conversations. This process allowed me the opportunity to empathize with my user and make sure my design was impactful.

Domain Research

B was familiar with one app that he used to find courts. But wasn’t finding updated and missing information. From conducting domain research, I learned that there was another app in the market. The second one, iSport, also provided court information for other sports besides basket ball.

Competitive & Comparative Analysis

Courts of the World is what B is currently familiar with and iSport is a competitor in beta mode.

Clearly, it can be seen that neither of those exactly lets B solve his problem. Gathering feedback from user-testing allowed Blacktop to prioritize which features, allow B to have a better experience.

BlackTop — Competitive & Comparative Analysis
BlackTop — Competitive & Comparative Analysis

Feature Prioritization

After the interview/discovery phase and competitive/comparative analysis, I compiled features to satisfy my user’s goal and prioritized them into 3 categories (must haves, nice to haves and not needed) using the Bucket Method.

Then I asked my user to edit it (on Trello board) according to what he felt was important. The image shows before I presented and after user input.

Feature Prioritization using the bucket method.
Feature Prioritization using the bucket method.

Primary Persona

Since the goal of this app is to solve my friend’s problem, the obvious primary persona would fit the model of a single male in his late 20’s, seeking to find basketball courts close by to pick up a game or two, to relieve stress, have fun and meet new like-minded people.

BlackTop — Primary Persona
BlackTop — Primary Persona

Information Architecture

Once I got to learn about my user’s needs, I set out to plan design. I started off with a user flow to meet the MVP and as well as created a structure of the app to see where all the elements lived.

User Flow

I mapped out a possible user flow for B to complete certain tasks to test the functionality and goals of the Minimum Viable Product (MVP).

B is capable of searching for basketball courts where the results are shown on a map, by proximity to B’s location (if location services turned on). B can then find detailed view of each court (such as days/nights available, times the court is open, etc.) and if it can be accessed via public transit.

From the flow, it can be seen that B is able to rate the app if he liked it, as well as share it with other basketball players, if he enjoyed the experience.

BlackTop — User Flow

Site Map

To get a visual representation of the layout of the mobile app, I created a site map. I organized the structure based on key features I identified were important for my target user, B—based on research.

BlackTop — Site Map
BlackTop — Site Map

User Story

As someone who is new to the city, I want to learn more about local basketball courts to make new friends and pick up a game or two.


“B is on #99 Express headed to school for the day. He is new in town, don’t know many people, don’t own a vehicle but likes to pickup a game of basketball. He needs to find basketball courts that are accessible via public transit, so he can play ball and meet new people.”

Story Board

I created a story board to set B in a scene to help tell the story better.

BlackTop — Storyboard
BlackTop — Storyboard

Design v1.0 (Low-fidelity, Paper Wireframes)

My design started off with sketching wireframes on paper, based on the user flow and the sitemap. Learning about my user’s goals, frustrations and pain points allowed me to heavily rely on the research phase to support my design decisions.

Low-Fidelity, paper wireframes showing some of the screens.
Low-Fidelity, paper wireframes showing some of the screens.

Prototype & Testing v1.0 (low-fi, paper)

Once I had the basic template, I designed the rest of the screens. I then used MarvelApp to create the prototype so I can test it for functionality.

User-Testing Tasks

I kept my tasks simple to see if the design was functional:

• I had my testers search for basketball court close by their current location.
• Find hours for a court that is close by school so you can stop after class one day.
• Asked how they would go about finding which bus can take them there.

Feedbacks (User-testing in person)

Some of the key findings from this low-fidelity, paper prototype test:

• 100% of the users were able to fulfill the task of finding a court close by.
• Only one user was able to find a court close by school, as that feature hidden.

User testing was crucial in recognizing flaws in the user flow as well as missing paths for the user to complete their tasks. Having the users talk out loud during the test, allowed more insight which in turn helped fine tune the smaller kinks.

Design v2.0 (Low-fidelity, Paper Wireframes)

I took the feedback I received after testing it with two colleagues and B himself. I learned some very good insight into my design that could clearly result in a better experience, and conducted another round of iteration in low-fidelity level.

Updated Low-Fidelity, paper wireframes showing improvements from user-testing.
Updated Low-Fidelity, paper wireframes showing improvements from user-testing.

View the fully functioning, interactive prototype in low-fidelity state.

(Created with MarvelApp)

———Thank you!———

Let’s Work Together

Just say hi or let me know how I can help tell your stories.
error: Content is protected !!