My Dear Friends of Figma in Hi i’m carol chapman i’m a senior design manager at hvo max focusing on design systems governance and accessibility and i’m really happy to be here today and i’m jessica spiegel director of product design platforms ecosystem and data driven experiences also at hbo max and i’m also very excited to be here and we’re here today to tell you all.
About how you’re doing it wrong just kidding you’re totally not carol and i have a running joke about how doing things wrong is something that we just continually do but the truth of the matter is that every step on the path to where you are today was a necessary one and that’s something to celebrate today we’re going to talk to.
You about the lessons we’ve learned the lessons we’ve learned along the way maturing our design system and an ever-growing landscape of devices languages and user experiences but before we get started a little bit more about me and carol we’ve worked together for over 10 years partnering on a wide variety of products or projects.
Excuse me what’s nice about and products what’s nice about our relationship is that we complement each other’s skills in a way that keeps our work really balanced and today we bring that balance to our work on hbo max first i’m going to tell you a little bit more about carol she comes from a.
Background in visual communication design she brings a fresh set of eyes to the team she joined our team two years ago this month right next week oh happy anniversary thank you uh she thinks about what things need to be tomorrow and in my opinion she makes way too little food for a party jessica on the other hand comes from a.
Human-centered design and engineering background she’s a little bit more technical she has historical context from her many many many many many years at hbo and hbo max it’s not that many years it’s a lot of years she thinks about what it can be next year and in my opinion she makes way too.
Much food to illustrate through food we definitely have a different idea on what appropriate amount of food is i on one hand take a lust’s more view focusing on one entree at a time and jessica she uh likes to make sure that everyone goes home very very very full as full as they want to be it’s always.
Very delicious we bring different viewpoints and approaches to how we see and tackle work and because of that it creates a really nice balance so hbo max is an entertainment product with over 76 million subscribers in over 60 territories worldwide the products available on more than 25 different.
Devices with wildly differing capabilities working on a product of this scale is truly an exercise imbalance we have to balance speed and scale we have to balance innovation and learnability we have to balance the design system native device patterns and features we have to balance human-centered design.
And agile and we have to balance people and processes and personalities so many personalities but they’re all good personalities and balance is tricky because you really only notice it when it’s missing the work to maintain it is often invisible and super easy to look over.
The most important lesson that i’ve learned over my six years at hbo and hbo max which is not that many years and over my entire career really is that in-house design teams are in this constant balancing act successes are often incremental they’re spread across teams the backlog is always a mile long and processes always have room.
For improvement and this can make it feel like you’re always doing everything just a little bit wrong finding the beauty and wrong we’ve grown to embrace that feeling of wrong as opportunities opportunities to create balance that works for our team our product and our organization.
After all everything we’ve done has led us to where we are today tomorrow what’s right might be different and that’s okay we don’t judge any of our past choices we only learn from them they were exactly right at the time here are some of the questions that we started to ask ourselves along the way is it wrong to have a lean team.
Is it wrong to dream small and is it wrong to rebuild so is it wrong to be a lean team generally people will take as many resources as they’re offered the bigger the team the more important the work right absolutely but this can also lead to silos in the days before hbo max the legacy hbo.
Design team invested in a design systems team and they did everything right according to the best practices of the time i would have done exactly the same thing they formed a well-funded centralized team that got to work on the problem of creating that new system and that poor team was always playing catch-up they weren’t able to become.
Experts in every single feature while still having the perspective necessary to create a coherent system that worked across the mall they were frustrated the feature designers were frustrated everyone was frustrated so what ended up being right for us was creating a lean core team supplemented with a wide network that.
Goes across the entire design org so this story starts with a humble stool very original metaphor but ours is purple yeah uh so the way we think about collaboration now is as a partnership between the designers on the platforms team design systems and feature teams through regular ceremonies and touch points the.
Group comes together to create balance each designer contributing their own unique expertise so feature designers have a deep knowledge of the problem space design systems champions are experts in the system creating coherence across the product and platform designers ensure the experience feels at home on every.
Device we also chose an organizational structure where design systems lives within platforms this creates natural connection points where platforms designers and design systems are incredibly close making it more efficient to identify opportunities for closer reflection of the design system.
In code and carol and i both independently came to the conclusion that a network approach was the right way to scale the team she branded it way better than i did though as per usual i was saying that people should do tours of duty but she conceived of the design systems champions network guess which.
One people actually wanted to be a part of you know tours of duty just doesn’t sound that fun nobody wants to do that but seriously the federated approach to scaling the team was absolutely critical to success each team within the broader design organization has one or more champions that are honorary members of.
The team they represent their feature area and build out the components needed with the help of the figma wizardry of the core team and this partnership leads to knowledge sharing high quality components and a lot of fun so in this way the design system scales sustainably and and ends up having an outsized influence on the broader design.
Org and the team as a whole and roles and responsibilities may not be the most exciting topic in the world but they are absolutely essential rather than leaving it to each individual to have to figure out ad hoc who they need to talk to and what they need to do for every single project we’ve created collaborative swim lanes that define.
What each person is responsible for so platform designers are responsible for patterns used across devices like remote control patterns back stacking haptics and gestures and the documentation supporting them and then design systems are responsible for the fundamentals and elements libraries and their documentation.
And feature designers are responsible for feature specs creating some centralized templates for the broader team to use when they need to represent the feature and then everyone contributes to the feature component libraries creating the system over time growing and creating the system over time.
Most in-house organizations are highly matrixed which is corporate for a huge pain and there’s enough of a challenge figuring out who you need to talk to outside of design and we wanted to make it much easier to figure out who you need to collaborate with within design this approach means we all influence the.
Design system rather than using atomic terms our building blocks represent our shared ownership fundamentals are our foundation there are colors our type ramp grids elevations things like that are the design system pieces they are the components with a singular purpose.
That lends itself to multiple use cases these are items like buttons tiles text inputs and then features features are well they’re features good name thanks they have a singular use case and are often reused an example would be like our video player controls.
Working this wood this way design decisions flow back and forth helping to inform where the design system needs to expand it allows us to govern the components and how they’re being used without being prescriptive our methodology is designed to empower.
The collective there’s a pride in shared ownership working together platform and feature team thinking mixed with design systems collaboration we create our patterns and evolve our products we build we all build off each other so we’re all building it together.
So going back to our original question is it wrong to be a lean team no for us it was exactly right so is it wrong to dream small it’s all how you look at it and it’s all about balancing priorities aligning aspirations with capacity this is really important when you have a lean team.
Here’s an example i think most of us can relate to documentation documentation is perpetually under construction and we wanted that rich beautiful documentation site you know like the ones we’ve all seen out there in the world they’re so beautiful.
Live code who doesn’t want it it’s beautiful but was it the right place for us to put our effort not right now once we gave ourselves leniency on our aspirations around our living style guide it took the pressure off of us and gave us time to focus on the types of.
Information teammates could use right now and that came in the form of clean clear component specs we put our efforts towards building a templatized specs system this provides the answers our engineering and product partners needed inclusive of red lines behavior tokens.
Variations accessibility motion and then text considerations you really got those aspirations under control we do yeah well our specs are a deep dive we needed a high level overview our sticker sheets became our one-stop shop to see what was currently available.
And they’re gorgeous thank you and figment of this and figma descriptions became our in the moment guidance meeting designers where they are we use descriptions as a confidence tool helping designers pinpoint the correct component through library identification.
Brief but clear descriptions and any associated tags this is really popular and used quite often our specs sticker sheets and figma descriptions all cross-linked to each other this allows for a more inclusive onboarding experience depending on an individual’s learning style.
Everyone retains information in different ways and we wanted to make sure that we’re accommodating all the different learning styles so important by shift by shifting our priorities from our documentation we were able to put more time into our automated tools like our content curator plugin.
Content curator provides access to key art and metadata from the entire hbo max catalog while giving feature designers the ability to populate their designs with real world content helping with productivity was definitely our bigger need and as for that rich beautiful documentation site.
We’ll get there one day but it might take a little bit longer and that’s okay and i was using content curator for this presentation it is fantastic it really is a good tool so is it wrong to rebuild we had to figure out how to build in time periodically to take a big step back and reevaluate what we actually.
Need and to make sure that we’re all still happy with where we’re going perspective is everything stepping back to step forward while our original hbo max design system was working the library held everything for all devices making it a little bit bloated the core design system team took a step.
Back we audited everything we currently had put out surveys we scheduled interviews and we really cast a wide net to identify pain points the consensus was always the same the system was starting to get too complex and carol’s being super kind we were building the plane as we were flying it.
After we switched from sketch to figma in 2019 so it was very complex it was what it needed to be at the time but that’s true we determined that splitting apart the libraries would give us the opportunity to simplify and scale smaller more manageable libraries would allow us to be more pinpointed in our.
Approach we broke up our libraries into ctv which is connected televisions set-top boxes and game consoles and dmx which is desktop mobile experiences each of these has their own fundamentals elements and feature components we looked for alignment everywhere we.
Could matching up nomenclature variations and strategies for both while flexing for the needs of the device type a bulk of our time was spent honing our fundamentals re-examining our grids and spacing typewrap colors and token strategy we work on both high and low-powered.
Devices it was important to us that our fundamental definitions included fallbacks high-powered devices can handle gradients while a low-power device may not we also wanted to make it easier for designers to spec.
We created token components for this this has been a great time saver and the visual representation within them has been a helpful confidence tool and they’re very cute they are really really cute i mean look at them very cute by refactoring our thinking from our past work it prepared us for how we could scale in the future.
And speaking of scaling for the future knowing how to predict it can obviously be a super helpful skill and everyone who knows me knows that i love to wildly speculate about what might happen and how i might leverage it to get what i want from my own personal backlog being curious about the broader organization business priorities and how.
Our tech stack works can at times make me an above average future predictor when you stay curious sometimes priorities convert sometimes priorities converge and allow for massive leaps forward if you’re intentional about your investment and come to the table prepared one thing that’s been on my personal.
Backlog for many many years was redesigning our pages and components to be truly responsive not just to viewport size or configuration but responsive to various types of input like pen mouse or touch to meet the evolving device ecosystem so about two years ago it was going to become a necessity for the business to.
Invest in this they just didn’t know it yet i didn’t know when it was going to happen but there was no way i wasn’t going to make that bet and be ready for it when it finally did so we started about a year in advance of any commitment from engineering and by doing that we were able to make the space for carroll’s team to do the.
Detailed work and pressure test the responsive system with extensive prototyping when the business did finally decide to invest in re-platforming our mobile and web apps we were able to work closely with our engineering partners to build the responsive design system into the very core of the platform.
Sometimes rebuilding with a clean slate is just what you need so the moral of the story embrace your wrong because you never know where it may lead for us it was breaking down silos through collaborative swim lanes empowering the collective to create shared influence building in the time to re-examine our.
Priorities re-evaluating the design system for future scale and most importantly celebrating every single step in the journey because we love where it led us and it led us to slate slate is our new design system in refactoring we built off the.
Learnings from the past leading us to how we think of the future and what our design system means to us as part of a collaborative ecosystem and to introduce you to slate we created a video and we’re excited to show all of you first it’s not a stroke or colors and fills it’s shaping pathways with inclusive.
Patterns building room for connections it’s not a font or typography and text treatments it’s a global invitation opening new worlds it’s not a grid or tiles and trays it’s adventure and laughter.
It’s horror and comfort it’s celebrating fandom with the freedom to enjoy content on your terms thoughtfully it sets a stage synchronizing.
And harmonizing immersing audiences into a moment slate behind the scenes it takes a village while jessica and i are here talking about the design system today we would be remiss if we didn’t mention that.
Slate is a labor of love from a talented group of really really smart thinkers a giant thank you goes out to evan delaney michael dodian justina and the many many others who have helped and who have helped contribute to its evolution and still are contributing to its evolution today.
And a huge thank you to carol for her leadership thanks yeah so thank you all so much for letting us share our journey with you it’s really been a privilege i’m jessica spiegel again you can find me on all of the social networks as at jessica spiegel fair warning it is mostly baby content.
Although he is an objectively cute kid and i’m carol chapman and you can find me on pretty much none of the networks that’s not true you can find carol and her very cute dogs on instagram at samson lewis thank you guys so much thank you you
In this session, Carol and Jessica will walk through what worked (and didn’t!) for the team at HBO Max, and what we learned …
Figma Official Channel,doing,wrong,carol,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, product:none, audience:designer, language:english, format:standard, produced_by:marketing, theme:other, event:config, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,