Hey, it’s us again — your friendly Spotify Design redesigners. When last we spoke, we took you on a very special behind-the-files stroll through the development of the new brand for Spotify Design. Today, we’re embarking on the sequel to that stroll, so you can see how we applied the new brand to the new Spotify.Design website. Which is, like, the exact website you’re staring at.
We use this site to amplify our design work and shine a light on our designers. Our goal is to instigate a cycle of positivity: 1. Designers are happier when they’re recognized on a global platform. 2. Potential Spotify band members are more likely to want to join a team of happy, recognized designers. 3. Repeat to infinity. So the site injects energy into our current team, and serves as a beacon to help that team grow. We want designers — whether they work at Spotify or not — to see it and think “Hey, my work would look pretty good on there!”
Our dream is for Spotify.Design to be a wellspring of creative inspiration for the global design community. We hoped that refreshing the site with our playful new brand might take us some distance toward achieving our goal.
A quick note on how this site works
Spotify.Design is highly reliant on close collaboration among our designers. Many of our key programs are developed in working groups led by our design ops team, which means designers are involved in creating and delivering the solutions that impact their own discipline.
All the content on Spotify.Design is sourced and supported by an Editorial Board working group made up of designers. They find stories within their teams and bring them to the board as potential pieces for the site. Approved ideas are turned into articles by the very designers who thought up the ideas in the first place, in concert with their rep on the Editorial Board. The board changes every six months and currently looks like this:
Our roving reporters
We measure the site’s success not just through the usual metrics of employer brand growth and talent acquisition. Instead, we’re more interested in internal pride; in raising the profiles of our designers; and in helping designers develop skills such as pitching ideas, writing, editing, and illustration. Also, we get super psyched when someone posts a newly published Spotify.Design article on our Slack and people react with heart-eyes emojis. Now THAT’S a metric.
We’re more interested in internal pride; in raising the profiles of our designers; and in helping designers develop skills such as pitching ideas, writing, editing, and illustration.
The partner, the mega matrix, and the pandemic
Just like with the rebrand, we wanted a co-conspirator to help us bring this webchild into the world. After seeing their work on the Spotify Pet Playlists, we chose the award-winning Stink Studios London team as our partner for the site redesign. They got us, we got them, and we quickly set off to work.
We kicked off with a series of ideation workshops. The redesign was an opportunity to create a joyful pedestal on which to showcase our designers’ best work. And we wanted designers to have their say about what pedestal characteristics they desired most.
We rated the resulting ideas on a mega matrix of newness, usefulness, feasibility, playfulness, and brand relevance. The features with the highest scores were tucked into a small treasure chest and taken away to be scoped. Here are some of the site elements that came out of the mega matrix and made it into the final designs:
This is what happens when you turn ideas into a website.
By this time, we’d had some practice gathering opinions, getting buy in, and achieving sign off with stakeholders. We’d learned to collect as many perspectives as possible as early as possible, then establish a design reference group to hold us accountable. And we’d found a way to bring our design leaders in at the right moments, so they could give us feedback where it mattered most.
Oh, and then the global pandemic happened. In March, all of Spotify transitioned to working remotely. And we found that collecting ideas and feedback asynchronously was actually more fruitful than the classical method of gathering people together to speak out loud. Perhaps because it’s easier to formulate your thoughts without the pressure of others sitting there and watching you formulate said thoughts.
Building begins
Following the ideation workshops, we created those beloved artifacts cherished by designers the world over: user journeys and personas. Then, our good-smelling pals at Stink Studios built wireframes for the site. Over a week or so, the wireframes were clarified and codified into design templates that met accessibility standards.
Next up, Stink Studios tapped into our new brand’s playful DNA to develop some delightful bits of motion and interaction. Just look at those smooth moves!
It pops, it swings, it loads.
Using Figma’s prototyping abilities, we moved from wireframes to functional UI quickly. We found Stink Studio’s willingness to share our tools helped immensely with visibility. Our design reference group could check on the site progress and leave feedback whenever they wanted. It’s our patented Swoop & Snoop™ technique.
We did a painstaking audit and recategorization of all our existing content because we’d noticed that visitors were hanging around on the homepage for ages, unsure of where to go. So we worked up some new content categories to improve discoverability and get readers to their desired topics, stat!
Our design reference group could check on the site progress and leave feedback whenever they wanted. It’s our patented Swoop & Snoop™ technique.
It’s alive
When the new site was done, we shipped it internally first. We asked our designers to review it, making it clear there was still time to give feedback, report bugs, and suggest new ideas. We clarified that, lest they were worried, this launch would be no mere Ship & Dip™ — which is what happens when you unfurl a new project and then, poof, disappear. Rather, we were making a long-term investment in an evolving editorial destination. Feedback poured in, and we considered this a positive sign that our team cared and wanted to feel properly represented.
Welcome to the comment party!
After a few rounds of changeroos, updatesies, and fixaronis (apologies for the technical jargon), we were ready to take the site global. We passed assets to our designers and gave ‘em the green light: Go show off the site!
Remember we said that whole thing about making an “evolving editorial destination”? We weren’t kidding, because our first iteration came in the form of a fast follow two weeks after launch. We added a new hub to house our Design-related audio content — like playlists, podcasts, and other highly listenable whatnot. Beyond creating a new page, we collaborated with the Web SDK team and used the Spotify For Developers API to make an awesome built-in audio player for Spotify.Design.
The first hub resident is a playlist series called ZONED. Conceived, developed, and branded by Tina Snow Le, senior art director on our Editorial Design team and member of our Editorial Board, ZONED is a creatively focused series that highlights the sounds inspiring Spotify designers around the world.
There will be more follows of various speeds, and more new features. We’ve just brought a whole new crew of designers onto the Editorial Board, and part of their remit is to push Spotify.Design forward.
Beyond creating a new page, we collaborated with the Web SDK team and used the Spotify For Developers API to make an awesome built-in audio player for Spotify.Design.
Important things we’ve learned
We’ll conclude this stroll sequel with our key takeaways from the past six months of rebranding and redesigning. We hope they’re helpful to anyone creating a brand and platform to represent a design community.
Take time to find the right partners
From Albin Holmqvist to Stink Studios to our internal partners, we had so many different vats of valuable knowledge to dip into during this process. We think it’s crucial to establish these partnerships before you begin working, so you feel confident that you can take on any challenge that flies at you. Branding and web design are team sports.
Get everyone on the same page. Ahem, tools. On the same tools.
We lucked out with timing here, because our Figma Ways of Working were newly minted during the website building process. Figma was an invaluable tool for onboarding Stink Studios, and it meant we didn’t have to worry about versioning, special software, or the pain of sending large files back and forth. The sweet relief was palpable.
Embrace the fast follow
We had big ambitions for the site, but knew we couldn’t do everything at once. So we waited to launch some features, ensuring we had fully thought through them before foisting them upon the world.
Go for joy
We intentionally worked to make the process as pleasurable as possible for everyone. We hope our focus on playfulness can be felt in the final site design.
Designing for designers
The paradox of designing for designers is a story of its own, really. But, for now, here are some reflections:
Designers are amazing at identifying opportunities and finding errors you can’t see because you’re simply too close to your project. We found their opinions to be most impactful at the beginning and then at the end of the design phase. They sent us in the right direction, then helped apply the final polish.
Be specific about the feedback you want. If you’re 24 hours from launch and want bug fixes, not new feature ideas, make sure you’re clear about that.
Ask a designer to say whether their feedback is personal or objective, and to rate it on urgency and importance. That will help you prioritize the feedback.
If you don’t act on the feedback you get, explain why. Be respectful that busy people took time to share their ideas and knowledge with you.
The gripping conclusion
Phew! So that’s how we made a new brand, then made a new website. It’s just the beginning, of course. Watch this space for more brand and site updates, and for lots of other stories about design at Spotify. Thank you for following along — it’s been a pleasure to share the journey with you.
Credits
Nanci Veitch
Design Program Manager
Nanci leads culture and community programs for Spotify Design. In between bossing emoji quizzes, she chairs the Spotify.design Editorial Board with an iron fist in a velvet glove.
