NWSL Boston’s Website
Summary
My role in this project was to take in the branding material provided, and work with the NWSL team to create a CMS design system that would help them update the website without extra work.
The NWSL Boston team needed a new website that reflected their brand identity, captured their unique vibe, and delivered a seamless user experience. With a robust in-house marketing team responsible for regular updates, the website required a flexible, scalable design system that could be easily maintained and customized without altering the core Shopify theme.
For the North Raleigh Float Spa website, the focus was on mirroring their zen brand identity and calming vibe. The design needed to be flexible and scalable, allowing their skilled marketing team to easily manage and update content regularly. By building a modular design system on top of a core Squarespace theme, we ensured consistent branding while providing customization without disrupting the underlying structure—resulting in a user-friendly, visually engaging platform that supports ongoing growth and adaptability.
Capturing the Vibe Through Design
Using the branding provided by NWSL Boston, I focused on translating their visual identity into a digital experience that reflects their energy and professionalism. I ensured that the design was:
Bold and dynamic to resonate with their passionate fanbase.
Clean and functional to create an intuitive and engaging user experience.
On-brand with consistent use of color, typography, and imagery.
Building a Flexible, Modular Design System
Since the marketing team would be frequently updating the site, I prioritized flexibility. I designed a collection of responsive web page building blocks that could be easily assembled into full pages without the need for custom CSS tweaks. This modular system included:
Reusable components for hero sections, image galleries, text blocks, call-to-action areas, and more.
Designs optimized for both mobile and desktop experiences.
This integration not only accelerated the design phase but also ensured I had time to focus on the finer details of the user experience.
Leveraging AI Tools
To speed up and streamline the process, I incorporated instant.ai, an AI-powered tool, which allowed me to:
Generate layout options and explore creative ideas quickly.
Refine and test multiple iterations of responsive designs in less time.
This integration not only accelerated the design phase but also ensured I had time to focus on the finer details of the user experience.
Customizing the Shopify Theme
To further tailor the website, I took the opportunity to learn Liquid, Shopify's templating language. This enabled me to:
Customize key aspects of the Shopify theme to align with the design system.
Implement functional changes without compromising the theme's structure or creating maintenance challenges.
