All Glown Up! How We Made Over Spotify.Design

We use this website to amplify our design work and shine a lightweight on our designers. Our aim is to instigate a cycle of positivity: 1. Designers are happier after they’re acknowledged on a worldwide platform. 2. Potential Spotify band members usually tend to wish to be part of a crew of completely satisfied, acknowledged designers. 3. Repeat to infinity. So the positioning injects vitality into our present crew, and serves as a beacon to assist that crew develop. We need designers — whether or not they work at Spotify or not — to see it and assume “Hey, my work would look pretty good on there!”

Our dream is for Spotify.Design to be a wellspring of inventive inspiration for the worldwide design group. We hoped that refreshing the positioning with our playful new model would possibly take us far towards reaching our aim.

A fast notice on how this website works

Spotify.Design is extremely reliant on shut collaboration amongst our designers. Many of our key applications are developed in working teams led by our design ops crew, which implies designers are concerned in creating and delivering the options that influence their very own self-discipline. 

All the content material on Spotify.Design is sourced and supported by an Editorial Board working group made up of designers. They discover tales inside their groups and convey them to the board as potential items for the positioning. Approved concepts are became articles by the very designers who thought up the concepts within the first place, in live performance with their rep on the Editorial Board. The board modifications each six months and at present appears like this: 

We measure the positioning’s success not simply via the same old metrics of employer model progress and expertise acquisition. Instead, we’re extra concerned about inner pleasure; in elevating the profiles of our designers; and in serving to designers develop abilities similar to pitching concepts, writing, enhancing, and illustration. Also, we get tremendous psyched when somebody posts a newly printed Spotify.Design article on our Slack and other people react with heart-eyes emojis. Now THAT’S a metric.

The accomplice, the mega matrix, and the pandemic

Just like with the rebrand, we needed a co-conspirator to assist us carry this webchild into the world. After seeing their work on the Spotify Pet Playlists, we selected the award-winning Stink Studios London crew as our accomplice for the positioning redesign. They received us, we received them, and we rapidly set off to work.

We kicked off with a sequence of ideation workshops. The redesign was a chance to create a joyful pedestal on which to showcase our designers’ greatest work. And we needed designers to have their say about what pedestal traits they desired most. 

We rated the ensuing concepts on a mega matrix of newness, usefulness, feasibility, playfulness, and model relevance. The options with the best scores had been tucked right into a small treasure chest and brought away to be scoped. Here are among the website parts that got here out of the mega matrix and made it into the ultimate designs:

A brand new crew web page

To clarify how the design crew works; to allow us to wax philosophical on our completely different disciplines; and to function a portal to Spotify Jobs.

An on-line toolbox 

To share downloadable assets and create an open-source repository of design goodies that different organizations can dive into.

Assets from our design system, Encore 

To assist website guests navigate utilizing acquainted parts from the Spotify product: skip again, skip ahead, and (for editorial thrill-seekers) shuffle.

An audio content material hub

Because we’re Spotify 🙂

By this time, we’d had some apply gathering opinions, getting purchase in, and reaching log off with stakeholders. We’d realized to gather as many views as doable as early as doable, then set up a design reference group to carry us accountable. And we’d discovered a technique to carry our design leaders in on the proper moments, so they may give us suggestions the place it mattered most. 

Oh, after which the worldwide pandemic occurred. In March, all of Spotify transitioned to working remotely. And we discovered that accumulating concepts and suggestions asynchronously was truly extra fruitful than the classical technique of gathering individuals collectively to talk out loud. Perhaps as a result of it’s simpler to formulate your ideas with out the strain of others sitting there and watching you formulate mentioned ideas.

Building begins

Following the ideation workshops, we created these beloved artifacts cherished by designers the world over: consumer journeys and personas. Then, our good-smelling friends at Stink Studios constructed wireframes for the positioning. Over every week or so, the wireframes had been clarified and codified into design templates that met accessibility requirements. 

Next up, Stink Studios tapped into our new model’s playful DNA to develop some pleasant bits of movement and interplay. Just take a look at these easy strikes!

Using Figma’s prototyping talents, we moved from wireframes to practical UI rapidly. We discovered Stink Studio’s willingness to share our instruments helped immensely with visibility. Our design reference group might examine on the positioning progress and go away suggestions at any time when they needed. It’s our patented Swoop & Snoop™ method. 

We did a painstaking audit and recategorization of all our present content material as a result of we’d seen that guests had been hanging round on the homepage for ages, not sure of the place to go. So we labored up some new content material classes to enhance discoverability and get readers to their desired matters, stat!

It’s alive

When the brand new website was carried out, we shipped it internally first. We requested our designers to assessment it, making it clear there was nonetheless time to present suggestions, report bugs, and counsel new concepts. We clarified that, lest they had been frightened, this launch could be no mere Ship & Dip™ — which is what occurs while you unfurl a brand new venture after which, poof, disappear. Rather, we had been making a long-term funding in an evolving editorial vacation spot. Feedback poured in, and we thought-about this a optimistic signal that our crew cared and needed to really feel correctly represented.

After a couple of rounds of changeroos, updatesies, and fixaronis (apologies for the technical jargon), we had been able to take the positioning world. We handed property to our designers and gave ‘em the green light: Go show off the site!

Fast follow: Audio content hub

Remember we said that whole thing about making an “evolving editorial destination”? We weren’t kidding, as a result of our first iteration got here within the type of a quick observe two weeks after launch. We added a brand new hub to accommodate our Design-related audio content material — like playlists, podcasts, and different extremely listenable whatnot. Beyond creating a brand new web page, we collaborated with the Web SDK crew and used the Spotify For Developers API to make an superior built-in audio participant for Spotify.Design. 

The first hub resident is a playlist sequence known as ZONED. Conceived, developed, and branded by Tina Snow Le, senior artwork director on our Editorial Design crew and member of our Editorial Board, ZONED is a creatively centered sequence that highlights the sounds inspiring Spotify designers all over the world.

There will likely be extra follows of varied speeds, and extra new options. We’ve simply introduced a complete new crew of designers onto the Editorial Board, and a part of their remit is to push Spotify.Design ahead. 

Important issues we’ve realized

We’ll conclude this stroll sequel with our key takeaways from the previous six months of rebranding and redesigning. We hope they’re useful to anybody making a model and platform to symbolize a design group.

Take time to search out the appropriate companions

From Albin Holmqvist to Stink Studios to our inner companions, we had so many alternative vats of worthwhile information to dip into throughout this course of. We assume it’s essential to determine these partnerships earlier than you start working, so you are feeling assured which you can tackle any problem that flies at you. Branding and net design are crew sports activities.

Get everybody on the identical web page. Ahem, instruments. On the identical instruments.

We lucked out with timing right here, as a result of our Figma Ways of Working had been newly minted through the web site constructing course of. Figma was a useful device for onboarding Stink Studios, and it meant we didn’t have to fret about versioning, particular software program, or the ache of sending giant information forwards and backwards. The candy aid was palpable.

Embrace the quick observe

We had massive ambitions for the positioning, however knew we couldn’t do every part directly. So we waited to launch some options, guaranteeing we had totally thought via them earlier than foisting them upon the world.

Go for pleasure

We deliberately labored to make the method as pleasurable as doable for everybody. We hope our give attention to playfulness might be felt within the closing website design.

Designing for designers

The paradox of designing for designers is a narrative of its personal, actually. But, for now, listed below are some reflections:

• Designers are wonderful at figuring out alternatives and discovering errors you possibly can’t see since you’re just too near your venture. We discovered their opinions to be most impactful at the start after which on the finish of the design part. They despatched us in the appropriate course, then helped apply the ultimate polish.

• Be particular concerning the suggestions you need. If you’re 24 hours from launch and need bug fixes, not new function concepts, be sure you’re clear about that.

The gripping conclusion

Phew! So that’s how we made a brand new model, then made a brand new web site. It’s just the start, in fact. Watch this house for extra model and website updates, and for plenty of different tales about design at Spotify. Thank you for following alongside — it’s been a pleasure to share the journey with you.