Bridging Design and Development: How Mews Is Scaling Their Design System with Supernova

Mews, a trailblazer in the hospitality software sector, faced a formidable challenge as they scaled: evolving their design system to keep pace with their rapid expansion and diversifying product portfolio. The design system team at Mews is tasked to solve this problem by enabling the creation of high-quality, scalable products with a focus on efficiency and excellent end-user experience. To learn more, we chatted with Laura Fehre, Design Manager, and Riccardo Erra, Senior Front-end Dev, both working on the Mews Design System.

"Our journey was about finding a scalable solution that could grow and adapt with us, something our existing tools weren't equipped to handle," Laura reflects. This quest for scalability set Mews on the path to Supernova, a decision that would redefine their approach to building software.

Confronting the limitations

The initial iteration of Mews' design system started in 2017 with Mews UI. It emerged organically as the team sought efficiency by consolidating UI components in one workspace. Then in 2020, they launched Optimus — Mews' first official design system, built with zeroheight. However, as the team and product scaled, Optimus caused more issues than solved them, which led the team to rethink its strategy.

"We decided to shift away from zeroheight because it felt a bit too rigid and inflexible for our needs. Collaborating with the whole team became a bit challenging, and we wanted a platform that offered more adaptability." — Laura Fehre, Design Manager

"We decided to shift away from zeroheight because it felt a bit too rigid and inflexible for our needs. Collaborating with the whole team became a bit challenging, and we wanted a platform that offered more adaptability," explains Laura. The team wanted to embrace a platform that aligns with their dynamic goals and provides the freedom they crave in their work.

Embracing change and transitioning to Supernova

The transition to Supernova marked a pivotal shift in Mews’ product development. With a new round of funding, a huge expansion in scope, and more team members, the newly launched Mews Design System (MDS) needed to surpass its predecessors. Unlike their previous platform providers, Supernova offered an unprecedented level of user-friendliness and flexibility.

"Transitioning to Supernova was a revelation. Its intuitive design and versatile functionality made the move surprisingly smooth. We were prepared for a steep learning curve, but it turned out to be a smooth glide," Laura recounts. This seamless transition was key in maintaining momentum, ensuring that the switch from zeroheight to Supernova did not disrupt their ongoing projects.

"Transitioning to Supernova was a revelation. Its intuitive design and versatile functionality made the move surprisingly smooth. We were prepared for a steep learning curve, but it turned out to be a smooth glide." — Laura Fehre, Design Manager

Building their design system in Supernova enabled the team to rethink how they solve problems and structure their design system. "As we delved into Supernova, we discovered opportunities to not just replicate our existing system, but to enhance and optimize it. We were able to think more critically about our design choices," Riccardo explains. This period of development was marked by experimentation and collaboration, as the team worked to leverage Supernova’s capabilities to its fullest potential.

Fusing design and development

The biggest impact Supernova had on Mews was connecting design and development together. As Riccardo puts it, “Supernova was clearly made considering all the types of people working on the design systems, not just designers or stakeholders, but also developers.”

Using Supernova's robust toolset, the team was able to make Mews Design System an integrated source of truth for their entire workflow. “With the CLI, we now have documentation, code, and Figma always in sync all the time without us doing anything,” shares Riccardo. Having an up-to-date documentation source hosting all their needs was a game-changer for engineers, especially those that lost a bit of trust in the previous iteration of the design system.

A leap in productivity and efficiency

After moving to Supernova and working with it for less than a year, the Mews team has started to see the fruits of their labor. For starters, the boost in efficiency was a game-changer. Laura recalls, "The time saved is incredible — from lightning-fast documentation creation […] to the magic of automating token and component health status with just one click.”

"The time saved is incredible — from lightning-fast documentation creation […] to the magic of automating token and component health status with just one click.” — Laura Fehre, Design Manager

While they're still migrating some components and legacy documentation pages, the team already sees productivity gains from product teams using Supernova. As an example, their commonly used table component, would typically take 3-4 weeks for developers to implement. Now with Supernova, Laura shares, “Once the component was available, various product teams were able to start using the new table in production with just a couple of days of work.”

The team also saw a noticeable improvement in onboarding time, both with members using Supernova and consumers of MDS. Riccardo shares, “The very good documentation that Supernova offered, specifically the parts more tailored towards developers, really helped the team get up to speed in no time.”

Measuring success for Mews

For their own internal processes, the Mews team was tracking different metrics and also launching a yearly survey to help them make informed decisions around their design system. These metrics include:

• User Satiation Score
• Component Detachment Rate
• Design System Contribution
• Design System Adoption Rate

Using a combination of tools, including scripts, their annual survey, and Figma's tooling, they're able to keep track of these metrics.

With this year being the first iteration of their survey in its present format, they couldn't compare year-over-year improvements, but they wanted to share some honest numbers, as they call them, to encourage other teams to be open about their metrics.

Scaling into the future

Saving time for both design and engineering also meant that the team could spend more time focusing on even more advancements in their design system. With their first numbers on the board, the team knows now where improvements need to be made and how to get there.

“Last year was about setting the foundations, but this year, the focus is on spreading the word on what we have — with Supernova as our megaphone.” — Riccardo Erra, Senior Front-end Dev

With exciting updates on the roadmap, including multi-brand support, deeper automation, and AI integrations, there’s much more to come from the Mews Design System. The best part is that you can keep track for yourself — MDS is public for anyone to access. The team is keen on growing not only their design system but also the industry in general. Find out how Supernova can help your team tailor a design system and help them scale by scheduling a demo with us.