Alice Lan | UX Design Portfolio

alice lan.

About

Case Studies

Resume

Duration: 10 weeks, Summer 2025

Role: UX and Web Designer

Team: 1 project manager, 4 UX

designers, 2 web developers

Tools: Figma, Squarespace

West Coast Adult Soccer League Website Design

DELIVER

We chose to move directly into building the prototype in Squarespace without a usability testing phase. The design decisions were guided closely by client feedback and specific requests, ensuring the final product met their expectations. Once the site launches, we plan to evaluate its performance through real user interactions, gathering feedback and analytics to inform future improvements.

Next Step: Squarespace Implementation

We will be implementing our final website design into Squarespace with the help of two WCASL web developers. This implementation phase is expected to take two weeks, with the fully functional live site scheduled to launch in mid-August.

Following the launch, we will monitor user engagement and gather feedback from players and league managers to identify any usability issues or opportunities for refinement. This post-launch evaluation will include tracking key metrics such as page views, bounce rates, and time spent on key pages, as well as collecting qualitative feedback through short surveys or informal interviews. Based on these insights, we will recommend and prioritize future updates to continuously improve the user experience.

Final Designs

The End: Reflection & Impact

At the start, one of the biggest challenges was learning how adult soccer leagues actually work and understanding what players need, how teams function, how leagues are managed, etc. Doing that research helped us design a site that’s actually useful.

This project involved close, ongoing collaboration with our client and within our team. We had regular check-ins, made decisions based on their priorities, and adjusted our designs quickly based on their feedback. I learned how important it is to listen closely and not get too attached to a design just because it looks good. If it doesn’t meet client goals or user needs, it doesn’t work. With a tight timeline, teamwork and clear task delegation were essential. We divided responsibilities early and supported each other through design reviews and hand-off deadlines.

In the end, we built a professional site that reflects the quality of WCASL and supports future growth. For me, this project was a practical lesson in balancing clean design with clear communication. It taught me to focus not just on what looks good, but on what works well for both the users and the people operating behind the screen.

Overview

My team partnered with the West Coast Adult Soccer League (WCASL), a South Orange County-based adult recreational league, to redesign their website.

Problem statement: The old WCASL website lacks intuitive navigation, efficient registration, and easy access to schedules, scores, and media, making it difficult for players to stay engaged and informed.

Context: We were given free rein to design the entire new site from scratch. We held bi-weekly meetings with Dave Rice, the founder of WCASL, and frequently iterated based on feedback. Dave's main goal was to create a website that would draw in new members and host any information not available on Areena, their mobile app.

DISCOVER

Design Process

Define

User Personas

User Stories

How Might We

Client Expectations

Design

User Flows

Style Guide

Lofi Wireframes

MidFis and HiFis

Deliver

Prototypes

Squarespace Implementation

Discover

Member Survey

Platform Research

Stakeholder Interviews

Competitor Analysis

Our client expected the site to be up and running by early August, which is when the next league season begins. To meet this deadline, we were unable to complete usability testing. Our focus was on revising content, creating site page prototypes, and implementing them on Squarespace as quickly as possible without sacrificing quality.

Member Survey:

Age demographic: 75% of respondents were 45+ and 25% were between 25 and 45
Gender: 75% were male players, 25% were female players
Branding and perception: competitive, fun, friendly, passion
"What Sets WCASL apart?"
- Better organization, wide range of age-specific divisions, higher skill level, strong commitment and community

Decisions based on research

Font should be large and legible, with high contrast
Ease and simplicity of navigation: Important info should be easily accessible from the Home page, avoid burying behind multiple clicks
Static and simple visuals, avoid dynamic animations and transitions

Ideation and Client Communication

Represent a professional but friendly league image
Key themes: recreational, fun, inclusive, competitive
Add registration, sponsorships and fees, schedule and standings, and game standings pages
Flesh out the landing, about, and divisions pages
Prototypes have multiple versions to choose from

Additional Research:

The league commissioner used Dropbox to host all league information, so we scoured it for relevant information about divisions, rules, fees, and registration to put on the site.

In order to join the league, players must first register on an app called Areena. This app is also where all game schedules, standings, and field information are hosted. We interviewed a developer at Areena to see what information the app had and whether it could be transferred to the website.

We did a competitive analysis with other sports league websites for inspiration on format, content, and branding. I also researched and compared different platforms (Wix, Webflow, etc.) to host the site on. We ultimately decided on Squarespace, where the original website was built, for our client's future convenience.

Michael Stone

54 years old, male, married

Laguna Beach, CA
A huge soccer fan, but has only ever played recreationally. He joined WCASL in 2012 and is now a team manager.
Goals: Be more active and consistent with exercising, recruit good players to his team, easily find video recordings from games
Motivations: Wants to be able to find information easily, direct potential recruits to a professional-looking site
Frustrations: Not very tech savvy. Has little time between his job, family, and the league. Doesn't like having to pull up an app and sign in to find his team schedule.

User Story #2

Scene 1: During his lunch break, Michael pulls up the WCASL website on his desktop without needing to log in. He immediately sees his team’s upcoming game schedule.
Scene 2: He sends a clean, professional link to a potential recruit with team info and past game highlights, all easily accessible on the site.
Scene 3: After a match, Michael checks the site later that night to watch and download the game video without navigating through multiple apps.
Scene 4: While waiting for his kid’s soccer practice to end, he uses the mobile site to update a player slot with just a few taps.

Chris Fuller

30 years old, male, single
Irvine, CA
A software engineer who played soccer competitively in his youth and during college
Goals: Find a challenging league to improve skills and compete, easily join a team and register for matches, track game schedules and results
Motivations: Play at a competitive level, gain recognition and move up in league rankings
Frustrations: Difficulty finding leagues to play in, poor organization of games and information in previous league he has joined

User Story #1

Scene 1: Chris browses online for a competitive soccer program and finds WCASL. The website’s clear divisions and structured format immediately signal quality and professionalism.
Scene 2: Chris is impressed by the seamless registration process. Within minutes, he's signed up for a team in the Competitive Division, with his schedule, roster, and field locations all laid out clearly on his dashboard.
Scene 3: Each week after his games, Chris pulls up the WCASL site on his phone to check match results, updated standings, and any highlights or game footage, helping him track performance and stay motivated.

User Personas

DEFINE

How Might We…

Design a more intuitive and engaging WCASL website that draws in players of all skill levels, clarifies the registration process, and makes it easy to stay up to date with schedules, scores, and media?

Identifying Key Features

Division information
Seasonal game schedule
Current standings and past results
How to register as a member
Game recordings
Mobile responsiveness

Detailed layout of pages, buttons, and content created on a Google Spreadsheet
Directly editable by stakeholder to ensure full alignment during the design process
After contacting Areena for iFrames, we realized that implementing a calendar page wouldn't be feasible so we removed it from our wireframes

Colors were originally taken from the logo, but our client wanted a slate gray base, so we adjusted according
We chose Montserrat for the title and header font because it was bold, impactful, and sporty yet professional
The nav bar and footer were also designed as components for consistency

New player joining the league

Curious visitor learning more

Member looking for schedule

Sponsors looking to support

DESIGN

Content and User Flows

Style Guide and Design System

Low Fidelity Wireframes

We created several versions with different color palettes for our client to choose from. He ended up liking the purple theme, but wanted it changed to Slate Gray. We also iterated based on feedback about wording, such as "player" instead of "member."