Extreme rebranding at Deezer

Only 3 months to rebrand the whole Deezer application, how do we do that?
1 year ago, we presented our Design System migration to Compose, we didn't realize we would face such a challenge right after.
Extreme rebranding, 3 months to change it all: challenge accepted!

In this talk we are presenting the birth of the new Deezer brand identity, and how we managed to integrate it in a record time.

Transcript

1. Rebranding de l’extrême 3 mois pour tout changer ! Jean-Baptiste Vincey Julie Gléonnec 25/04/2024
2. Jean-Baptiste Vincey Julie Gléonnec @jbvincey julie.gleonnec @juliegleonnec
3. Android Makers 2023
4. • Find our full video presentation at Android Makers 2023 Design System at Deezer
5. New challenge Rebrand the application ! Due date: 7th November Accept In 3 months, really ? Challenge Accepted
6. Rebranding motivations • Rejuvenate Deezer image in the eyes of 18-25yo • Brand new positioning to be distinguishable • Commitment reinforcement towards fans, artists and partners • Graphical identity stronger
7. Once upon a time…
8. 3rd July D-127
9. Application inventory No idea where we're going at that time. What we have: • Many layers of architecture and design updates • Old colors, styles, icons and themes, not from design system • Magic values here and there Final design won’t be available before September • Deezer logo everywhere
10. What would you do? Run! Go on vacation Rewrite the whole application in Compose in 2 months Rebrand the app in a Barbie theme
11. app
12. Let's change to a pink app with Comic Sans MS font and a generic icon app
13. Restructuring Design System foundations Improving consistency across token structure: 1. Core tokens • ColorCore.Red100 = Color(0xFFF44336) • ScaleCore.X0_125 = 2.dp 2. Semantic tokens • ColorSemantics.background.primary.default • ScaleSemantics.radius.xs
14. Restructuring Design System foundations Before After Adding more contextualized possibilities
15. Meanwhile… Design team is working hard! • Powered by Koto Studio • Translate sketches with our technical constraints • App sketches, website, communications…
16. 3rd July D-127
17. 10th August D-83
18. Ideation • Still no validated designs BUT • Several explorations presented • Designers have many ideas • They want to assess feasibility
19. How to proceed? Join others in holidays Begin implementation Create POCs Answer D
20. How to proceed? Join others in holidays Begin implementation Create POCs Answer D
21. Ideation: header needs
22. Ideation: header POC
23. Ideation: floating miniplayer needs
24. Ideation: floating miniplayer POC
25. Ideation: floating miniplayer integration State 1 State 3 ✨ State 2
26. 10th August D-83
27. 31st August D-69
28. Pre-mortem What could go wrong? Context: • Design expected for tomorrow • App must be released on November 7th at 7pm • No beta possible (usually 2 weeks of beta) • No progressive rollout
29. What could go wrong? Scope / priority changing on the run Big rush until the last minute Designs are too ambitious Assets (icons / logo) not ready on time
30. Find the matching action for each risk Prioritize assets and deliver by batch Management to commit on scope / priority Do not plan new development on last sprint Propose alternatives / tradeoffs technically simpler ? ? ? ? Scope / priority changing on the run Big rush until the last minute Designs are too ambitious Assets (icons / logo) not ready on time
31. Find the matching action for each risk → → → → Prioritize assets and deliver by batch Management to commit on scope / priority Do not plan new development on last sprint Propose alternatives / tradeoffs technically simpler Scope / priority changing on the run Big rush until the last minute Designs are too ambitious Assets (icons / logo) not ready on time
32. 31st August D-69
33. 1st September D-68
34. We have designs!
35. Key components to be migrated Favorite tab Header Tokens Buttons Icons and logo Let’s prioritize!
36. Let’s prioritize! Priority + - Tokens Icons and logo Buttons Header Favorite tab
37. Scrum of Scrum • 1 representative per stack to collect and dispatch information • Standard scrum rituals • No meetings for devs Methodology Reinforcement from other teams
38. Team spirit Product, design, tech teams : All for One ! • Common goal • Alignment on priorities Let’s put a little water in the wine • Continuous communication • More fl exibility • More autonomy and initiatives
39. Testing flow Merge fi rst Feedbacks channel Delivery every day with Firebase distribution QA by batch + employees tests
40. Dedicated tools to experiment some changes Technical tools Ex : our cover colour picking
41. //Composable @Composable fun TempoButton(…) {…} Integrate both in Compose & XML //Custom View class TempoButtonView(…) : AbstractComposeView() { @Composable override fun Content() { TempoTheme { TempoButton(…) } } } //Usage in XML layouts <com.deezer.tempo.buttons.TempoButtonView android:id=“@+id/button" …
42. Delivery strategy • Code freeze 2 weeks ahead of D-Day Managed publishing Deploy November 7th at 4’ • Prepare a hot fi x version to submit on D-Day+1 Balance between risk/value
43. 1st September D-68
44. 7th November D-Day
45. D-Day: 7th of November • Mobile apps are live! • Deezer Drop event 4pm 7pm
46. D-Day: Backstage On site duty • Frontend go live • Update of images and editorial contents • CRM campaign to encourage apps update Monitoring • Vitals • Crashlytics
47. D-Day: Backstage Thanks monitoring tools 🙏
48. 7th November D-Day
49. 22nd November D+15
50. After: public community • Advertising campaign • Social networks (and their haters!)
51. Store rates Average ratings Rating distribution
52. Impact on customers • Increase of customer base • Positive impact on brand consideration Impacts on product Impacts on installations
53. Takeaways
54. Takeaways • Design System, Design System, Design System • Deliver technical updates in advance (player / tokens structure) • Anticipate what might go wrong with pre-mortem • Prioritize to maximize the impact • Adapt process (e.g. scrum of scrum, give autonomy to propose alternatives) • Deliver continuously to get early feedback loop • Rely on monitoring tools and follow reactions
55. To go further: Podcast: “Dans les coulisses d’un rebranding”
56. Thanks!