ISC Gunners
Website design
Overview
Role: Website designer, UX/UI designer, UX researcher
Timeline: 2 months
Tools: Figma, Photoshop, Illustrator, Squarespace, Wix
Question: How can their website be improved?
Background:
Issaquah Soccer Club Gunners (ISC) is a soccer team based in Issaquah that is focused on growing youth soccer and promoting the sport. With over one thousand players each year, ISC is a known club in Washington competing at some of the highest levels of soccer.
Summary:
Revamped the Issaquah Soccer Club Gunners' website with a fresh and professional look
Promoted from intern to staff
Saved money by switching website builder from Wix to Squarespace and transferring URL
Improved website navigation and user experience
Conducted research with users of the website
Themes:
Presented three different site themes: Street Soccer, Goal Scoring, and Team Growth
Chose Theme 1 (Street Soccer) for its modern and professional appeal
Card Sorting and Information Architecture:
Conducted card sorting with club staff, parents, players, and non-players
Determined pages to keep and remove, and built the navigation bar accordingly
Created user journeys to demonstrate improvements in the new information architecture
Website Builder Switch:
Pitched the idea of switching from Wix to Squarespace
Reasons for the switch: cost-effectiveness, better mobile experience, staff dissatisfaction with Wix's complexity
Familiarity with both builders and ability to teach Squarespace usage
Wireframes and Site Creation:
Started with hand-drawn wireframes and transitioned to digital wireframes using Figma
Target audience
Greater Seattle Area residents
Age range:
4-19 years old (youth programs)
19-50 (adult programs)
Parents of children who are interested in playing soccer
To begin I Spoke with Executive Director and Marketing/Social Media Manager.
What they told me:
Website is outdated and disorganized
Desire for a more professional design to stay competitive
Mobile devices account for most interactions on the site
Based off of these statements, I researched similar websites (competitors, professional soccer teams, and sports brands).
After my research I put together a list of themes for the ISC board to choose from.
Street Soccer. The idea came from ads I’d seen for the Seattle-based pro teams and street soccer. Weather-beaten, slightly damaged posters plastered on walls offer cool textures in the imagery and communicate a rough and rugged competitiveness. I took inspiration from competition-driven companies that have used texture in their marketing, including Nike, Adidas, Under Armour, Major League Soccer, and the Seattle Sounders.
Goal Scoring. This focuses on how successful their teams are. The primary emphasis is on literally scoring a ton of goals to attract people who want to be a part of the Gunners’ fun and winning culture. I took inspiration from companies that are all about the fun (Lego, Disney) as well as from companies that use a competitive nature to drive their marketing (Xbox, Under Armour).
Team Growth. With this theme, I wanted to target the inclusive nature of the Gunners’ community. I wanted to make it fun and professional. I took inspiration from companies like Vans and Zulily because of their type treatments and their use of color really pop and grab the user’s attention.
The board ended up going with Theme 1 (Street Soccer). The club felt that it was a more modern and professional look.
Once the theme was chosen, started to do more research but with the club and parents.
Conducted card sorting with club staff, parents, players, and non-players
Determined which pages to keep and which to remove
Designed the navigation bar based on the card sorting results
Created user journeys for both the old and new information architecture
Card Sorting Excercise
Original info architecture:
The original information architecture was big and cluttered with a lot of pages that were either out of date or completely unneeded. As I looked through it I saw a lot of repeating information or information that was completely irrelevant.
Original user journey:
The original user journey took a long time and was frustrating for users to go through.
Non soccer player’s info architecture excercise:
I asked someone who doesn’t play sports to go through a randomized version of the original information architecture and sort it how they thought made sense. They ended up getting confused and I saw how they put a lot of pages under few folders.
Final info architecture after research and working with participants:
This is the final information architecture that I ended up with from all the data I had collected. I was able to combine some of the pages and get rid of a lot of clutter and make I more organized and easier to navigate. There were some restrictions from the club on where I was able to put things like the Recreation folder but I was able to work with them.
New user journey:
Once the new info architecture was finished, I created a new user journey to show the club. This journey was to show how much easier it is to navigate after going in and combining pages and getting rid of unneeded pages.
Steps I took after research:
Cleaned up the information architecture and presented user journeys
Proposed changing the website builder from Wix to Squarespace
Reasons for the switch: cost-effectiveness, better mobile experience
Staff had expressed doubts about Wix's suitability and found it complicated
Familiarity with both builders and ability to teach them how to use Squarespace
After getting approval to switch from Wix to Squarespace I was on to making the site. I started with wireframes, starting with a couple of hand-drawn ones then going over to Figma to create digital wireframes.
Wireframes:
Home:
Computer
Phone
Contact:
Phone
Computer
Mockups:
Home:
Contact:
WPSL page:
Live pages:
Home:
Contact:
WPSL: