Optimizing User Experience with School Pride in Mind

UAAP Season 78 Opening Ceremony

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.

The Bottom-line

The most typical primary business objective for maintaining and managing the website is, of course, ROI.  For a sports website, the product strategy, to achieve this, is to cater to more sports fans, and provide advertisers with more placement options.

The Challenge

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?

NU-FEU basketball game Record attendance
Image via blog From the Tube

The Approach

 Process

As there was an existing UAAP website, I wanted to gauge, from consumers, what else could be improved.

UAAP User Experience Design process
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.
Testing Paper Prototypes
Testing Paper Prototypes

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.

Paper Prototype Testing Sample Slide
Paper Prototype Testing Sample Slide

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?).

Content Feed Design Patterns Audit
Content Feed Design Patterns Audit

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.

Leave a Reply

Your email address will not be published. Required fields are marked *