Lake Hills Soccer Club

Homepage and templates redesign with usability for families as focus

LHSC Final mockup

Overview

Lake Hills Soccer Club (LHSC) is a registered nonprofit that hosts recreational and select youth soccer programs for children and teens ages 5-18 in the King County Eastside area. My project was to update the Lake Hills Soccer Club’s website so that it is visually appealing and user friendly to navigate. This included redoing the homepage, redesigning sites, creating site templates using WordPress, designing visuals as needed, and also advertising openings through various formats. 

Role
Web Design
WP Templates, CMS, Facebook Advertising, Direct Mail

Project Type
Internship

Duration
Oct 2017 – Jun 2018

Problem

How might we improve the usability of the LHSC website for diverse families so that anyone can navigate the site?

Research

I started the internship by first doing competitor analysis by researching other local soccer club websites. I also talked with a few families at a soccer meet. Individuals most actively registering for soccer were young families, particularly mothers, wanting to sign their child up for youth soccer. A good portion of them had either found out about LHSC through Facebook ads, direct mail, signage, or word of mouth. 

Persona

Melissa, 29, young mom

Melissa is a 29 year old young mom of a 6 year old, who believes that it’s good for her child to put his energy in playing sports and socializing with other kids his age. In her free time, she likes spending time browsing Facebook to connect with her own circles. 

Goals 

  • Easily sign her child up for soccer and see all relevant information up front
  • Understand which areas a soccer club will serve 
  • Quickly find the appropriate age group for her child

Information Architecture

Based on whiteboard ideation between my mentor, internship partner and I, we created a draft of the LHSC site map / information architecture map. Most of the content was already existing on a Korrio page, and would need to be moved over to the WordPress site. 

Since many of the families were Spanish speaking, we also brought up the possibility of making a Spanish version of the site.

Information architecture site map

Ideation

Since the site was done in WordPress, I was instructed to make changes directly to a staging site of the live website instead of doing prototypes in programs like Sketch. 

One of the first projects I took on was updating their Club Boundaries page. Previously, there was no visuals associated, and only a large list of schools. In order to make information easily attainable at a glance, I created a map of the areas served with club boundaries highlighted and schools labeled by elementary, middle and high school. 

Left: Original home page. Right: Edited home page

I was also tasked to reduce the scroll on the home page, while also adding more content. By combining the soccer types into recreational and club select, which would lead to more information, I condensed the information on the first two folds and increased text on the bottom. This included a language and accessibility statement, which was crucial to include on the home page. 

Final Designs

I worked on over 16 pages during my internship while also creating multiple forms of advertisements and graphics, including Facebook advertisements, direct mail, and the illustrated club boundaries map.

Reflection

This was my first time working on a real world project through a website. It was fantastic to be able to create a site that could make a difference and improve the experiences of families looking to register their kids for soccer. After the internship ended, I was unfortunately not able to talk with families directly to further iterate and improve on the design. In future projects, I make sure to try and ask for feedback from the users before the end of the project. 

Impact

  • Directly contributed to an increase of 12,000 views and 200+ clicks on the site
  • Assisted with implementation of language translation features on the website, improving accessibility for non-English speaking families
  • Created 3 easily repurposed page templates that are still being used on the site to this day

Next Steps

  • Improve the language and accessibility of the site, including checking for WCAG color contrast guidelines 
  • Develop more site templates as needed 
  • Reduce text through further editing copy