The Project

Executives at the Orange County Register wanted to create a comprehensive Angels baseball micro-site to appeal to hard-core baseball fans. The goal was to “own” their hometown team’s coverage, and generate revenue by selling display advertising and sponsors on the user traffic.

It would contain news articles, podcasts, blogs, player bios and statistics and a view from every seat in Angels Stadium. It ended up being hundreds of distinct web pages deep and updated throughout the day, everyday

My Role

I wore many hats on this project. I served as the UX Designer and Project Manager, and managed a web development team that built the back-end technology and front-end UI templates. 

I met with stakeholders to gather requirements, compiled existing user research, created wireframes,  and created and executed a project plan. I took the project from an idea all the way to launch.

The Challenge

Conceptually, executives had an idea of what they wanted.  Sometimes, their idea and the reality of what the user actually needed didn’t match. We had to quickly determine what features we would offer, and how it was presented to the user.

The UX research and design process was compressed to give developers as much time as possible to implement.  I had to communicate and coordinate dozens of team members and made sure that they had clear direction and understanding of the user and their requirements.

Time was short, and we had three months from concept to launch. Every step of the project was accelerated to meet a hard deadline of April 1st, the start of the major league baseball season.

The Solution

I quickly put together a persona based on baseball fan characteristics culled from  secondary research on the Web.

Knowing who we had to serve, the team got to work with possible features to solve pain points and satisfy the Angels fan base.

After vetting our ideas with subject-matter experts, we moved forward with podcasts, a blog, player profiles, and real-time data such as scores, schedules and statistics. A separate mobile website was created so you could check this information at the game.

We broke each feature into several smaller projects and designed UI and the functionality,  as we went to get work into developers hands as soon as possible– a variation of the Agile workflow.

 

Since we had such aggressive deadline to define and start the project, we didn’t have time conduct original user research. I pieced together user demographic traits, and user goals and frustrations of the typical Angels fan from secondary research I compiled from the Web. 

Compilation of User Research Data and Persona

Since we had an aggressive deadline to define and start the project, we didn’t have time to do a original user research. I searched the Web for demographic traits, user goals and pain points of the typical Angels fan. I found many secondary research sources that I based my persona on.

I interviewed our internal subject-matter experts, our baseball journalists, to validate my persona characteristics. These experts had decades of experience interacting with fans at the ballpark, and familiar with their motivations and pain points. Being fans themselves, some of our experts matched many of our characteristics of the persona.

Proposing and Testing Features

Knowing the goals, frustrations and demographic information on our persona, the content team and I started to brainstorm content and functionality of the new site.  Stakeholders came with their own feature lists, and we tested the ideas with baseball fans internally within the company. Aftera few rounds of testing concepts and explaining functionality, the stakeholders and I arrived with a final list to move ahead on.

Site Map

I started organizing the list of features into a site map to help visualize the scope of site, and tried out user tasks. We organized the content into categories and tested this with internal users.

The final product ended up being much larger that what is pictured here, with eight subcategories and a unique UI on each.

Stakeholders were updated on our progress, and they suggested changes.

Wireframes

With the site map done, I started on wireframes to start putting a UI page elements on the  pages themselves. web developers and a UI designer were included on this phase to help with usability and to keep our technical implementation realistic in the time we had left. We went through three iterations of wireframes and presented to the larger team and stakeholders for approval.

High-Resolution Screens

The UI Designer took the wireframes and started to apply a design philosophy. Colors, typefaces, functionality and real content were designed in Photoshop.  We had many conversations between the UI Designer, stakeholders, and our technical team to make sure that the design fit within our implementation deadlines.

We provided paper prototypes to internal user testers to observe specific tasks and flow and iterated five time before sending this to the technical team. 

Implementation

Once a particular page element was designed and approved, we started to implement immediately. I wrote functional specifications for the development team and discussed the best (and fastest) way to forward. This piece-by-piece implementation allowed us to work on different parts of the site in parallel with our content, design and development teams. 

We created front-end templates to implement the new UI on our internal content management system (Onset.) We also setup multiple mySQL databases and automated scripts to load real-time baseball statistics from third-party vendors to display game results, team standings and scheduling information. We set up a WordPress Angels blog on our internal servers. I setup a an audio workflow for a daily Podcast.

I trained journalists, photographers, and videographers to use the new system and related workflows. The site was QA’d as the pages were finished, and as a site as a whole.

The site was in development for eight weeks.

Finished website

We launched the day before the MLB regular season started.