University Athletic Association of the Philippines (UAAP) – 2012
The University Athletic Association of the Philippines (UAAP) is one of Metro Manila’s popular youth sports organizations, housing the competing sports teams of 9 exclusive universities in the Philippine capital.
How can the website design promote the diversity of UAAP sports more, while still catering to the fans of the association’s most popular sport – basketball?
As there was an existing UAAP website, I wanted to gauge, from consumers, what else could be improved.
1. Benchmark and diagnose: Consider the range of consumer usage possibilities
You can’t change what you don’t know.
Testing had never been done on the UAAP web design before. The first thing the team did was subject the website to usability testing.
I tested the website with a range of consumer psychographics (from hard-core sports viewers, to uninterested students) within the main target age range of the website.
2. Prototype and wireframe: What are our design hypotheses of how to solve the problem?
After the tests, the design team worked on wireframing and creating design studies of the the home* and category pages, according to the primary objectives of the website.
*To be honest, our team was pretty “green” then, learning the ropes of wireframing and usability testing – which is why we ended up prioritizing the homepage heavily. Why this isn’t always advisable, plus other lessons, in future posts.
3. Test and iterate: Which was a more effective design? For accessing the sections and features that the business would like to highlight.
Research Impact: What design solutions did we come up with?
From the initial tests and interviews about the current website, we found the typical consumer paths (which we compared with the analytics results), expectations or pain points (e.g. Why don’t the university links in the navigation bar lead to consolidated university updates?).
Navigation and Content Planning: Schools and Sports
For college sports, there were two expected routes of content discovery: the school route and the sport route.
We wanted to highlight the school route by creating more hard-working university landing pages, with links to rosters, consolidated results, awards and updates.
We prioritized school navigation points in the design elements and content hierarchy, since the driver for following the games (for majority of students) was school affiliation, rather than sport fandom.
I worked hand-in-hand with our back-end development team to work out the best structure of organizing the content, so that
– the strategy team could relay this to Clients, and
– the design team can double-check if this is consistent to their design and navigation elements.
To make the school and sport pages work, we also needed to orient the editorial team about the content needed to power these pages after we built the site.
Design Patterns: Thumbnail lists for easier viewing
Typically, a grid does fine for visual content (video screengrabs, photos), but because of the similarity of the videos (e.g. basketball game after basketball game), users became more reliant on text descriptions of the videos.
We chose to use thumbnail lists over grids, which were made for skimming information in just one direction.
Auditing Scoreboard Designs
Sports websites are very data-heavy platforms. And I don’t even mean because of pictures or video, but because of a constantly updating stream of numbers during the season.
To have real-time updates for UAAP fans, the design needed to have an easily findable, easily understandable updating scoreboard and schedule calendar.
We looked at design patterns from various international sports website scoreboards, and looked at whether the pattern could be adapted to the local needs and how (i.e. What would we use for the different sports – from volleyball, to chess?).
In its first year after launch, traffic doubled from the previous year — not because of an aesthetic design change — but also improvements in the content, information structure, scheduling and back-end improvements.
Content from this UAAP website now feeds into the broader sports brand of the TV Network ABS-CBN, ABS-CBN Sports.