Building a Scalable & Modular Website for Cosm
2023
Project Overview
Cosm is leading the way in creating immersive environments that celebrate sports, art, and music. By leveraging innovative technology, it turns moments into unforgettable experiences for fans.
As Cosm’s audience expanded, the website had to evolve into a more flexible and scalable platform. The redesign incorporated modular components, responsive layouts, and intuitive navigation, allowing users to easily access content while preserving a cohesive and visually captivating brand identity.
My Role
Product Designer
Collaborators
Ethan Paulson, Director of Product Design
Marcus Valverde, Senior Software Engineer
Mike Schiro, Web Product Manager
The goal of this project was to evolve Cosm’s website from a pre-launch marketing site into a fully functional digital hub that could support ticketing, event updates, and content discovery. As the brand’s popularity grew, the website needed to match the energy of the venue, remaining visually engaging while offering a seamless, user-friendly experience. By collaborating with stakeholders and developers, we created a site that was both scalable and dynamic, ensuring users could effortlessly find key content.
Defining Core Design Features
I collaborated closely with product and marketing teams to identify the website’s core needs, analyzing user behavior, content strategy, and business objectives to shape an effective redesign. Together, we defined key goals to focus on:
- Creating reusable module components to empower teams to build new pages without relying heavily on developers.
- Aligning the site with a newly developed brand book to establish consistency across all digital touchpoints.
- Designing a navigation system that prioritized event discovery and ticket purchasing.
Overall this redesign was about empowering teams to scale content effortlessly, improving SEO to boost visibility, and delivering a smooth, engaging experience for users.
01 Establishing a Modular Design System
To address these challenges, we developed a scalable design system that balanced modularity with creative flexibility. Rather than designing each page individually, we built a system of reusable components that empowered marketing, content, and product teams to create pages on demand while maintaining design consistency.
This system was structured around adaptable building blocks - banners, CTAs, content sections, and headers - designed with responsive breakpoints in mind. This ensured a seamless experience across devices while allowing flexibility to meet various content and business needs.
02 Balancing Modularity with Customization
While modularity enhanced efficiency, we also prioritized custom-designed moments for key sections of the site to create standout visual experiences that reflected Cosm’s brand identity. To achieve this, we combined structured templates with visually rich layouts for interactive elements and special features. Prototyping and motion design were integrated into certain components to enhance user experience, ensuring smooth transitions and dynamic visuals.
03 Enhancing Site Navigation for Clear User Journeys
The original navigation was education-focused, but with events becoming the priority, a shift was needed. I worked with the product and design teams to analyze the existing site map, identify pain points such as dead links, missing pages, and content better suited for other platforms.
With a clear understanding of user needs and business goals, the product design team redesigned the site’s navigation to align with event-driven interactions. This included:
- Consolidating educational resources into a unified section about venues, allowing for a more prominent events section.
- Prioritized ticket purchasing by introducing a visually striking button, ensuring users could quickly access events to make ticket purchases.
- Introducing a profile section so users could quickly access their information and tickets from a web application.
The redesigned website significantly improved how users interacted with content and navigated the site. By streamlining the navigation, we created a more intuitive structure that made it easier for users to discover events, purchase tickets, and manage their profiles. The refined site map and prioritized actions simplified the overall journey, leading to increased engagement and satisfaction. Additionally, the use of modular components enabled scalable page creation, ensuring long-term flexibility and growth.
With the foundation in place, the next phase focuses on continuous improvements based on real user feedback:
- User-testing and performance tracking to refine the websites information architecture, navigation and usability.
- Additional interactive elements to enhance user engagement across key pages.
- Expanding the design system to other Cosm platforms for a unified brand experience.
This project was a testament to how a thoughtful design system can drive efficiency, maintain brand integrity, and create engaging digital experiences that grow with the company.