Featured project

ROLE
Design System Lead
PERIOD
Dec 2020 - Oct 2023

A bit of

background

Soundcloud revamped its outdated codebase to accelerate product development by adopting a design system.

Concurrently, the company underwent a cosmetic makeover, outsourcing an end-to-end design to an independent agency.

My journey with Soundcloud began when most designs were already prepared and development for both Android and iOS apps was underway.

My role

Oversee Design Strategy

Lead the development and execution of a cohesive design vision across products.

Process Optimization

Streamline design workflows to enhance efficiency and output quality.

Cross-Functional Collaboration

Foster strong relationships with engineering, product, and design teams to ensure design alignment and culture.

Performance Metrics

Monitor and report on design KPIs, driving continuous improvement and innovation.

Cleanup & tooling

One of the first steps was to move from Sketch to Figma and reconstruct everything. We did that to enhance collaboration and streamline our workflow.

This transition not only improved efficiency and collaboration, but also provided a more user-friendly and cohesive experience for the design, product and engineering teams.

I've led the creation and standardisation of Soundcloud's component library, which forms the bedrock of our design system. This includes defining design tokens for typography, colors, and grids, as well as establishing processes, documentation, and guidelines.

Created resources

Create resources

We created design resources that streamlined processes, improved output quality, and unified our team around a cohesive design language.

We created design resources that streamlined processes, improved output quality, and unified our team around a cohesive design language.

Extended support

Different Platforms, screen sizes and inputs methods. My responsibilities included deploying the design language across native apps and, later on, extending it to responsive web and other platforms, while ensuring its integration into various team workflows.

Different Platforms, screen sizes and inputs methods. My responsibilities included deploying the design language across native apps and, later on, extending it to responsive web and other platforms, while ensuring its integration into various team workflows.

Improved workflows

We leveraged feedback from designers, engineers and PMs to enhance our workflow through custom-made plugins tailored to our team's specific needs. These plugins have significantly reduced manual work and accelerated our pace.

We leveraged feedback from designers, engineers and PMs to enhance our workflow through custom-made plugins tailored to our team's specific needs. These plugins have significantly reduced manual work and accelerated our pace.

In the example above I demonstrate our in-house plugin to populate designs with real data from real Soundcloud users and playlists.

Light & dark mode, out of the box

Here's another example of a plugin that we loved creating and using. It allows us to switch our designs from light mode to dark mode (and vice versa) with the click of a button.

In this example I demonstrate our in-house plugin to convert our designs into dark mode with 1 click.

Craft boost

Together with the design team, we invested time in training sessions we fondly called "Figma Parties". These collaborative events tackled various challenges and proved invaluable in getting the team up to speed on leveraging our new tools and system.

Getting adoption and support

As the design team adapted to our new system, I also engaged closely with engineering and product teams to educate and involve them. Evangelising the system's benefits generated momentum, easing its rollout across engineering teams. This close-knit collaboration facilitated smoother communication, feedback collection, and cross-functional synergy.

Managing stakeholders

The design system team had a key position when trying to find the right balance that will affect roadmaps, planning, and strategic direction that the business needs to drive forward.

By fostering ongoing communication and aligning requirements with the management and strategic decision makers, we've charted a clear path forward that ensures our design system remains reliable, effective, and aligned with the evolving needs of our users and the company as a whole.

Conclusion

Conclusion

Language

We harmonised our user experience through a single language. Connecting all of the Soundcloud universe.

Tools

We provided our consumers with the tools and resources to access and understand this language.

People

We fostered collaboration, bringing together the right people, at the right time, giving teams clarity and means to evolve our design language.

Working at Soundcloud was an incredibly rewarding experience that combined fun with invaluable learning.

Reflecting on our journey, I'm proud of what we've achieved - both for the future of Soundcloud and the success of the great team members I’ve worked with.

Thank you!

Thank you!