Gorilla FC

Revise the existing site to create a  branded website that easily allows users to donate to Gorilla FC, become a member, purchase merchandise, and engage in a conversation about the Seattle Sounders.

 
 
 

THE BRIEF

Revise the existing site to create a more professional, branded website that easily allows users to donate to Gorilla FC, become a member, and purchase merchandise.

 
 

SCREENERS & INTERVIEWS

Our group developed two brief screener surveys; one designed for current GFC members, and one for prospective members. The results of the screener allowed us to target ideal interview subjects.

We were able to conduct thirteen total interviews - four with current GFC members and nine with prospective members.

For the current GFC members, the questions were focused on what tasks they seek to accomplish when using the website, and the pain points within that process.

The interviews with prospective GFC members focused on what they seek when interested in becoming involved with a fan club-like organization.


After conducting interviews, we created affinity diagrams that would help us in creating personas. We evaluated statements from our interview subjects, and sorted them into several "I statements" that would shape our personas.

AFFINITY DIAGRAMS

 
 
 
 

 

PROTO-PERSONAS

Once we had finished the affinity diagrams, we were able to create two proto-personas, each with their own pain points and goals. Francis (left) would be our primary proto-persona, and Janet (right) would be our secondary proto-persona.

 
 
 
 

We also created user stories for both of our personas. These personas and their stories would help us design an experience with as few pain points as possible.

The user story of Francis, our primary persona, reads as follows:

Francis is an openly gay 29 year-old programmer from Pasco, WA who just moved to Seattle for a job. He has been a supporter of the Sounders since they joined the MLS, and discovered Gorilla FC while at a Sounders game. He craves shared experiences, especially involving soccer, his favorite sport. He volunteers with organizations that he aligns with, and he enjoys participating in an ongoing dialogue about things like the Sounders.

 
 

INFORMATION ARCHITECTURE

We were able to re-organize the global navigation with the findings from our interviews, card sorts, and affinity diagrams. We wanted to clarify everything to allow the user to find anything they are looking to find through the global navigation.

Through interviews and the ensuing affinity diagrams we were able to find out the general information the users seek. Card sorts allowed us to see the associations that the users make, and how they see relationships between the pieces of information on the site.

A concept map devised from user research findings.

 
 

 

INTERFACE DESIGN

One of the primary goals of our client was a site with increased visual branding. Among other issues, the old design lacked visual storytelling. It was gloomy and uninviting. Many of the elements on the page carry equal visual weight, thus the users eye does not have an entry point.

 
 

The low contrast ratio between text and background - black or green text on a dark gray background - makes the text difficult to read or even notice. 

In short, there were many areas for improvement in regards to the interface design. Our group agreed that the new design should have a clear global navigation, and should feel sporty and friendly - two main tenets of Gorilla FC.

 
 

To address both user and client goals, we sought to make both the 'Join' and 'Donate' options evident to the user. We designed eye-catching, high-contrast call-to-action buttons for both of these options. 

Through usability testing we found that users were able to recognize at a g what this site represents. The pared down color scheme allows the user to focus on the images, and those images help tell the story of Gorilla FC.

 
 

With our site prototype designed and functional, we began user testing. We would give the user a test scenario and observe as they went through the process.

Here is what we learned from usability testing:

  • When we asked the user to Join or Donate to Gorilla FC, they did it with ease, quickly spotting the call-to-action buttons.
  • When the usability testing subjects landed on a new page, there was little or no disparity between what they said they expected to see and what the page actually presents.

USABILITY TESTING