South Kitsap Lacrosse Club
Overview
We reached out to the non-profit child's sports team South Kitsap Lacrosse Club and asked to redesign their website. The website is poorly organized, making it difficult for lacrosse parents to access the information they need for the season, and causing them to abandon the use of the website altogether.
Our newly designed website combats this issue by prioritizing organization and enabling users to seamlessly register, learn, and schedule all their needs for the season.
My Role: Lead UX Designer
As the lead UX designer on the project, I successfully managed the entire design process from conducting user research, generating initial concepts, finalizing designs, and collaborating with the teams to achieve both user and stakeholder objectives.
I worked in a team with 4 other UX Designers. I used Figma to create the design systems and diagrams. I used HTML/CSS and Javascript to iterate the final design.
The Problem
The information is poorly organized
It's difficult for parents to access the information they need for the season and causing them to abandon the use of the website altogether. The website itself looks tacky and has too many buttons that lead to the same page.
How might we redesign the Kitsap Lacrosse website to intuitively provide parents with important season information such as registration, safety, equipment, and schedule?
User Research
Users spend too much time looking for information
We conducted 6 qualitative user interviews with parents to investigate their wants and needs regarding their children's sports.
We wanted to answer the question: how might we redesign the Kitsap Lacrosse website to intuitively provide parents with important season information such as registration, safety, equipment, and schedule?
Key insights:
-
Parents need to locate season information quickly and access information in one consolidated place
-
Registration should be a streamlined process to save parents time
-
Scheduling can be hectic. A visual calendar would increase the scannability of the season schedule
-
Every parent wants the resources to help their child succeed
Understanding our users
We best consolidated our user base through our user persona, Jessie Williams: a busy mother of 2 that needs to stay organized and prioritizes getting her kids to and from their extracurriculars.
Value Proposition
Parents faced the major challenge of navigating the poor website structure. We prioritized a calendar, a trustworthy "About Us" page, Gear exchange, other lacrosse camps, and readily available information of the current season and teams.
Information Arcitecture
The website needed to be organized in a way that made information easy to find.
One issue we faced with the old website was that all the important links were scattered around in the navigation. Our first task with our sitemap was to organize our homepage so that all the main features could be found by just accessing the main page of the website.
After communicating with our stakeholders, we needed to prioritize specific links that Kitsap Lacrosse wanted to feature on either their home page or in the navigation.
Priority pages:
-
Registration link
-
Schedule and Calendar
-
Teams and Seasons
-
Lacrosse Camps
We incorporated those pages into our navigation bar and organized the information they contained under them. After gaining approval from our stakeholders, we began to design our prototype.
Prototyping
Low-Fidelity
Our low-fidelity wireframes featured lots of text on the original website to ensure that all of the information was there. Using our sitemap as guidance, we developed a side navigation bar and all of the following screens that it contains.
We focused on 3 key aspects when doing the wireframes:
-
Information organization
-
Ease of access
-
Stakeholder satisfaction
Web Iteration
Website Prototype
We focused more on aesthetics while translating the form and function from a mobile to a website interface.
We did not want to design something too unfamiliar, so decided to go with the same dark viewing style as the original website. By simplifying the color scheme, we allowed for a more cohesive look along the whole website.
Final Design
Making the web and mobile designs synonymous, we focused on making the final design functional and inventive.
After talking with our stakeholders, we made some small edits: feature Lacrosse Camps and Gear Exchange more. To make this edit, we added it to the navigation bar for the easiest access. We also began translating all of our design choices onto our mobile screens, fixing minor errors along the way.
We focused on these main points.
-
Text size. Everything had to be readable from a mobile and web standpoint
-
Ease of use. The UI had to be intuitive and defining
-
Stakeholder satisfaction. Building a website for Kitsap Lacrosse means doing it their way.
Home Page
Registration
Calendar
Figma File
Our Impact
Upon completing the final iteration, we surveyed real parents with their ability to register and access information on our website. Results showed significant improvement in a user's quality of experience.
-
20% Increase in Registration Efficiency: By optimizing registration and allowing users to register from basically anywhere on the website
-
Decrease in Navigation Error: Making the navigation easier to follow allowed users to make fewer errors in their process of finding information.
Reflection
Learned about the importance of communicating with stakeholders and prioritizing organization.
This project focused on both mobile and web development. It was very interesting to translate one design from vertical to horizontal, or vice versa. It helped me think a lot about the layout and composition of elements on a page. What works for one page may not work for another. It is also essential to think about visual variety. Having too much repetition will make the page look drab and boring. However, making pages too different would result in inconsistency across the whole website.
Given the chance to continue this project with all the feedback I’ve gotten, I would address these issues:
-
Text display. Some of the text being displayed is too small or too cramped. It was very difficult to figure out where to put all of the information, resulting in awkward hierarchies. I would revisit text sizes and make them synonymous. I would also leave a larger margin around important areas of text, so as to highlight them just a little more. On the mobile screens, the margins along the side were also a little narrow and could use some more breathing room.
-
Fun prototyping. Given the time frame of the project, my team and I were unable to incorporate any unique prototyping that would heighten the user experience. Stakeholder satisfaction was the most important part of the project, but creating a pleasant user experience is also very important. Given more time, creating more interesting interactions with hover, click, or transitions would elevate this project further.