My Dear Friends of Figma in Foreign the alleged start to my design career was photoshopping report cards for my friends but as they said I’m Taylor and I’m currently the Design Systems.
Lead at hologram playing a hybrid product manager and lead designer role for the dimension design system I’m here today to talk to you about building a stronger connection between you and your would-be or could be consumers to try and help you establish early evangelists for your new current or.
Evolving Design Systems program the hard part about finding these enthusiastic Advocates is that a lot of folks don’t really understand our work or are just starting out and think the day-to-day looks a lot like this 50 design and code time 10 maybe writing documentation 15 responding to emails at slack 25 meetings and some of this is.
Accurate but in reality it usually ends up a little bit more like this about 25 doing design in code right so there’s still time for those things 15 writing dock 15 email and meetings uh email slack 15 meetings 20 meetings about those meetings five percent waiting for those meetings to start or the other one’s running over.
And then usually about five percent of panic in between or put differently there’s the things our consumers leaders bosses and managers see our consumer facing deliverables right the top of the iceberg if you will and then there’s all the things that we do simply.
To enable the delivery and stability of those more visible things the part of the iceberg that’s under the water right things like communication strategy consumer support head count planning cross-org collaboration contribution model road map planning adoption tracking Road chosen demos and the list goes on.
And there’s also all that stuff that never sees the light of day right the deep ocean of best practices debates about Corner radius changes we like to make that are well above our pay grades Etc but I’m not here to vent about those things this is the stuff I want to talk about.
Today the Unseen stuff that makes a systems program successful a lot of this work can’t happen out in the open and because of that we’re often seen as the design police or keepers of the code or that team that’s siled away making things we can’t use and while yes many of the decisions we.
Make or the things we produce often inform the choices of others that are many abstraction layers away from us it shouldn’t feel like our work is being done in some sort of gated Ivory Tower there are many ways to address this communication gap or cut it off before it becomes a problem in the first place using a sentiment analysis activity to.
Translate actual verbatims from your current or would-be consumers into your roadmap and a list of assurances that leadership your consumers and whoever will be working on the system can continually reference is one of the many mechanisms you can use to ensure that what you’re building has your end users in sight.
Ties system goals to business needs and establishes a working agreement that everyone can feel confident in while a lot of what I’m talking to today will be framed from the perspective of the role I play at hologram this kind of hybrid situation all of it can be abstracted for use if Your Design Systems team of one.
You’re actively working to establish a more formal program at your company or Institution you’re joining an organization that already has an established system or systems team or you’re already on a systems team doing or doing systems work and are looking to.
Harden that connection between you and your consumers I’m gonna run through five main sections of this presentation section one we’ll be establishing a subjective Baseline section two identifying key players and potential activity participants.
Section three running an activity I call hafna section four Translating that data and section five building your learnings presentation and then at the end of this I’ll leave you with a bunch of resources so that you can do all this on your own so let’s Dive Right In.
Section one establishing a subjective Baseline no matter which of the scenarios I just listed matches your current role everything starts with an analysis designers looking at any shared libraries Engineers digging into the code someone look logging and looking at how Communications are being handled.
Where documentation exists if at all and how consuming teams should would or could interact with the folks that are maintaining all those different things now to be clear it’s completely fine if during this activity or even before you begin you start to make note of things that simply don’t exist right or obvious.
Areas of improvement or current problems You observe for example our team doesn’t have documentation right or there’s currently no shared code or design asset or we don’t have a dump dedicated resources no matter what it is capture it write it down and then as the owner lead or core.
Contributor of this particular work take your best guess at some deliverables Milestones or goals that might fill the gaps you’ve identified write them all down no matter how ambitious or five years away they feel you’ll validate which items are realistic needed or unneeded for your particular organization at a later step.
Give yourself the time and the space to dream big and what you want to achieve for this work stream and if it’s helpful you can tag each of these terms with either near-term long-term stretch goal or even like I did bucket them by phases this exercise will help you curate a subjective Baseline.
Think of it as an opinionated current state analysis we’ll come back to this audit later section two identify your key players and potential activity participants there are a few levels to this process of identification and they’re not really in any particular order but you should.
Be able to identify a your senior leadership the ones who ultimately determine the lifespan of your program B your consumer groups the teams individuals departments products depart departments already said that would be your users or are your current users see the key players and influencers.
Within that group right the discipline leads whether by title or by presence any relevant managers product owners project managers Etc D the ones who tend to be overlooked and some organizations arbitrary levels of seniority or politics sometimes silence some of those who are more junior or introverted right and it’s important to.
Give them space as well and E you’re fans right the folks that already get it they understand what we’re doing they understand the work they’re championing it even if they don’t know all the nitty-gritty the ones that are in your corner and it’s okay if an individual happens to fit in multiple groups that’s fine.
But this delineation will be helpful later and to be clear this isn’t a list that you need to share out or circulate in any way the purpose it serves is like a roster of folks that you want to keep in touch with keep informed or check with validation or sometimes take their feedback with a grain of salt.
I find it helpful to also label these individuals by two categories where they sit in the business could be Team level business unit Department Etc whatever makes sense for your organization and more importantly for the sake of this activity by discipline or expertise I.E are they a designer or an engineer are they a people manager or.
A product manager Etc sometimes the business context lens the first one isn’t very clear easy to suss out especially if you’re new to an organization a team or a business unit but don’t stress too much if you aren’t able to cleanly map each person to one of these descriptors you can always.
Update this later it’s a private list after all it is helpful though to determine the latter their expertise and discipline for the activity itself and don’t get too caught up on where to list these individuals either want to use a fig Jam mind map great would it be easier or faster use Excel and leverage.
Sorting and filtering cool is either route seemingly too complicated a Word document will be just fine once you’ve got your Baseline audit and your key players list it’s time to run the activity itself section three running the hafna activity this is where the fun begins.
Now don’t worry too much about taking detailed notes for this section at the end of the presentation I’ll share a few resources that’ll walk you through the instructions and provide you with a template to start let me explain the acronym stands for hopes fears working not working which represents the four.
Categories information you’ll be collecting as a facilitator of this exercise remember that key player list you made from section two this is where it comes in handy I found the most success by setting up a few separate sessions of this activity specifically.
One per identified discipline or expertise others who I’ve shared this with have had more some less but when using this particular strategy at hologram it meant five sessions one for the front end Engineers one for the product designers one for brand Studio one with the engineering managers and the last one.
With the product managers themselves a key consideration here having discipline specific sessions makes sure that the right level of depth or detail is expressed in the comments you’ll be capturing it also divorces the natural groupings that sometimes folks cling to about you know which team they’re with or if they’re managers in the room.
You can get really Nerdy with your designers engineers and stay high level with your managers or vice versa it also helps to ensure that the folks in each group are free to use the words and language that others understand rather than having to Define terminology or spend time explaining their responses during the session itself.
So book one 45-minute session per group you plan to meet with and I recommend trying to keep the group to about 15 people or less if possible if you need to have separate sessions or bring in someone to help you facilitate Zoom breakout sessions to facilitate with a larger group do whatever you need.
To do the timing is also relatively flexible but I found that 45 minutes gave me enough time to facilitate gather feedback live have short discussion if needed and leave time for here’s what comes next kind of content once your sessions are on the calendar you’re ready to host the activity.
In the template file you’ll see a very simple four quadrant layout the top two being hopes and fears and the bottom two being working and not working the four quadrants together will paint a holistic picture of Design Systems at your organization the top two being a focus on the hopes and fears of the future State while the.
Bottom are a recording of its working and not working as of today as part of my intro to these sessions I like to explain something to the effect that this is meant to be a safe space right devoid of whatever organizational politics might exist a place to communicate to me what’s actually happening.
And any doubt that comes along with it as well as what’s already working right and things that I or the team should continue doing these are all important facets of the activity once the stage is set we dig in setting a three to five minute timer start the activity by instructing your participants to Encore to record on.
Individual stickies any hopes they have for the future systems program at whatever level of detail they want I like to give an example like accessibility wherever possible we baked into whatever the design system provides just to kind of start the conversation be sure to tell folks that they should still write down their comment if they.
Already see another one similar to it on the board or if it’s mimicked by another group you’ll see why this is important in a minute also make sure they don’t jump ahead to other sections their order is is important here once they’re done with the Hope section.
Reset the timer and then have them fill out the fears section with the same charge record any fears that they have about the future of the systems program while the fear stickies are being written you as the facilitator can start sorting the hopes by theme grouping similar sentiments together now you might have to make some.
Assumptions and that’s okay just use your best judgment it’s worth noting that I also like to leave on the name functionality so that if I do have questions I know who to ask for clarification but some folks feel they can be more honest if it’s Anonymous as facilitator make that call but do so before the.
Activity starts so before they start filling out their hopes remember the tone of the activity is that it’s meant to be a judgment-free experience and you want their honest real feedback if there are things that you feel are table Stakes for the goal of your system or the systems program add a little note with it for example.
Each time it came up I just marked accessibility as table Stakes be selective on which themes you do this with and I’d say try to limit it to two at most if you choose to Mark any when they finish with the fear section reposition their attention back to the hopes area ask your participants to use the stamp.
Feature to cast three votes across the themes they should spend their votes on what’s most important to them personally they can spend their votes on one particular row or they can cast them across different ones if you have more than seven themes bump the total votes to five be sure to instruct them not to spend.
Any votes on anything you’ve labeled table Stakes because those things are going to happen anyway while they’re voting on the hopes go ahead and sort the fears section in the same way when you have those themes assigned repeat the voting for The Fierce area voting usually takes four to five.
Minutes depending on how many stickies they have to read through and you want to make sure you give folks enough time to read the themes and the detail they’re in you’re now at the halfway mark of the activity I like to close that section thanking books of their honesty and maybe.
Allowing folks to elaborate or comment if time allows the second half of the activity you can either do as one big swoop or as individual sections there’s no sorting or voting on this one but the commenting is the same so set the context that while the hopes and fear sections are about the future.
State what you now want them to log is what’s working and not working about the current state and remind folks again that if they see a comment that’s similar to theirs or that’s already recorded continue to record their comment as well candidly this will show you where any patterns of behavior or expectation good or bad are.
Occurring for timing I usually like to leave this part open-ended with whatever time’s left in the session meaning if you’re running behind uh do three minutes per area if you’ve got padding maybe five to six the activity as a whole is an exercise in time management and controlling conversation as a.
Facilitator 45 minutes feels like a lot of time when you’re booking the meetings but time will fly by after the activity is complete I like to close expressing thanks for their time and their Candor with an additional note this is not the last time they’ll see this content that my intent is to meet with different discipline groups and.
Perform this activity so the next steps for the program can reflect an accurate picture of what they as the consumers directly or otherwise need from the system as well as what we should keep intact versus re-envision going forward so now that you have all this awesome data it’s time to translate into something actionable.
Section four translating your data you now have n number of verbatims from directly from your consumers and key players you’ve bucketed them into logical themes and you’ve logged what’s important to them through a voting exercise the next step is to combine all of these inputs from the separate sessions and draw some conclusions you.
May see some obvious things like this well it’s built in figma one to one is what’s deployed in code no surprises less QA right and maybe some other things that might surprise you like lightweight wireframing tools for PMS to use during early stage product development but what’s important is that you’ve.
Created a space where these things can be communicated expressed and recorded now’s where the magic happens part of a systems team’s job is to have a clear road map of what and when certain things will happen as well as be able to describe the why and the how this is where the translation layer between all of these great focuses.
Sentiment you’ve gathered turns into something actionable specifically addressing the why and the how Can you spot the difference between these two sticky notes on the left from design responsive components mobile tablet desktop and giant monitors from engineering on the right scalable design components should be able to handle.
Different screen sizes view areas without overflowing or becoming unstable well the word choice May differ and the comments came from different groups they’re asking for similar things sounds like alignment to me and a deliverable we can plan for as you analyze the data my bet is you’ll find a lot of overlap from folks in the.
Same group and folks across groups that will point to clear deliverables they’re asking about remember that whole write down what you want to do in any areas of improvement you’ve seen from section one here’s how we tie it all together section five building your learnings presentation.
One of the resources I’ll provide in a few minutes is a presentation template and it uses a specific we will buy to avoid format this language structure gives you the ability to use the verbatims and themes you’ve collected along with your analysis to create a list of assurances of behaviors processes and deliverables.
Etc for your consumer groups in practice it looks like this we will one of their hopes by one of your findings from the audit analysis turned into a goal to avoid something they feared I’ll show you a few examples we will have high quality componentry and usage documentation leveraging system consumer input and product needs.
By having a clear A to Z process on how components and visual style decisions happen as well as clear contribution model for consumers to share ownership of certain aspects of the system to avoid the design system becoming too rigid or prescriptive not allowing for iteration Innovation and change this one’s a process Improvement.
Or we will create transparency on what the system will be working on by creating a needs-based systems roadmap to avoid concerns over prioritization and long-term maintenance this one’s a core team principle or an assurance for our consumers and last we ensure a design system’s Evolution or we will ensure a Design.
Systems Evolution will further create cohesion between different products across different channels by creating project agnostic componentry to avoid a lack of visual and functional cohesion across channels this one’s a series of tangible deliverables you’ll see in the deck template there’s also an area that Services the themes.
And quotes from the stickies themselves giving folks that participated with different groups or other leaders and groups that weren’t part of the activity itself a chance to see some of the behind the scenes data this deck gives you the opportunity to say my job is to help evolve the systems.
Program here but I don’t want to do so without your input and this is one of the first ways I hope to ensure that you’re part of the process from the onset remember change can be hard tough or even messy and you might have to remind folks in the beginning that you’re working with them not against them.
In an attempt to make this feel like a less daunting task I’ve created some templates that you can use they’re built in fig jam and Google slides for ease of access but you should be able to Port them to any of the tools your organization uses more widely so take a photo of the next slide these should get you about 40 of the way.
There the other 60 will be facilitating the actual discussions within your organization and translating that data the third link isn’t related but I’m collecting some data for a project I’m working on I would love your input Design Systems work can often feel like a thankless job but through an exercise.
Like this you’ll be able to point back to the discussions and your learnings presentation as a way to show that you’re building the system they want by delivering the system they need thank you
Whether you’re building a design systems program from the ground up, evolving an existing charter, or joining an established …
Figma Official Channel,establishing,early,from,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, tutorial, product:none, audience:designer, language:english, format:standard, produced_by:marketing, theme:design_systems, event:schema, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,