Redesigning a soccer team website from the ground up — a UX case study
From Monday to Friday, I spend two hours on a train commuting to and from work. One thing I do from time to time is look through the web and redesign sites that are outdated and can use a bit of UX love. This allows me to further flex my creative muscle and practice what I have learned over the years.
One recent site I chose to redesign is the Oakville Soccer Club — oakvillesoccer.ca. I grew up playing soccer in Oakville (Ontario, Canada) and for as long as I can remember their site has been difficult to navigate.
Problem: Their site is very cluttered and confusing, making it difficult to navigate and find what you are looking for.
Here is what their homepage looked like at the time of my redesign:
I started out by creating a few quick wireframes in Sketch for the Home and League page.
Let’s start with the Oakville Soccer Club’s navigation:
- The logo isn’t really a logo, but rather a crest. There should be a more traditional logo for their site and the overall brand of the Oakville Soccer Club. The crest makes sense for clothing, uniforms and maybe some print material, but it is very much out of place as a logo in the upper left corner of a web page.
- There are too many links. You don’t want to overwhelm your user with too many choices. It leads to cognitive overload and decision paralysis. A lot of the links contain acronyms. If you are visiting the site for the first time, there is a good chance you won’t know what those links contain and are unlikely to click due to disinterest, confusion and a lack of clarity.
- This area is extremely cluttered. The site included a “Register Now” button with zero context. What am I registering for? Social media icons are simply thrown in and ultimately competing for clicks with the rest of the navigation. There is no need for the Google Translate Widget, which likely gets used minimally (if ever) and simply adds additional clutter and confusion to their navigation. Plus, most browsers now automatically prompt you to translate (if required).
- The wordmark is way too big, again, adding more unneeded clutter and visual competition in their navigation.
- The site’s patterned background is very outdated. It is important to stay up to date with design trends and best practices, especially when your desired audience is largely a youth demographic seeking fresh and relevant visual stimulation.
- I created a more traditional-looking logo for the Oakville Soccer Club. The name “Oakville Soccer Club” is really long for a logo. A lot of people simply refer to it as the “OSC”. I went with an italic font. I wanted to make the wordmark look like it was in motion. I also used a heavier font weight because I wanted to make sure it was visible at a smaller size. I wanted the letter “O” to stand out, so I gave it a tailwind to further emphasize the motion in the new logo. Another important reason for the stylized “O” is that it can be used on its own as a social media avatar or a website, iPhone, Android favicon.
- I was able to remove a few links by grouping “Youth HL” and “Adult HL”, and renaming them within a single link, “Leagues”. The acronym HL may not be apparent to a user visiting this page for the first time. It stands for House League. It makes sense to just combine both under a single link like “Leagues”. It is a lot more descriptive and easier to understand. Another question I had when I landed on the homepage was, “What is ADP, OPDL and RDP?” I clicked the links to find out. They are programs, so why not just call them “Programs”, again, making it a lot easier to understand what’s behind that link.
- This slider has was too much going on. There is no hierarchy, the copy is in all caps with a bold font-weight. I don’t know where to look and everything in their slider is competing for my attention.
- It is not easy to see in the image above, but there is actually navigation for this slider represented by small white circles. It is very difficult to see because it clashes with the large red “Click Here For More Info” banner/button in the background.
- I wanted to lead with the main message using a nice bold font. It gives the slider context. The message is straightforward and to the point. It’s followed by a bit more information regarding the registration for adults and youth indoor soccer.
- I really wanted the CTA (call to action) to stand out. It was important to make it look like a button as opposed to a background image on their current slider.
- I wanted to make sure the slider navigation had enough contrast. I chose yellow because it works really well with a dark background. I also wanted to give the user an idea of how long each slide would appear on the screen. Each slide has a loader. As the loader fills up, the slide transitions to the next slide. The loader rectangles work as navigation. The user can click the individual rectangles to see each slide without having to wait for the rectangles to load.
- Imagery is so important when it comes to web design. A lot of my time is spent trying to find or create the right image/graphic. Images help you tell your story. They also help you guide the user through your site or app.
- This section is the same as the navigation at the top of the page. This is a waste of the home page. You can already access these pages in the main navigation. This section can be better utilized to show “Latest News” and “Upcoming Events”.
- The “Latest News” section is just a bunch of links. We can really leverage this section and give it more of a blog/news style layout to make it more appealing visually and easier to consume.
- This is just an empty section, I am assuming because there were no events at the time I captured the screenshot. Add an empty state, provide feedback to your users. It just looks like that section failed to load.
- I understand why there is a “Weather Forecast”. It is a soccer club website and games are played outside, but I don’t think it belongs on the homepage. I don’t think this is critical to the page, in other words, I am not going to stop coming to this page because there is no weather widget. In their existing state, there are too many elements competing for their user’s attention. It is important to evaluate everything on the page and ask yourself, “Does this really need to be there?” One of my favourite quotes is from John Maeda, who said, “Simplicity is achieved through thoughtful reduction.”
- It’s not entirely clear if these are sponsors. Either way, they are a bit large and should have more padding top and bottom.
- The footer is crowded and there is not enough contrast with the dark red links on the black background.
- I wanted the homepage to focus on news. All of the other information like leagues, programs, club info, etc. lives behind the links in the main navigation. Adding new content is a really good way to keep users engaged and coming back to your site, as well as increasing your SEO.
- The OSC has been around for a long time, so as as result, there have been a lot of news articles and announcements published on their current and previous sites. I added some pagination to allow users to go back and read older articles. Without the pagination, the user would have to scroll for a while before getting to the “Upcoming Events” section and footer. I also felt like the “Upcoming Events” section needed to be prominently displayed on the homepage. This is another section that could keep users coming back on a regular basis.
- I assumed these were sponsors of the Oakville Soccer Club, so I added a title, cleaned up some of the logos and scaled them down.
- I cleaned up the footer, keeping all of the info but laying it out in a way that was easier to digest. The newsletter sign up only asks for their email address. Users don’t like filling out forms.
The other page I wanted to tackle was what I called in my design, the “Leagues” page, and what the Oakville Soccer Club calls “Adult HL”. The Oakville Soccer Club went with the similar design pattern to the home page where they displayed text links and then displayed images in a circle with the same links. When the user lands on this page they need to look through 24 CTAs (call to actions) on the page in order to get to the page they want. There are also a number of CTAs that are not relevant to “Adult HL” on this page.
- There is no need to repeat the CTAs in the sidebar and main section of the page.
- The schedule section should appear on the page with the league info.
- The “Adult League Leading Scorers” should also appear on the page with the league info.
- “Policies and Documents” can live on the individual page with the league info. If the “Policies and Documents” are generic and the same for all leagues then we can place them in the “Club Info” link I added to my design.
Maps should be on the individual league pages. It is important to group related information. You should be able to find the league and then everything else that is relevant to that league in one area.
“Pick-Up Soccer” and “Walking Soccer” seem more like programs then they do leagues. I would move these to the “Programs” section of the site.
- After going through this page, I realized there really are not a lot of leagues. As I explained above, most of the links don’t belong on this page.
- New navigation (the user has clicked the “Leagues” link)
- Adult and Youth HL can now be found under the same “Leagues” link with a simple tab navigation.
- Each league has its own hero image and title in the lower left corner. There is a lot of copy on this page, so I want to make sure there was some beautiful imagery to break up the page.
- Some of these sections can be really long, so I wanted to make sure I wasn’t showing the entire section with never-ending blocks of text. I want the user to be able to quickly scroll the page and click the “See more” link for more info if they require it.
The final design of the Home Page
The final design of the Leagues Page
Home page on mobile
League page on mobile
I hope you were able to come away with some new insights, and more importantly, how some simple design and UX principles can really change the way you experience a website or app.