My Dear Friends of Figma in Foreign I want to tell you the story of how our team co-created our first Design Systems roadmap with our internal Design Systems community but first let me back up to one of the last days of normalcy before the world shut down that day was config figma’s first design.
Conference in San Francisco I had the privilege of participating in the design system showcase and it feels really fitting that schema is the first design conference I’ve attended since the world has started to open back up during the Showcase I included this slide about buttons and at the time showing the chaos of our.
Pre-designed system buttons felt really relevant because we were in the midst of shipping a brand refresh as many of you know brand refreshes or rebrands are a massive amount of work but looking back it kind of feels straightforward you take your design system you replace visual language a with visual language B.
And ship it before our first generation Design Systems release the UI was completely disjointed as I work towards our design system MVP I audited the product and work to standardize our color palettes typography scales and components.
When it came time to deliver our brand refresh with the second generation Design Systems release I already had a pretty solid foundation to work from so at the end of that brand refresh our design system had a new visual language and a ton of useful components and I was really proud of all of the.
Work that went into it but I was also feeling less confident about what to do next our design system was far from being done or perfect but it had reached a certain level of maturity and it wasn’t clear with that next most important thing was around this time we started Consulting.
With Nathan Curtis from eight shapes I know a lot of you are excited to hear from him today and I can confirm he really knows his stuff when I brought up the ambiguity of the path forward Nathan encouraged us to think like a product team and how do product teams navigate questions of ambiguity and priority.
They Define product roadmaps now defining the roadmap is usually a job that falls to a product manager which is not a role we have on the team so with Nathan’s coaching I decided to put on my PM hat and Define our first roadmap the roadmap project had a few key goals I wanted to be more organized by.
Collecting and documenting all possible design system projects in a single place I wanted to build confidence in our project prioritization by validating the relative importance of each project with our Design Systems community and I wanted to provide Clarity and predictability to the workload of the Design Systems team.
I started with organizing the work right off the bat I reached for Google Sheets as the right tool for the job I like that it gives you High Fidelity design control over how the content is presented it’s also something that everyone at work was already familiar with and had access to and it let me create very custom data visualizations.
But a lot of what I’ll cover today is also applicable to tools like airtable Coda notion Etc if you want to dive into some of these Concepts in more detail later I’ll be sharing templates at the end of this talk so don’t worry about taking detailed notes in real time my basic plan was to create a column for.
Each project and organize different kinds of information about the projects in each row I knew I needed high quality feedback for the project to be successful but I also knew that many of the community members weren’t necessarily fluent in the ins and outs of a design System project.
So I mapped out categories based on what I thought the most frequently asked questions would be like what are we trying to solve what’s the impact is this even important what will be delivered why are we doing this now and what could go wrong.
After that I started populating the columns with projects like dark mode composability and database it was a huge relief to write down all the disparate projects asks and requests into a single place but it quickly became overwhelming to look at after I populated the cells.
That brings me to my first strategy when optimizing for high quality feedback which is adding images break up the wall of content they ground the project with a concrete example and they prevent context switching while conducting Community feedback sessions so I created an example image for each.
Project and drop them into a newly created example Row in the spreadsheet at this point I also started thinking about how I wanted to collect feedback from community members I imagine sharing the spreadsheet with folks in a one-on-one setting and asking them to jump into the spreadsheet with.
Me to rank their opinion on each project I added a new row called assessment and decided to use data validation to make it easier for people to make their selections data validation is a spreadsheet feature that allows you to contain the values that can be entered into a cell you can use it to make a check box or a date.
Input but in this scenario I wanted people to be able to indicate their opinion using a drop down I created a new sheet called Data validation to serve as the back end for this project and designated the First Column for the assessment options of must do should do could do or should not do.
That makes data validation my second strategy when optimizing for high quality feedback it’s faster than typing retyping repetitive content by hand it ensures consistent formatting which will be important in a minute it makes it easier to analyze the data later.
And it makes collecting the feedback feel a bit more Interactive when the data validation dialog popped up I selected lists from a range and entered this formula basically what it’s saying is go to this tab which I named data validation grab values that start at this cell.
Location and end at this location I’m starting at Row 2 here because I want the assessment header label that I have to be skipped not show up as an option I’m also intentionally not adding a row number at the end of the formula not adding a row number at the end tells the.
Formula to grab as many values as exist that it can find which is useful because I can add or remove values later without having to update the formula at this point I had my assessment drop down working nicely so I repeated thought process for other sets of reusable information and I put each information set in its own column.
For easy maintenance I had columns for Roi potential I had a binary yes no column and a few others I repeated the same data validation formula updating the start column setting up data validation made tinkering with the values faster and the images help break things up but I still.
Had a wall of text problem to break up the information further I set up conditional formatting for the most important rows conditional formatting is faster than formatting repetitive styles by hand it ensures consistent formatting which goes hand in hand with my previous note about data validation when your data is.
Consistently formatted styling it consistently is a lot easier too it makes it easier to scan the data and it also draws attention to the most important content this is what the conditional formatting for the assessment row looked like if the text contains must do flip it to a dark green.
If the text contains should do flip it to a medium green you guessed it if the text contains could do flip it to light green and if the text contains should not do flip the cell to a light red after adding conditional formatting to the assessment row and the ROI potential row things were getting a lot easier to.
Digest and compare so it’s finally ready for a few rounds of critique my team helped me or find some of the images and descriptions and pointed out additional rows that would be helpful for sorting and filtering the information they were also able to easily follow the.
Template and propose new projects by adding and filling out additional columns filling out this monster spreadsheet was definitely a team sport by the end of this stage we had gathered 16 projects and 22 rows worth of organized project information we added additional rows to capture.
Dependencies how we received the project request how much effort it would take us to do the project how much effort it would take an adopter to adopt the project and we ended up with this before moving into the community feedback sessions I had a few final cleanup tasks to do.
I collapsed any row that I thought wouldn’t be relevant for community members giving feedback I organized the projects into themes and I evenly distributed our pet project so it wasn’t super obvious that the things that we thought were most important were in the front at this point I was ready to move into.
The community feedback sessions now as an introvert I really thought this would be my least favorite part of the process but it ended up being the part that I enjoyed the most the first step was sourcing community members who are interested in giving feedback I wanted to get a good mix of designers and engineers and PMs.
Leadership and individual contributors I put out the call and slack channels asking people for 30 minutes of their time to make sure we’re on the right track to avoid calendar Tetris with senior leadership I leaned on our VP of design to repurpose some of his existing meetings with those stakeholders to.
Serve as feedback sessions for each interview I created a new copy of the spreadsheet and open each conversation with this prompt I’m going to share my screen and quickly run through each column of the spreadsheet afterwards I’ll share the link with you.
So we can look at Row 3 in detail in Row 3 you’ll rank each project as either must you should do could do or should not do you can only rank three items as must do everything else is unlimited some interviews required getting feedback from multiple stakeholders at the same time.
In those scenarios I would just collapse the assessment row and create duplicate tabs at the bottom so the people responding wouldn’t bias each other with their answers all in all I conducted 42 interviews across our design system Community including the Design Systems team product designers Engineers PMs and.
Senior leadership I closed each interview by asking is there anything missing from the spreadsheet that you think we should be working on and I took notes on the answers the responses to these sessions were fascinating outside of the structured assessment.
Feedback the comments we received fell into a few key themes the first one was I had no idea that there was so much Design Systems work left to do it was clear that the roadmap offered a level of transparency to up to our workload that people were surprised by the next theme also hit on notes of.
Transparency I heard a lot of variations on I really want you to work on Project X but now that I see all the options projects a B and C are probably higher priority many participants developed a better understanding of how their requests fit into the bigger picture and had more empathy for our team as a result.
We heard a lot of comments like this one expressing appreciation for being included in the process we weren’t intentionally being exclusionary before but participants clearly enjoyed stepping in to help us shape the prioritization we also heard a lot of comments about the level of rigor that went into our.
Preparation one senior engineering leader said great work on vision and roadmap love how much thought and effort your team is putting in the rigor and thoughtfulness help build trust with our community and increased their confidence that we were on the right path there were also a handful of instances.
Where I got emails from co-workers I did not know requesting access to the spreadsheet what I asked them if they wanted to participate in the feedback sessions they explained that they didn’t consider themselves design system community members but they’d heard about the roadmap exercise from someone else and.
They wanted to borrow the format for their own roadmaps this happened most often with platform engineering teams which are also not staffed like a typical product team at Credit Karma as the interview started to wrap up I was ready to move into the second half of our prioritization goal which was the.
Analysis work I created a fresh spreadsheet with columns for the participant’s name role and their ranking of each project after that it was super easy to copy and paste Row 3 of each interview spreadsheet into this responses tab I also copied over my notes on how people respond to the question is there.
Anything missing and I ended up with this heat mapped Matrix of all the responses shout out to stakeholder 16 who had a record nine items Marcus should not do I can definitely appreciate when people have a strong point of view on priority after that I needed to calculate the total vote breakdown for each project so.
I added some summary rows at the top for each option I wrote this formula to calculate the vote percentage breakdown which will be in the template later basically what it’s saying is count all the cells between cell C6 and the end of column C that contain the text must do.
And divide that by the total number of cells between C6 and the end of column C this formula gave me a nice clean percentage to then repeat and modify slightly for the rest of the options then I drag the formula across the remaining columns which updates the reference column automatically.
After that I applied some more conditional formatting this time using the color scale option and I ended up with this summary at the top showing me how the response is broke down I selected these top summary rows and hit the insert chart button to create a.
Better visualization for this data after some additional formatting and moving the chart into its own sheet I ended up with something like this as you can see here projects are priority ordered from left to right projects that receive more must do and should do votes are further left and projects that receive more could do and.
Should not do votes are further right of course we couldn’t use this chart as a perfectly linear list of things to do for example if project 2 and project 10 both touch the same components or set of components we didn’t want to do that work in parallel and add confusion but our community gave us a clear perspective on which projects would be.
Most impactful for them which cleared up a lot of the uncertainty that I was feeling before starting this project ing folks roles was also an important part of the analysis using the Google Sheets data slicer feature I was able to create additional charts that let me compare how different.
People and different roles viewed our work it was really interesting to be able to compare the data this way so if you’re interested in embarking on a similar analysis here are some tips you can weight feedback from VIP participants Higher by duplicating their response rows in this way I was able to.
Elevate the input of the Design Systems team and our most important stakeholders use data validation to save time on data entry and creating summary charts use filters to examine the data by role and share your final analysis summary with your community even if the way you sequence the work can’t follow the exact order that emerged from your research.
My last goal for the roadmap project was to provide Clarity and predictability to The Design Systems team when conducting feedback sessions with my team I provided a slightly different copy of the roadmap with an additional category called project interest the possible options of want to work on it neutral or don’t want to work on it.
After they gave their assessment on the priority of each project I also asked them about their interest level in working on that project which gave me important signal that I used when dividing up and assigning the work using this method I was able to align the workload of every team member to.
Their stated interests growth areas or both I also spent extra time with upward stakeholders on the resourcing information which indicated the projects that were well suited for internal external agency support this felt a better understanding of our team’s strengths and where we could.
Advance or accelerate the roadmap if we were given additional funding leadership appreciated our proactivity in proposing projects this way using this method I was able to secure budget to hire agencies to complete two additional projects from the roadmap so taking everything into account the community feedback.
The team interest in growth areas agency budget dependencies and project complexity this is where we ended up our roadmap looks something like this and I’m sure this slide would be a lot more interesting if I could share more details about the projects we actually.
Funded um but as cheesy as it sounds this project turned out to be a lot more about the journey than the destination it’s also not set in stone our priorities definitely changed and shifted but the roadmap allowed us to have more intentional conversations about trade-offs and bandwidth which in.
Turn helped keep the workload manageable for the team our biggest wins from this project were building empathy with our community increased transparency about our work setting clear boundaries with our cross-functional partners increasing the Design Systems team’s ability to focus.
And aligning team priorities to Career growth opportunities of course like any project we had some room for improvement conducting the interviews with super time consuming and I think we could distribute the interviewing responsibility next time among different team members.
We also could probably do a better job of keeping the roadmap up to date as the priority shifted part of the reason that was hard is because I don’t think we landed on the perfect format for the final deliverable should it be a graphic should it be a spreadsheet should we try to connect it automatically to our project management.
Tools so we have some more thinking we need to do there we also haven’t yet templatized the process but funnily enough putting the templates together for this talk moved us significantly closer to that goal on that note I’ll be posting templates of all the spreadsheets I talked about.
Today on Twitter feel free to duplicate them remix them and make them your own you can find me there under the handle at Jules forest with two r’s it’s been really fun sharing this work with you all and I hope you found it useful
Roadmaps are a valuable tool in the product development toolkit: they shape a body of work by clearly communicating the …
Figma Official Channel,designing,design,systems,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:none,