Gymnastics Ireland Case Study

Gymnastics Ireland is the main Irish Sports headquarters and national governing body for the sport of gymnastics in Ireland. As an existing client of Eyekiller Ltd, Ciaran Gallagher (CEO of Gymnastics’ Ireland) requested a new website with an update. This refresh was required to modernise and make the site mobile-friendly, but it also required better organisation and need to meet their new KPI targets.

This was my first major project at Eyekiller where I was solely responsible for the UX process. I had direct access to the client, and reported directly to my manager. The following case study has been split into 4 sections to fully explain the story and process.

  • Context & Information Architecture
  • Wireframing
  • Prototyping
  • User Testing
  • Context and Information Architecture

Information Architecture

After discussing deliverables, my first task was to organise an Information Architecture workshop. Whilst I was preparing content for this workshop, my manager and I discussed various websites that were related to give us context and understanding audience expectations (for example we looked at British Gymnastics and Scottish Gymnastics websites).

Information Architecture was new to me and therefore my first priority was to grasp the subject. I read Levy’s book on UX Strategy and based the workshop presentation on his helpful points. The purpose of this workshop was to accomplish the following:

  • Start the conversation about correct labelling and making information findable.
  • Encourage the client to understand the importance of Information Architecture.
  • Understand the personas for the Gymnastics Ireland website.
  • Card sort and discuss the initial structure of the website.
  • Interview key stakeholders to understand all of the organisational requirements

The workshop was attended by a total of 3 staff, myself and my manager, Jamie. I started the workshop with a presentation introducing th schedule and explaining the different words. The first stage of this workshop started with us writing down all the users of the website. Myself and my manager wrote down the stakeholder responses on A3 paper. After this half hour session I had a strong indication of who the audience is, what their respective expectations were and how to deliver the best experience to them.

Following this session, I wrote up top-level labels on sticky notes (such as About Us) and positioned these on the wall. I then awaited the suggestions from the client. By placing notes on a wall, we managed to ascertain the various sections and labels. Because this session was a mixture of open & closed card sorting, it slowly become complex and unmanaged. I had intended to do another session on collaborative Wireframing, however due to the hold up, I had to close the session and record everything that was discussed.

Although this workshop wasn’t as successful as anticipated, I did gain vital experience in facilitating workshops. My manager let me ‘loose’, letting me gain experience and wasn’t upset that the workshop wasn’t productive. Instead, he helpfully encouraged me to keep focus on getting the sitemap signed off.

From that meeting I compiled up a draft sitemap which prompted further discussion as there were many disciplines, programmes and resources for the various users of the website. Due to it’s complexity, there were five revisions of the sitemap. Once the final version was approved, I setup a Optimal Workshop study (Treejacker) to validate the sitemap. This involved me writing key user tasks which were based upon the needs to of the personas discussed in the workshop.

An example of some of the tests which failed due to the logical ordering. I created the final sitemap with a tested labeling and structure

I was able to recruit testers for this study, via their social media channels and in total there were 30 participants. This study measured the ’selections’ they made on labels (ones logically made sense to them). A early issue I identified was that ‘jargon’ familiar with the Gymnastics Ireland team was not fully understood by a wider audience. After reviewing the report, I then suggested recommendations to adjust the labelling of certain items. This provided a validated sitemap which was tried and tested before production. Although an extra step, it ensured that users could find the pages they needed to see (not to mention saving time).

Wireframes & Prototyping

Every stage of this project has been part of the learning curve. Now that I had the architecture to build on, I started work on the wireframes. The first step was to visually conceptualise the user tasks. Finding a gymnastics club for example was a key tasks where Coaches, Gymnasts and parents could find a club near them. Another challenge was to find an effective way to display their range of programmes in an interactive way. Therefore part of my research process was to identify ways to display a combination of elements.

All through the process of doing these wireframes, for any complicated elements I would discuss in depth with the developers. These conversations included a calendar download option, a discipline slider and a Google Maps based club finder. Animations and interactions were also discussed to see what elements fitted best with the scope and budget of the project.

The evolution of the wireframes: version 5

Due to the size of the website and large array of content types, I had to ensure that the wireframes had multiple reusable elements. Not only did this save development time, it also kept the layouts consistent. I started with a content page which was intended for single events, blog posts or news items for example. Afterwards I created an index page which mainly served it’s purpose for SEO. For inspiration, I looked at sites like gov.uk which brilliantly displays complex pages in a logical and findable way.

The biggest challenge was creating a responsive-ready gymnastics club finder. I viewed the existing data API, and noted the output (Gym Name, Gym Address, Gym number etc) and then designed up a wireframe and the different states. The first state was an empty search field with a map of Ireland as a background. The second state was a search term and loader animation. Thirdly, there was a listing state of all the results returned for the search query. On the click state, the final page was a single gymnastics club view with key information (and an option to return to the search results).

User Testing

To validate the wireframes, I uploaded a clickable prototype to InVision. After members team had checked it, I then created a UserTesting script to test with users. This script had 3 tasks which were based entirely upon the key user tasks (agreed in the previous stage). In total I received FIVE? testing sessions where I carefully recorded feedback. This was the second level of validating the Information Architecture I did to prove that visually the labelling and information was useable and findable. Unfortunately, as these sessions were free, the audience were all from the United States rather than localised (to the Republic of Ireland). However I did solicit basic feedback, insight which helped validate both the sitemap and the wireframes. With specific reference to the club finder, these tests were fantastic to get an understanding of the users’ expectations.

After affirming the quality of the wireframes with the user testing step, Jamie and I created a meeting to demonstrate the wireframes to the client. The wireframes were successfully received and signed off with only a few minor textual changes.

The final step for my stage was a design handover to Julie, the lead designer. I discussed all the different templates and how they were consistent for each section of the website. She was also pleased to hear that I created a components artboard in Sketch, which displayed all the elements used in the project (such as image sliders, reviews, buttons and font-styles).

The evolution of the wireframes: version 5

What I Learnt

Gained further exposure to advanced Information Architecture and Optimal workshop tree testing. Every day should teach you something, and this workshop taught me many practical lessons. In reflection, I think I need to be more confident that I’m running the agenda and that it’s down to me to ensure that the entire session runs smoothly. This was my first card-sorting exercise and client-level IA workshop, and therefore it was incredibly beneficial to get key experience.

Towards the ends of this project, I realised the importance of design templates and reusable elements. I also learnt the necessity to validate the sitemap & designs, and demonstrated an understanding of this when I organised successful sitemap tests and usertesting.