OVERVIEW

XR Soccer Training is an independent soccer development program founded by the the 2015 Youth Soccer National Coach of the year, Xavi Rico. Their coaching techniques are designed around the concepts of learning retention, body mechanics, and neuromuscular soccer. They currently offer training in Milwaukee and Colorado through 5-day training camps, futsal leagues, and exclusive access to an international soccer tournament, Mundialito.

My team was approached by one of their coaches to help enhance their overall digital presence, specifically, information on their current services and their navigation bar. In addition to their website's content and structure, they described their registration process as the most pertinent. Currently, they use an off-site service, Jot Form, for all their registrations. They would like to implement a progressive disclosure registration system that easily allows future clients to register and pay within the website.

RESEARCH

XR’s Current Website

To further understand the website’s pain points, we set off by thoroughly exploring the current website.

1. Navigation

   Navigation was the first component of the page that created confusion. The bar was transparent with a moving storm in the background. On other pages, the transparency of the bar and drop-down menus made the categories blend in with whatever photo was on the page.

2. Visual Consistency

Each page had a different background, and content consists of either photos, videos, Piktochart links, or no content at all. There was also a lack of branding in colors and typography.

3. Content balance

There were plenty of pages that a good amount of information. For example, Xavi Rico’s personal history and journey to professional soccer/ XR. However, when it came to what XR actually offered, there was barely any content at all.

4. Off-site actions

Details: In order to receive more information on the training camps, the button ‘Details’ will take you to Piktochart link with dates, location, and a registration link.

Register: The ‘Register’ button will take you to a Jotform where users can fill out their information, their child’s information, and credit card information.

Site-Mapping

After finding some issues by simply using and exploring the website, we decided to collect all of their current content into an existing site map to brainstorm ways to condense or discard.

Then, by discarding information that was no longer necessary or offered, such as their Shop, and utilizing a card sort to re-categorize their content, we created an updated site map to simplify their navigation bar.

Survey and Interviews

To gain a little more insight on how actual users felt about the website and the program as a whole, we sent out a survey and received 25 responses and followed up with 8 phone-interviews.

The responses from the survey were overwhelmingly positive. Each and every respondent raved about the program, the coaches, and the visible improvement of their child's performance. The only negative feedback we received were of the website's "busyness" , "confusing navigation", and "lack of information."

Key quotes

“Location, dates and cost need to be easy to find.”

“Would love to see more info on the program accessible via website including breakdown of the training day and program goals”

“The web site is way too busy (especially the background). You cannot easily go from place to place. I don't even bother to look at it anymore.”

For our interviews, we knew that everyone loved XR and the coaches, so we wanted to direct the focus to the registration process. Interestingly, no one expressed any pain points. Though, we did learn that most parents would register right off from XR's email blasts. If they could not find that email, then there would be difficulty finding the registration link on their website.

Key Takeaways

IDEATION

Design Studios

Hi-Fi Mock-Ups

home page

This component helps both the experienced user and inexperienced user. Parents who have been using XR for years just need a quick way to register their children for camp. For inexperienced parents, they can click ‘Learn More’ to go directly from the home page to the training detail page.

In our research, we found that parents struggle scheduling family vacations and other soccer camps around XR, so we wanted to include a calendar with all events highlighted to help parents schedule their summers.

To highlight and explain some other programs XR offers, we designed the above cards to offer another point of entry to those detail pages without taking up too much space on the home page.

Training Detail Page

Then, from our research, we identified an absence of information on the day-to-day structure of their training camps. The above schedule visually explains what the children will be doing, and when the parents will need to drop-off/ pick-up.

We found it important to display the coaches on the training detail page because this is another thing that sets XR apart from other soccer training programs. They fly out different coaches from around the world for each camp. This component highlights each coach with a small biography and their specialties.

Registration

Registration was an area with very little pain points, but we did want to design an account feature that allowed returning users to sign in and register using saved information. For new users, they would simply create an account with their name and email, fill in the fields below, and enroll their child.

SUMMARY

This was an interesting project to take on because it did not necessarily have a clear user problem. All users had a strong support of the company and only minor usability issues with the website. Instead of letting that narrow what we could do, we let it expand into many areas: UI, UX, branding, and content. Our designs will help XR Soccer as they grow. XR relies greatly on word of mouth, and it has been working very well for them. With this redesigned website, we hope that anyone, new users especially, who comes across XR will know exactly what XR does and the passion they have for youth soccer.