Based in Virginia, Forum One is a digital design agency specializing in public sector projects.
We sat down with Courtney Clark (Managing Director of UX) and Amy Vainieri (Senior Designer) to learn more about their “design systems first” approach to tackling large redesign projects. Watch the full video or read the transcript below!
To know more about the benefits and processes of design systems, download the free e-book Why Build a Design System?
Jerry: It’d be great to start and get an idea from both of you of how you ended up working on design systems at Forum One. And I guess we could start with Courtney, and then we’ll move to Amy.
Courtney: Great. Hi, I’m Courtney Clark. I’m the managing director of user experience at Forum One. And this all started a couple years ago when we were starting on the Peace Corps project. Peace Corps had gone through a rebranding but needed to extend their new brand online. So, as we were starting the project, Amy was actually the one who was like, “I think we need a design system.”
Amy: I’m Amy Vainieri, the senior designer at Taoti Creative. Courtney and I used to work together at Forum One, where we worked on the Peace Corps project. It was a matter of looking at the scope and breadth of the Peace Corps project, which is just enormous. Knowing that we’re really passionate about the site, and knowing that we wanted to get the best site possible. And the only way to do that was to use a design system to build the pages because there were so many different kinds of pages that we wanted to make for them. So that’s really where it came from. We just started working together at the wireframe stage and then at the design stage to come up with reusable components that we kind of building throughout the whole site. So that kind of happened by accident, but it turned out to be a really good thing.
Jerry: And how long did that whole process take for you guys to build out the design system for the Peace Corps project?
Courtney: The project total was about eight or nine months long, so we had to be … That was the other thing, is we knew that we had to be very efficient with our time because we had a very hard launch date. They were celebrating a … Now I’m forgetting. Anniversary. I think it was a 50th anniversary, so we needed to be really efficient with our time.
So, at the beginning, after discovery, we really dug into layouts and the design system. And then, Amy do you remember how much time we spent on that?
Amy: Yeah, it was probably about … It was either mid to late January through the end of March, so is that like eight to nine weeks, total.
Jerry: For that project in particular, what would you say were some of the challenges you faced along the way as you built out that design system?
Amy: Well, I think that the part that was kind of just an accident, neither of us or anybody on the project had ever used a design system before. So learning how that works and learning the benefits, there was a little bit of growing pain, so we’d have to go back and redesign something because we hadn’t accommodated for it, or something like that. So that was the main challenge and just the breadth of the project. It was really big.
Courtney: Yeah. I think what we had going for us is that historically our front end developers have used a tool called Pattern Lab, which allows them to start front end development before the back end is built. So they have already when we’re reviewing work, they already are thinking in a system mindset before we get started, so it was really natural that we were front loading that even more, structuring it. But there was … I think one of the challenges was we need to start with a bang with the design and get people to fall in love with it, and people don’t necessarily fall in love with basics, or just the single elements. So Amy worked really rapidly to show a full page design, and the whole time we’re planning backwards a little and saying, “Okay, but what are these pieces? How will they be reused? How can we fit the together in different ways on other pages?”
So it was very rapid, but it worked out. It worked really well.
Jerry: Yeah, it’s interesting that you mentioned getting people to fall in love with the idea of this reusable design system is a little challenging. Did you find that selling the design to the client was challenging, or were they pretty on board with the idea?
Amy: So they didn’t actually know about it at first. We didn’t specifically … Like I said we didn’t start out with the goal of doing a design system, so it wasn’t something that we kind of took the client along with us as we went until a few weeks into the project maybe, so it was a matter of kind of explaining to them in simple terms like, “You’ve seen this piece before, you saw it on X, Y, Z page, so we’re just reusing it here.” And then eventually they kind of … We introduced them to the system as a whole. We never showed them the system just because it wasn’t really something that they needed to see. But, there wasn’t a lot of selling to it. They really got it right away. They were great clients, and Courtney has fun stories about them.
Courtney: Yeah. I think part of it going into it … So their old site and their brand hadn’t been refreshed in a while and it wasn’t just one site they had many sites that they were managing. So they were really interested in consistency, especially with the rollout of the new logo and the new look and feel to maintain the brand it needed to be consistent across all the properties. And the design system speaks directly to that need, so that worked really well. And I think to Amy’s point we wanted them to fall in love with the initial look and feel so we showed page designs really quickly, and then there was a slow sort of education process about these are the elements we’re going to reuse these and here is the benefit of it.
I use the analogy of Legos a lot of times like we’re going to have these blocks but we can reassemble them in many different ways. But we needed them to see a finished piece before we could start pointing out the different Legos.
Jerry: Right, so it’s interesting that this started as amongst a sort of underground, like internal tool that you guys build outright just to help you guys along the process and then you sort of brought the client into it and explained the benefits of using this. Now at the end of the project did you then hand over this design system to the client as well as just sort of kind of an extra thing that you guys had built, that maybe they could further implement in the future in their organization.
Courtney: It’s still alive, we’re still doing work with them. So the first launch is in June 2016, and we continue to work the Peace Corps to refine and build out new pieces they’ve updated same thing. So we’re still partners in managing and updating that design system, and that’s also been a learning experience as well. ‘Cause as new team members come on or leave we do have this central piece that everyone can use the same language around and reuse. But it does lead to some interesting challenges about how it evolves and grows over time to meet new needs. ‘Cause that was a year ago, almost two years ago.
Amy: We did end up giving the system to some third-party vendors. There were a couple pieces of the Peace Corps website that we weren’t going to touch and having that available to kind of give to them. It’s like, this is what you need to use to make your site consistent with the rest of what we’ve been working on, that was really valuable.
Jerry: Gotcha, so it’s interesting then that you have sort of become the stewards of this design system over time. What started as sort of this internal project has since I imagine grown quite a bit in scope and also in just the amount of involvement and also just governance from everybody involved. Is this design system something the Peace Corp owns and drives along or is it something more that you guys manage and involve them as needed.
Courtney: Well, we’re certainly partners in the work. It’s their website, and we’re helping them maintain it and build it. They do a lot of work on it, of course, so we are very passionate about the organization and the project from the start. Our CEO is a former Peace Corp volunteer, the project manager on the project is a former Peace Corp volunteer, so there’s a lot of passion around it to start with. But we maintain it together ultimately the Peace Corp owns it, it’s their brand, it’s their look and feel, but when it comes to making updates or providing guidance around how we extend it we often suggest the direction hat we want to go in then we have a discussion about it to make sure it makes sense because ultimately it’s theirs.
Jerry: Right. And is there a dedicated team at Forum One that just works on the design system or is it an effort that is sort of spread out across the project. the day to day project team members?
Courtney: Yeah, that’s an interesting question ’cause I was watching the interview you did with, what’s his name from Intuit?
Jerry: Joe Preston, yeah.
Courtney: Yeah, yeah so they have like a team who used that design system, and that’s what they do. Because we’re an agency we have project teams, so we have a user experience person, creative design person, a front-end person, you know the mix of … So whoever is on that project team is a maintainer but also does all the other work related to the project. But there’s not like a dedicated owner or a group of owners that takes care of it and grows and feeds it; it’s the project team who does that.
Jerry: Gotcha, and that sort of make sense in an agency environment right because there are a lot of projects and also clients where it probably makes sense to have some of that responsibility shared between people, and you may not just have the resources necessarily to dedicate to just maintaining that design system like a large organization like Intuit might be able to do.
Courtney: Yeah, that’s right.
Jerry: And I’m curious then since that was a year ago. Since then has building design systems been a core project that you’ll work on with clients at Forum One?
Courtney: Yeah, I can speak to … Amy, did you want to?
Amy: Well yeah, I was just going to say there’s something that … Knowing how well it worked on the Peace Corps and what we learned from that project, it’s definitely something that I try to use in the project since then at Forum One and at Taoiti. It’s just an easier way to build things, in my opinion; it’s a more systematic way of scaling things. So it’s definitely something I’ve used since at both companies.
Courtney: Yeah, and I say that more than anything because of the success and because a lot of … It’s an industry trend right now and for good reason. And so we’ve certainly incorporated it into our processes in other projects. And they all take different forms; not everybody is starting with a fresh new brand or logo. We do work with non-profits and foundations, and a lot of them have some legacy work, but they can update smaller pieces along the way. So the other thing that we’ve been doings is, even more slowly introducing a design system and it has to jive with the legacy look and feel and structure. And then introduce a new look and feel and we’re doing that right now with the MacArthur Foundation, and so that’s like an added layer of challenge to this because you need to have that consistency, but over time it will all switch over.
Jerry: Right and the way that you work with clients is that design system conversation something that you have immediately in the beginning of a project to have them understand that this is a foundational component to whatever work they’re asking for or does that happen as like a one-off conversation.
Amy: I recall a work project that Courtney and I worked on after the Peace Corps project it actually became a really useful tool for starting one of those redesign conversation with a particular client we ended up doing a design audit. Basically took all the different button styles and all the different textiles and showed them what was inconsistent about their site and how we used a design system on other projects to mitigate that. Which that was a really useful tool to start those conversations. They ended up going for it, which was great, but it was a little bit of work to get them to agree, but they went with it.
Courtney: Yeah, and that audit was vital. Amy did the audit and as you can imagine it’s like just a smattering of all the different menus and like she said buttons. And once people see that they start to get it a little bit more they’re like, “Oh yeah, how would somebody know how to move through when things are so inconsistent here.” So the efficiency is another big selling point as well because once the system is created … Actually, on Peace Corps, Amy was able to put together pages in minutes because all the building blocks were there. So once we talk about those pieces and they can see a couple of really beautiful examples. And there are many examples in the product space but seeing them in the non-profit space and the foundation space; people start to get excited about it then.
Jerry: Right, and I think that’s what so interesting about the work that you do with design systems at Forum One is when you look at a lot of the existing design systems, they are for very high-profile enterprises, like IBM, Microsoft just recently released a fluent design system, Sales Force, of course, is known for Lightning. But not a lot of people may know that these non-profit organizations also do have internal design systems as well, and that’s actually really cool that that’s possible with your guys help. And I’m also curious when you work on a design system with different clients is it pretty much a project that Forum One can create all on their own, or does it require a bit collaboration between their developers and their product managers as well?
Courtney: Great question, it varies with every group. ‘Cause we’re often working, sometimes we’re working with their IT departments, sometimes we’re working with marketing or communications. So in order to be good partners you have to be a little bit fluid to figure out who is going to own it and how you can get buy-in when you’re internal within that organization, you can lay that out you sort of know the people to talk to, but we’re often coming and have to figure out that landscape as well. So that’s the first part of our goal is just to figure out the landscape and the stakeholders and who might be interested in it so that it can live on ’cause eventually what we’re creating will launch and we hope to continue working with them but ultimately, like I said we hand it off, and it becomes their design system.
Jerry: When you’re working on a design system with these clients have you found that the technology is a constraint you have to work within or are you open to suggesting changes to, let’s say for instance the CSS framework that they may be using on their backend? Is there some freedom in technology that is provided to the team when you’re working on a design system?
Amy: It kind of depends on the project, both Forum One and Taoiti work primarily with Drupal so there is only so much we can do, but we do our best to work within the constraints of whatever CMS we’re working in. Peace Corps was built on Django. I felt like we had a little bit more freedom with that one than we have with other projects. But that may have just been me being excited about the project. But it really depends on the client in what we’re working with and how we’re building their project.
Courtney: Yeah, I say a really common project for us is a full redesign. Like we can come in and work in a more phased approach, but it’s really common that groups will come to us and say, “We’re ready to overhaul it.” And when that happens we’re not editing existing CSS. We’re upgrading the CMS they’re on anyway, so more often than not we are able to start from scratch which is kind of a blessing. But that is to say; I’m on a project right now where we’re making edits within an existing ecosystem. What that means though is that we just have to be very close with the front end and backend developers so we know how far we can push things. Or where there may be challenges ahead so it takes a really tight project team and a lot of really honest review sessions to make sure that what we’re designing can actually be implemented.
Jerry: Have you found that working or rather creating that design system as a foundation for the project does make it easier to collaborate and communicate between the designers and the developers?
Courtney: Absolutely.
Amy: Yeah, so much we have. The developers on the Peace Corps project, in particular, were just thrilled because they’re already thinking that way. So they’re using Pattern Lab, they think in a systematic way on they’re going to build the cages, so when we started thinking that way it just makes their job 10 times easier. And the fact that all of us were using the same language to describe things made it to easier for project managers and for the sales folks to kind of be on our level and all talk the same language and communicate a lot better. It’s great.
Jerry: And Courtney, I think what’s interesting is you mentioned that a lot of times you will be brought in to work on full redesigns for clients, and it’s actually very interesting that this design systems process has become something that is part of the redesign process. That instead of the alternative method where you just go to a client, and you would just redesign the site and hand it off when you’re done now you’re actually giving them not just the final representation in that site, but also the sort of derivative components that they can then use forever, and they have something powerful that they can evolve and make future redesigns easier as well. That’s actually really cool to see that the conversation starts with the client saying, “Oh I just want my site redesigned.” But it becomes something a lot more meaningful once you get involved and start building that design system as the basis for that project.
Courtney: That’s right, and we talk a lot about how to design stuff that can scale. Because a lot of groups that we work with whether they’re grant making foundations, or they’re non-profits, who are running some real different programs what they’re doing changes year to year. So their digital needs can vary greatly. Part of our UX and design practice is to ensure that we’re creating solutions that can scale up and down and the design system is a key piece of that. The point is that we talk a lot about scaling, design systems work really great for that. And it’s more bang for your buck. Where were already doing that thinking up front then it can live on and it can even extend ideally into not just the website, the social media presence, the marketing materials, a lot of stuff that we’re figuring out can be repurposed elsewhere.
Jerry: Again, what seems so powerful about that is once you have that design system in place Forum One isn’t so much as a vendor at that point as more of like a long term partner because you’ve created … It’s not just a redesign, you’ve created infrastructure for a client and when you have that. That, I imagine, from a business standpoint creates a lot more opportunities for future projects down the line instead of being treated as just this sort of one off agency in the corner that they pass off projects to.
Courtney: Yeah, that’s the goal. We’re in it to be good long term partners and their web presence doesn’t end when the project ends, their digital presence doesn’t end when we launch the website June of 2016. It lives on, and then there is a team who has to maintain it and make sure it’s still functioning properly and meeting the goals of the organization. So yeah, we’re in it to ensure that they have a really solid framework to continue on with.
Jerry: I’m curious for both of you, do you have a background in development? Because as I’ve spoken to a lot of folks who work on design systems, they seem to be the sort of hybrid designer/developer profile, where they kind of live at that intersection and I’m wondering if that is true for both your experiences.
Amy: I think Courtney and I are both … Courtney has a background in graphic design, and I’m starting to explore the UX side of things. So I think we’re both more of the UX/designer hybrid than the development side of course I’m speaking for Courtney, but I think that’s the case with you as well.
Courtney: It’s really interesting that you point that out because where Amy and I are similar is that we are, we’re organizers and what I love about user experience and information architecture is figuring out how to organize large bodies of information, and that takes systemic thinking like a library science person right. And I think that that sort of systems thinking lends itself to design system development as well. But no, no development passion.
Jerry: That’s really interesting, you mentioned that having a sort of information architecture approach to a design system helps designers who don’t have a development background grasps the concepts better and I think that’s a great point because on design systems teams from what I see at least on the pure, in-house corporate side most of the folks here have some sort of development background but it’s great to see that, that doesn’t have to bee the case. You don’t have to be a designer who’s also a developer in order to understand how to create and govern a design system and obviously both of you are proof of that with the multiple projects that you’ve worked on at Forum One.
Courtney: I think thought that you do have to be … When you don’t have that deep development understanding or skillset, you do have to be a really good collaborator, and you have to be willing to work through a solution with your front-end developer or whoever it is that actually will implement your work. And I like to think that Amy and I are pretty good at that, working with our teammates to … Instead of just throwing it over the wall, that we’re reviewing, we’re brainstorming together to ensure … Cause we care, we don’t just design for the sake of design we want our work to actually be implemented, and in order for that to happen, you have to be a good team member and figure it out together.
Amy: And be able to understand what can be done and speak the right language so you guys can collaborate in a useful way.
Jerry: Yeah that’s actually a really interesting point, you mentioned that strong collaboration with the developer can help to overcome some maybe personal understanding of how everything works technically. Is there certain processes that you have found useful at Forum One or even at your current company Amy, for better collaboration between designers and developers?
Amy: It’s just a matter of making time for it. Developers in, I think, every agency I ever worked in the most overworked, overbooked people that exist. So it’s a matter of finding the time and really making a point to meet with your developers and talk to them. ‘Cause so many ideas that have gone into sites that I designed have come from the developers ’cause they want to do cool stuff too. And I think one of the tings that was really successful on the Peace Corps project is that we had a set time every day at noon so we could catch Courtney in L.A., that we would just have an hour open for anybody to join in, we called them Power Jams, just to talk about issues [inaudible 00:26:49] we’d be talking about something and talk to developers and we’d make sure they were invited and attended that day. So having that open space for collaboration on the calendar was invaluable.
Courtney: And we actually … This is our plug for UX pen ’cause we used UX pen to sketch listen, and so those meetings started off with Amy and I sketching, laying out the blocks of the pages, but to Amy’s point the team was invited, they could listen in, they could participate and that sort of transitioned from to UX to design meetings to development meetings to reviews and that was a place because we met every day at the same time, it was a place for the developers to join as they wanted to and also could listen in while they were doing other work for example or once they were deep into the work they knew that they could reach us at that time to answer questions, to troubleshoot, to figure out different solutions if we needed to and I think that was really vital to our success on the project.
Jerry: Yeah it’s interesting of course you guys use UX pen. I would be curious to understand how have you found the platform helpful for you in terms of, not just collaboration, but overall design workflow? Has your process changed in anyway using UX pen as a collaborative design platform?
Courtney: Man, I’m going to have to think back to days of OmniGraffle. Well I mean the biggest difference is that when there are multiple Users, designers on the project we can all get into one project and edit things at the same time and not every tool allows that, so that’s a huge benefit and was vital to this. However, I would love to Amy’s thoughts here because initially once we’re getting … My goal is to do the wireframes to a high enough fidelity that Amy could take it and run with it, and she’s not doing that in UX pen. But Amy what was your experience like?
Amy: I would you echo exactly what you said I think the list of valuable things in UX for me was the ability to watch Courtney and the other UX designers that we had on the project work in real-time so that could watch them work and be able to help them see common things as they were working on it in real-time in the platform we used, really cool.
Jerry: And I see how that all fits together now, because your team has multiple people in different parts of the country and to be able to work on these fairly complex projects especially if they involve something large scale like a design system requires a bit of collaboration and having that almost like common sandbox environment for everybody to come together in, I imagine probably helped to reduce some of the emails and otherwise disjointed conversations that may be happening. So that’s actually really cool to hear. I’m curious since both of you have worked on quite a few design systems projects now, is there a common set of metrics or evaluation criteria that you look at to determine whether a design system you worked on has been successful for the client?
Amy: That’s a really good question, I don’t know that any of the systems I’ve worked on have lived long enough to comment fully on it, but maybe that’s good thing that it hasn’t broken down yet. I imagine that a good metric would be if the client is coming back to you and asking for more things that you didn’t accommodate for, that would certainly be something that I would look for as a missing piece we have may have not quite met the mark in. That’s a really good question though; I don’t know have you seen anything Courtney?
Courtney: Well it’s not necessarily a metric, it’s anecdotal but there have been points on projects where we’ve spent a lot of time crafting the design system, maybe educating the client about what it is and the benefits and we get to review down the line and this really happened where we were like, “Hey, we have designs ready for you to review could you take a look?” And the client said, “Oh yeah if it matches the system we’re totally good to go.” So they mentioned it, they approved it without looking because they bought into the system that we created and it became a little bit more … They knew what to expect, and that was part of their goals. So I think again is anecdotal but that’s like the dream for somebody not to go through thousands of iterations and say like, “I trust it, I know what to expect, the system is great, we’re good to go.”
Jerry: That actually touches on a common theme that in the interviews I’ve done to date so far has been pretty prominent which is just the fact that it’s like a codified standard for design and development best practices so people sort of know this is the source of truth, if it matches what is here then we don’t really have to have all these conversations about, “Does the page look or feel right.” And then on the technical side, some of the in-house teams what they’ve used to measure the success as well is looking at deployment times from when a first iteration of a design has been created versus when it goes live. How much time did it take with the design system in place versus before? And I’m trying to remember who it was, I forget of the people I’ve spoken with so far, but they mentioned that sometimes it can be quite drastic like going from what used to take weeks and now it takes a couple of days because they can, like you said, they can skip all those iterations and all those conversations.
Courtney: Yeah and that’s one of the things when we’re first introducing the concept to folks who haven’t heard of it or worked with it before is talking about the investment because if we’re designing custom things all the way up, the investment just increases it never levels off. But with the design system there’s an initial surge of design activity but then it mellows out a little bit because of the reuse and sort of hitting that magical point where you can start to reuse those elements and yeah you are gaining efficiencies in time and resources.
Amy: I feel like it’s one of those things that you a website is designed really well when you don’t notice how it’s designed, I feel like it’s kind of the same with the design system. You don’t know how well it’s working because you’re probably not hearing a lot of issues it’s just working ’cause it’s magical and wonderful and pages are made really easily. I feel like there is a little bit of a comparison there if it’s working well it’s just a smooth train.
Jerry: Courtney you mentioned, this is interesting, that there is sort of an initial peak of activity in creating the design system where after you get over it that it sort of tapers down a little due to the reuse. In both of your experiences have you found that there is a certain, perhaps company size at which it makes sense to create a design system or do you find that it’s something that could be useful for a company regardless of the size of their team.
Amy: I could see it being useful for a team and being a good tool as well. ‘Cause I worked in-house in a non-profit several years ago and it’s hard to control the brand but if you have a system in place you have certain parameters that you have to stay within it would become a really useful tool for in-house teams to be able to defend their decision and justify their decisions to some internal stakeholders. So from that perspective, I think it would be useful to just about any size company.
Courtney: One of the things that we talk about when we talk design systems is if you’re on a project where there is a lot of hand off between team members or a lot of different folks are jumping in on it, if your site is going to grow or evolve rapidly over time, or if you just have crazy wild styles across all of your visual platforms those are three big indicators that you probably could benefit from a design system. So I don’t know if it has to do with the size of the organization, but maybe the size of the digital presence or how your team works in the handoff between your teams. Certainly, a little baby site that’s just twenty pages, of course, it would design system, but it’s really those products that are thousands of screens or thousands of pages where it’s a no-brainer to utilize a design system from the get go.
Jerry: You mentioned the scale of some of these projects you’ve worked on, what would say is the like the most complex design systems project that both of you have worked on to date? Would it be that Peace Corps project or is there something else since then that has become even more intricate?
Amy: It’s definitely Peace Corps for me, that was certainly the biggest breadth of project I had worked on ever.
Courtney: Yeah, I think one that’s live right now is the Peace Corps. I am working on one right now that will launch later this fall, that is a site that has over a hundred thousand pages, and we’re building a design system for that, but that’s not done yet. So talk to me in November.
Jerry: And for that Peace Corps project, was it difficult to really most just the pure scope of the content, the fact that there were so many pages or was there other process complexities that made it more challenging.
Amy: I think it was a little bit of both just from the pure page perspective that was the most custom design pages that I’ve ever seen designed on a website. We did 29 different templates that we worked with so that as a complexity was just beyond and absolutely benefited from the design system. But it was also being a learning curve as well that makes it kind of special.
Courtney: I would add that the size of the site had a major influence on our process decision but also as I mentioned they had just rebranded and so creating that consistency across platforms they didn’t have was a huge part of the redesign. So a design system helped with that and then third like Amy said a design system starts to put up some gates around like, “This is what we’re going to do.” And when you have a lot of stakeholders, Peace Corps has several programs, they have several stakeholders that were involved, and when you have a lot of people you have to set up some like, “Here’s how we’re going to operate, here’s sort of the bounds of what we’re working within.” And a design system hopefully sets up those bounds to create the consistency.
Jerry: What’s interesting here is also that you mentioned the design system kind of sets boundaries on the scope of the project. Have you found that once you’ve started working on a design system that you’ve had to revisit what it is that you guys are actually going to be doing? So you’d have to go back to the client and tell them, “Oh the scope has sort of changed because as we started working on this, we realized either more or less work needed to be done.”
Amy: I haven’t experienced that yet.
Courtney: Yeah, I haven’t either, and I think it’s because we worked on a really big design system. We’re now talking about how we can have like, what’s the small, medium, and large size of the design system. Not everyone needs what Peace Corps has or what Intuit has or what Microsoft has right; there are smaller groups that need a more basic size. No, I haven’t experienced that yet.
Jerry: Going back to the beginning, I know both of you had mentioned that part of the process for creating the design system was doing an audit first and seeing where all the inconsistencies lay. Perhaps you could just describe your process for creating this design system in some more depth. So the first step would be, of course, doing the audit and then from there what did the process look like for, let’s say that Peace Corps project?
Amy: Well it really started with Courtney, it started with the UX process and thinking about the design from a really high-level and what sorts of components they were going to need to use on the various pages as we filled them out. So the collaboration and the design system definitely started at the wireframing stage when we started reusing stuff within those wire frames. And then it was transferred to me where I built it out piece by piece.
We’ve tried to start with the most complicated pages that had that type of those components in them so that that we could hammer out those big ones first and then they basically just sent in Photoshop files and I was dragging them into new files as I created them into each individual page and then once we were done with the page part of it, I kind of put the whole system together, the whole with all the various elements and components into it and that’s when it got handed off to a developer who essentially put that into a pattern map and built out each one of those elements individually so he could start plugging them in on the code end.
Jerry: So it sounds like part of the process really was getting the design system all set up in place first as part of the redesign project and then once you’ve had those unified design and code components you could then have this toolkit that you could then actually, formally move forward with actual redesign work itself. So you wouldn’t have to be doing so much redundant work later on.
Amy: Exactly and the Peace Corps was a little bit of a special case where it was essentially everything got scrapped. It was built the site from the ground up when we worked on a not as invasive redesign project it’s a little bit more of a balance of what’s existing, what can you find through that audit versus created creating new stuff that may not be necessary at the time. Balancing the existing design with what you would really like to see systematized and brought into the consistency.
Courtney: And the thing, there were a lot of audits going on. We did a huge content inventory and audit, we did a lot of discovery in understanding stakeholders, and our audiences, and our goals for the project. So that’s all background stuff that was happening but it totally influenced the decisions and the approach on the design system itself ’cause you have to know the content before you know the layouts that you’ll need or the elements that you’ll need. So there was a huge amount of effort put into figuring out what this thing was and the content that it would hold before we started being like, “This is what a form field look like.” But there were you know every project I think what we’re seeing and figuring out now are like, “What are the staples that every design system absolutely needs?” And then for each individual project, “What are the custom elements that we need to create or update?”. And there’s even efficiencies once creating design systems becomes part of your process hopefully because you’re seeing the trends in what you’re reusing over and over again from project to project.
Jerry: What’s nice about this process that you’ve described is your kind of front-load all of your buy-in right at the beginning. As you build this design system you already thought of a lot of the difficult problems that could cause you concern later on, like you mentioned getting an idea of how much content there is, which then from that you then know how many patterns or components are required to accommodate that content and you can have those conversations early on and by the time you have this design system built out, hopefully from that point it becomes mostly how do you mix and match those components in a way that satisfies the usability goal for the project.
Courtney: That’s the dream, that’s the dream.
Jerry: Yeah it is. Did you see that it played out close to that in the Peace Corps project or was there sort of some unexpected challenges that came up along the way?
Amy: I think for the most part it was pretty smooth, it was again those growing pains of not having done it before and not knowing where the speed bumps might be. When Courtney and I talked about design systems a couple of times at conferences, and one of the big things is the lessons you learned. There were some big ones like, make sure you understand what the final version of this system is, where the files and things like that. So there were a few bumps along the way, but overall it was a pretty, pretty smooth process.
Courtney: Yeah, and I think the nice thing if you have a design systems team the great thing is that those folks have a committee or they decide is this in or out, do we need to reuse the element or create a brand new one. And when you’re in an agency setting there is not an owner who can say yay or nay it’s a discussion, and usually people are … the discussions are good, but you need to have those guiding questions, you still need to have the rules and guiding questions to help you understand where it flexes and where it grows or where it doesn’t. We were at Triple-Con speaking a month ago, and afterward somebody asked a question about, in higher education when they have a new commencement site, and that’s like every year the team was wanting to redesign it from scratch and the question was, “How do you convince those stakeholders that it’s okay to reuse elements?” So I think that’s another challenge that sometimes teams whether you’re in an agency or in-house there is this desire for something new. So I think there’s really interesting conversations to have around how you guard the system but also where there’s flexibility, so it doesn’t feel stale.
Jerry: And in your work, working on all design systems have you had to hold those conversation with clients? For instance, have they had to come back to you and say, “Oh, it’s been a year? Why don’t we refresh things?” And then you kind of have to remind them that maybe there’s really no business reason for doing that?
Courtney: Yeah, for sure and it’s a discussion right? Because there are some … Like we talk about Lego blocks a lot, there are some sites where their design system is eight Lego block, and somewhere it’s like 40 Lego blocks. And what we’re constantly figuring out is what is the right number of elements or pieces for that group or for that client that will last them the longest. And so that’s … I don’t have a special [inaudible 00:47:18] for figuring out, how many elements you’re going to need, but it’s a discussion that you have to have early. And using examples I found is the best way to say, “How big is this thing and how much shifting is it going to need over time?” And people sort of have to predict but also if they’ve been at the organization for a while the can look back on the past couple of years and be able to say, “Oh yeah, we … ” Some of it’s predictable around what their needs are or what their desires are for the main stakeholders.
Jerry: That’s actually really, that’s really interesting. Because I can see now how in an agency environment like you mentioned those conversations can pop up more often than if you’re in-house and the design system is perhaps given a lot more hands on day to day attention by a full team, so those updates are a lot more visible. Whereas in an agency setting that may not always be the case so people may come back and come up with requests for things just because they don’t see what’s all going on all the time.
That’s the last question that I had here, this has been great learning about both of yours experiences at Forum One and elsewhere as well, and all the design systems work that you’ve done. This is particularly interesting because of the design systems approach that has been used for actual redesigns. This is a very, I think, efficient and just like a really up and coming method for tackling these large projects. It’s always cool to learn about. Thank you both Courtney and Amy for joining us here, I really enjoyed our conversation here.
Amy: Me too, my pleasure.
Courtney: Thanks for having us.
