WEB DESIGN / AWL
WEB DESIGN / AWL

All West Lacrosse Website Redesign, 2015

The end of 2015 saw the launch of the all new allwestlax.com. This update was the first major design overhaul since 2010. This was a massive overhaul, from the ground up. Since the 2010 redesign (wordpress), mobile became the primary source for viewing camps and clinics.

Identifying the problem with the current version

The 2010 relaunch was a major overhaul in itself, going from the previous iterations from the company launch in 2003 and seeing several updated versions throughout that period. From 2003-2010, the site was primarily done in HTML and CSS, and required myself or a user who understood those languages to make updates. In 2010, All West brought in an outside developer to streamline the experience, utilizing Wordpress. The site was good for novices and administrators to update, however over time became harder to keep updated. And with the utilization of responsive and adaptive frameworks and the push towards mobile, allwestlax.com quickly became outdated and difficult to maintain.

old site

The previous wordpress version. 2010-2015

In the summer of 2015, a major focus was put on the design of a new, modern web experience. As the lacrosse-instructional market had greatly grown in the bay area since 2010, the current allwestlax.com site was outdated and stale. The focus then became to streamline the user experience, focusing on 1-2 clicks to find a program and register. As the design lead on the project, I focused on the positives and negatives of the current website, comparing to the competitors in the area and their overall experience, and how allwestlax.com could showcase and implement an easier experience for the user.

The Process

It all started with a few quick sample wireframes in my grid book. I am a visual problem solver, and quickly started low-fi prototyping, stating the problems the user has and an easy solution to the problem. From that process, more wireframes were mocked. At this point, I also took to the contacts that I had; parents of players I had coached that I developed a good relationship with. I asked their overall thoughts and concerns with the current website, their thoughts on competitors and what makes for a positive experience. This was as close to "personas" as we got with this project, and instead of having a hypothetical user, we had literal users with a great deal of experience. From the feedback received, mind maps and user flows were created and white boarded in the All West offices. Working closely with our COO to utilize a new experience, we focused on a simpler layout; one that can be navigated with ease on desktop, tablet and mobile. The emphasis? 2-clicks. At this point I began the hi-fi mockups. Sketch was the tool of choice and each page was sampled for review with our COO, Office Manager (who handles the day to day updates to the website), as well as the Marketing Director and CEO. The screenshots were uploaded to InVision, with a full walk through and interactions. The feedback went well, with the next step being the build and beta testing. Once development officially began, we brought in Justin Scheetz from Boxy Studio to streamline the process. Working closely with him, although being on different coasts, was a great experience. His knowledge of wordpress, themes and plugins is unmatched. From the screenshots I had sent, Justin started to develop the backend and theme. I provided the images, sliced and optimized through Sketch.

sketch screens

Sketch Screen flow for Desktop

sketch screens mobile

Sketch Screen flow for Mobile

One major obstacle was how to separate from our competition in the bay area. All West Lacrosse had started in 2003 and was once the only provider of high-level lacrosse instruction in the bay area. Since then, lacrosse has become "big business" on the West Coast, with many pop up companies coming in. One feature I always envisioned was to show the reach of All West. While most companies focused on one area on the Bay Area, All West had strong roots in the North, East and South Bay, as well as San Francisco. The company was not a side project or part-time job; this was a company who focused solely on instruction, teams and a positive experience through lacrosse (read about RAE). From this, I conceptualized our programs page to offer a "map view", showcasing ALL of the programs throughout the bay area that we offer. No other company had this feature. Working closely with Justin, we successfully created the Programs map as a feature plugin to the new site.

program mock

Mock Programs in Sketch

program live

Shipped Programs Page

Launched during Holiday break at the end of 2015, the brand new Allwestlax.com offers a new experience for our target market, whether they are on a desktop, laptop, tablet or mobile, the experience is seamless and easy to use.

website

New and improved allwestlax.com

  • Client Name
    • All West Lacrosse*
    • *Full Time Design Lead Position
  • Timeline
    • May 2015-December 2015
  • Role
    • UX, UI, Visual Designer, Developer, Design Lead, Creative Director
  • Target Market
    • Lacrosse players, parents, coaches and fans in the Bay Area
  • Tools Used
    • sketch icon photoshop icon invision icon wordpress icon html5 iconcss3 icon
×

Back to top