Web Design Case Study

Union Basketball Company Website

Designing a company website for bookings, a blog, and company information.



Project Lead
UX Researcher
UI Designer
UX Writer
Website Builder


10 weeks
July - September 2021




2 Designers:
- Alba Zhou
- Ginah Han

Client (business owners)

About the Company

Building Community,
Inspiring Growth

Union Basketball is a new full-service basketball facility located in Richmond, BC. The company provides professional level facilities that are accessible to players of all levels.

Services include a basketball league, bookable workout and game play facilities, and casual drop-in play.

Research Findings & Problem Space

The user research at the start of this project was very minimal. The company did not have any current users to interview because it was new and so we relied on a reddit survey and approaching people within our own networks.

Players are seeking

  • Play for fun, exercise, and competition
  • Want to sign up for teams with similar skill and intensity levels
  • Want to see game/practice schedules, locations, pricing

Ethnograpic and autoenthographic interviews, Reddit survey

  • Most basketball leagues have been inaccessible to non-elite players and individual players who do not yet have a team.
  • Costs to book courts are high and it’s almost impossible to book courts for amatuer  teams
  • Website needed for the company to streamline information about the company and make bookings, scheduling, and updates all available in one easy location


  • Create a simple and accessible website for players and organizers to view, schedule, and register for basketball related activities
  • Design clear paths to access the blog, facility booking, and drop-in registration
  • Present the company as modern, accessible, and professional



  • Accessible and easy to use
  • Staff team that will be maintaining the website have little to no web management experience; they need something easy update with strong error prevention


  • Web builder needs to be affordable and collaboration friendly
  • Amilia integration has many design limitations.
  • Must be responsive on both desktop, tablet, and mobile


  • User ages range from 25 to 65 so designs must be very clear
  • Varying basketball level skills (some brand new, some long-term players, some very advanced, some very novice)


We created two proto-personas to focus our design. Due to the time-restricted nature of the project and how new the business was, we were unable to conduct and direct research on their typical users.


The site map was designed for the user to need the fewest clicks possible in order to get to their destination.

Target users are busy and are unlikely to have strong skills with technology so the most direct route is ideal.

Sketches to Frames

Click through the tabs below to toggle your view.

Paper Sketches

These sketches were presented to my client as an overview of the direction I was hoping to move.

I created paper sketches for desktop screens based on my research on websites in the same industry.


I created two options for styles that I could show my clients to sample which direction we could move.

One direction was more modern with rounded lines and overlapping images. The other option was more traditional with boxed sections.

My clients preferred the more traditional option for its familiarity and "crisp" feeling.

This method was necessary due to a very fast turnaround, as the business was already up and running.

HiFi Frames

My clients did not have experience with the design process. For this reason, I presented high fidelity frames rather than low fidelity to avoid confusion about what the final product would actually look like.

Facility Rental
Contact Us
About Us
Error 404

Published Site

After connecting the domain, setting up google analytics, and completing a website management demonstration for the staff team, the project was finally complete.

The site was published and ready for use at the beginning of September 2021 to very positive feedback.

View the Live Site

Updates After Publishing

  • Problem: customers desire to know more information about the pricing before booking.
    Solution: added a "rates" page.
  • Problem: all customers must complete a digital waiver prior to playing (high traffic problem).
    Solution: added a link in the nav bar
  • Problem: the business insurance requires a statement about business policy but it's a low traffic page that adds clutter to the navigation.
    Solution: added a page for the policy and linked it in the footer.
  • Problem: staff have to answer the same questions many times.
    Solution: create a FAQ page categorized with questions with a drop down menu to keep the page condensed.