National Women’s Soccer League Boston
Summary
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.
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.
Challenges
To evaluate the current app, I signed up for a free educator account with the help of the Brilliant team. I navigated the existing flow and screens independently, placing myself in the mindset of an educator accessing the platform for the first time.
My first-time user experience aligned closely with feedback the Brilliant team received from educators, highlighting several key pain points:
Brand Integration.
Bring the team's new branding to life on the web while maintaining consistency across all touchpoints.
Shopify Customization.
Adapt the Shopify theme to fit the team's needs without frequent tweaks to the underlying CSS.
Flexible Design System.
Develop modular, responsive designs that the marketing team could use as building blocks for future updates.
Tools and Technology.
Integrate AI tools like instant.ai to optimize workflows and ensure efficiency in both design and implementation. about events is through email announcements from the Brilliant team.
My Approach
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.
The Result
The final product is a vibrant, user-friendly website that:
Reflects NWSL Boston's branding and captures their unique energy.
Provides the marketing team with flexible, responsive building blocks for future content updates.
Seamlessly integrates into Shopify, balancing customization and long-term maintainability.
Key Takeaways
Modular Design Systems.
Creating reusable building blocks empowered the team to manage updates independently without sacrificing design quality.
AI Integration.
Tools like instant.ai can significantly enhance efficiency in design exploration and iteration.
Continuous Learning.
Learning Liquid code allowed me to deliver a more customized and robust Shopify solution, strengthening my technical toolkit.
Conclusion
Designing NWSL Boston's new website was an exciting challenge that required a balance of creative vision, technical implementation, and flexibility for ongoing use. By combining branding expertise, modular design thinking, and modern tools, I delivered a solution that is visually striking, functional, and future-proof.
Other Projects
Product Design • Responsive SaaS
Enhancing the educator experience with Brilliant for Educators.
Illustration • Technical Design
Customize your avatar within the app, by selecting from dozens of avatar options, all custom created.
UX • Content Creation • Marketing Design
Branding and content, improving the website’s performance in both loading and visitors by 32% on the first month by studying analytics and conversion rates