My Dear Friends of Figma in So as i was saying our in the file series uh is a continuing series where we get to talk to other organizations and see how folks are utilizing figma uh and also um a bit of how they build their own work and and their own processes and how they work and hopefully a ton of great knowledge and takeaways for for everybody who’s.
Attending here as well and today we are going to be doing building better sorry building brands better with outfit uh i my name is anthony desvezio i’m one of our uh designer advocates here at figma um we basically get to work with our communities and work with all of you and uh hope that everyone’s having the best.
Experience with uh with figma and i’m joined today by james lee and uh beck and uh bec sorry pronounce your last name for me again it’s aegis aegis back aegis thank you and uh james is a senior product manager at outfit and uh beck is a senior brand marketing manager at alpha digital uh and with that i’m gonna go ahead and.
Pass it right off to both of you uh again we will be monitoring questions as we’re going so if you think of something you’d like to ask please go ahead and ask it in the chat and uh with that i will pass it off awesome well what i’m gonna do first share screen and hopefully this goes well.
Yes it does awesome and i’m going to go over to beck to introduce us and all that sort of stuff thank you so much for having us we are both so excited to be here um we as a brand management software company who has kind of recently been through a brand refresh um today we’re mostly just going to talk about our journey and how.
Finger helped us through the whole lot with a really lean team um so first off we just kind of want to tell you a little bit about ourselves um so for me i’m a marketing and graphic designer by trade um i’ve did previously work with outfit for just shy of five years and in that time i think i’ve done almost every role for every job on the.
Payroll shy of maybe bruce our ceos um so i started off in the cs team um and kind of was our first dedicated customer success manager working with our clients um i moved over to what’s called our delivery team which uh is responsible for building out our templates for our clients and developed kind of the first um delivery qa role to help us get a.
Better handle on qa for our templates um and then after taking a brief hiatus to have my first child um i settled into the marketing team um kind of taking ownership of the brand to an extent and that’s kind of the the space where i’ve settled quite comfortably um a fun little note about outfit is that we’re a very cross-functional team um so members.
Of teams that would never never normally get to work together get to collaborate on a bunch of projects um sometimes we just don’t realize how much of an eccentricity that is and kind of a fun illustration of that is that when i started um we were a small enough team that literally every employee took part in sprint so i always think that’s like.
Kind of a little fun note about outfit um james tell us about yourself hey guys i’m james uh super excited to be here today uh i’ve been in outfit for about six and a half years now which in startup world feels like double that time um well i like beck said i’ve kind of done a lot of things over that period but but i guess where my my niche has.
Always been is on that design and development sort of background so i started off as a front-end developer um with a design background growing a design team and then i found myself now in the product management space so how we can kind of bring all those three functions together um to to build a better product at the.
Same time um so yeah so that’s us that’s our socials as well so so please do follow us i’m always looking for followers um i have zero so please follow me i’m shameless you’re sorry um so what what is outfit we’ll give you a bit of background so in a nutshell.
Outfit is a brand management production and automation platform um so we empower teams to create branded content at scale what that means is we take the rules from your style guide and we kind of repurpose them into a digital brand system that governs digital templates that are kind of based on your existing collateral so.
We can kind of do anything from like your standard print sizes think like business cards posters brochures um to more complex digital stuff like landing pages and evms essentially the rules being coded into our restraints based html and css templates means that any stakeholder from any level of an organization with.
Little to no brand or design experience can update content with an on-brand template in a way that doesn’t break the rules and then share it really quickly but what does that mouthful mean let’s have a look um so what we’re looking at right now is uh the brand system in outfit so the idea is that outfit can manage and.
Codify all the bits of your brand so that you can safely deploy changes to your templates from a central place so you can see we’ve got our colors our palettes um logos and kind of sub logo items um typography and type scales and then like even little granular repeatable elements um and these kind of form the building blocks of the.
Templates right things that we never want people to change um so from that we create templates and basically you all your developers can build flexible and constraints based templates with html css and js um you get to decide what your users want to be able to edit and how they.
Should edit using inputs um you can kind of see here that this is like your typical social media tile the inputs are designed to be really simple easy to use flexible um and then the idea is that you can then share those templates with various teams for them to be able to use collaborate on and then get out into the marketplace nice and.
Quickly so that’s outfit in a nutshell beautiful so what are we actually talking about today um so first off uh well i guess this whole conversation that we’re having today is is framed around our recent rebrand so i think that would have been about 18 months ago now when we first kicked off that.
Process and kind of wanted to to look look through and look back at what we’ve done in in that space so first kicking off to what does our brand architecture look like right now um what are we working with uh and where did we where did we want to go in that space secondly then uh start to talk about what made it easier for us to be able to sort of.
Design with our brand knowing we’re a lean team and and and how we can how we can play to our strengths as well uh moving on then beck’s going to be talking about what what didn’t didn’t work uh this is a journey it’s an evolutionary process um there were definitely times where we sat there and said.
Yeah that didn’t work um but but it was how we learned from that and was able to to sort of codify the things that did um and then and then finally because where we come from is is how we empower teams to be able to to scale their designs and be able to create on-brand content it was we needed to be.
Able to kind of to look at that ourselves um and we from that we started to be able to hit on a framework that really allowed us to empower our teams and then finally kind of wrapping all of that up um through through the lens of a case study being um being a higher education campaign over in the over in the uk uh.
And and how we’re able to deploy that um with with tools like figma and our own platform outfit to get that job done um to a level of success um so i’m gonna set the scene a little bit and kind of walk us through where we’ve been um and where we ended up so i know james and i were kind of having a little bit of a laugh looking back at.
The old brand because we don’t get exposed to it much anymore um but as you can kind of see um we started out with a pretty simple brand um that is it just had a lot of clear hierarchy a pretty simple color palette um a lot of highly replicatable vectorized illustration again we were a really small team and we just needed something that could help us.
Explain what we were talking about um in our space and about our platform really easily um we’re a team of primarily developers at the start um like we started out in 2015 and i think they were like between five and ten of us during that time um primarily developers and so i guess we didn’t realize it was special.
At the time but it was actually really easy for us to translate what we knew about web components into thinking about elements of a brand in kind of the same way um so executing with a lean team we just kind of decided we would take a stab and start to experiment with this logic using figma and thankfully it really.
Paid off skipping ahead to kind of new brand and this is more our aesthetic now um we were really really lucky to engage with an amazing local creative agency who has had um immense success in the australian market they’re called big fish um they’re based out of brisbane seriously check out their stuff like honestly.
Their work is phenomenal and we were so lucky um we worked with them for quite a bit of time and then kind of in the end we landed on the fresh striking brand identity that you’re kind of looking at now but it had a simple set of building blocks with immense opportunity for.
Variation and choice within that system and that direction was really important to us for two major reasons the first one was that it allowed us visually to move away from kind of start-up vibes to a place where we could really aspirationally align with our customer um and the other reason.
Arguably the most important reason is that through this brand we knew we wanted to build trust with our audience and just really give them some assurance that we know how to execute and show them really what great brand execution looks like even if you are executing in the face of really limited resources so this is where we are today uh so so.
If we’re visualizing our brand architecture this is what we’re working with we’ve got our master brand which is outfit and then what we’re going to be talking about today but what sits under that master brand is a is a range of products um we have our platform outfit which is in the center there which is our sort of flagship but we’ve also got.
Discrete products for for discrete uses so off to the left there we’ve got make which you can go and check out which is a media generation api so it’s basically distilling all of the power and all the technology of outfit into an api which is which is super cool and we’ll.
Touch on that a little bit later as well as create which is often the works can’t talk to that much but um it’s really cool in its own right um but but what we wanted to be able to get out of this was um we needed these products to be able to stand on their own two feet each of those products had did different um.
Target audiences uh and and positioning um so they needed to be able to stand on their own two feet in their own markets they play in however we also needed the way that they can create those threads back to that master brand if you look at make you should be able to know that okay well that’s definitely a product of outfits and what allowed us to do that.
Was all of these building blocks um and this but they’re simple at the end of the day as well at the end of the day it comes down to color it comes down to typography and it comes down to the graphic elements so the graphic devices you use um but that leads to challenges because we we had this really lovely flexible brand.
That allowed us to do a lot but that uh that that once you kind of bring in that element of choice it allows you to go off-brand really quickly or you can go off-brand really quickly um so so i think that’s where we started to think about ways that we could make it.
Easier for ourselves to to design with our brand um as bec’s alluded to we’re a team of predominantly developers and and product designers we come from product background uh so so design system methodologies the things that we work with every day um we we have our design systems that we build for and we build with and it allows us.
To to create product really quickly so for all of us at outfit it kind of became a no-brainer that yeah for sure we could take principles from atomic design and start to break our brand apart in that sense um we’re already using figma for our product design sense so why not go and create a design system.
For our own brand um and and that’s kind of let’s go in and have a bit of a look at that so this is these are snippets of it i’ve pulled it all together but the idea was that how can we start to create really simple components um we know people don’t read documentation i don’t read documentation i don’t even.
Read instructions i’m just going to go in and have a crack um so we knew that most people are going to just come in and start to to use and and to a certain extent of views hopefully not much um so that’s what we aim to do so with logos just how we’re able to componentize with colors we’ve documented it but we have a lot of color.
Combinations at the same time as well how are there ways that we can start to translate that information into a component so that people can use that straight away well the example for us was with these were these grid systems so um how are we able to create a grid um and more technically just using frames.
And and and uh the grid system and figma to be able to to run those uh approved color combinations through that so it gives people a starting point um in in that sense then on the on on the typography side the idea was around okay well further how do we componentize uh at the atomic level but then how can we start to bring.
These pieces together uh to formulate sort of those more higher order components um so so tight pairings was a really great way that we could drive consistency because if you go to our website right now you’re going to see a lot of these components on the website um similarly on on our social media and in.
The future printed advertising you’ll see the same sort of components on that um fun fact as well so we we we actually commissioned a type designer to build a custom typeface which is called outfit um it’s actually just been released on google fonts and talking to anthony last week it’s already in figma so so you guys can actually use our font uh right.
Now uh in any figma file which is uh super cool and super great so you’re already already um playing in the outfit space and you too could create something that’s output branded um same thing with icons and graphic devices was just a really simple way that we could start to create these components create these i guess if we’re taking the atomic design.
Principles the molecular level type components like these icons and type pairings basically in a way to shortcut us to an execution um the thing that we wanted to avoid was this this concept of like the blank page effect where we receive requirements we receive that brief and and the question is.
Where do i start what do i do um and well the answer now is well you can start to go in and you can start to pull these components together um and you should be able to reach a a good or high standard level of execution really quickly um initially for us a high priority was social media advertising we do a lot of.
Paid social so for us it was okay well how do we how do we start to pull together these pieces um and and and lay those out on the page uh or on the design um in a way that we can shortcut the design process and start to foster collaboration and communication with.
Those different stakeholders in our business um i’m going gonna detach this i also so talking to anthony and vanessa um apparently that’s okay i thought that detaching instances and detaching components and stuff was was uh frowned upon totally okay so go.
For it um i don’t feel bad anymore that i detach things um almost on the regular so here you can see that i’m starting to to really just pull these components together on the page and we can really show that’s probably a little bit too much um we can shortcut to to that execution and it almost becomes uh more of a content discussion.
Than it does a brand discussion at this point because the design’s predominantly taken care of um it’s not amazing that’s okay um but it’s it’s it’s getting that conversation started so that we can figure out and we can tweak.
It it’s that it’s that ninety percent now um and i think that’s what’s been amazing about being able to create a design system is that um we get to that 90 really quickly and then we can really massage out that 10 where we need to um so yeah i’m going to flick back over to beck and it wasn’t all sunshine and.
Rainbows like kind of an interesting segue too because like taking a a brand like the outfit brand and putting together a social tile is one very small component of it but i guess the learning that we made which i’ve kind of wrapped up here um is that when you give people quality building blocks with no direction and no.
Boundaries um it makes a clear and predictable outcome super unlikely um to kind of set the scene on where we’re going with this we went through the when we went through the refresh our marketing and brand team was like four people and one of those people had design skills spoiler alert it was me just me.
Um and once the agency delivered this brand there was enormous pressure both internally and externally start delivering quickly and start like sharing this brand with the world right um and we were already positioned before the rebrand are thought leaders in the brand space just due to the nature of.
Our business and then we did a brand refresh with a really impressive agency so straight away with a really small team there was enormous pressure on us to start to do something with it and i’m going to say that the results were mixed i’ll show you what i mean i’m going to pop across alright here you go.
So um i will kind of i’ll start positive i’ll start with the stuff that we went through again like our ideation figma really empowered us to be able to just like lay it all out on the table and just kind of iterate quickly and that was really important for us and so what you’re looking at right now is og or feature.
Images for the new website the website was kind of where we started um we knew that we wanted to create something super modular that was created almost like a an on-brand palette on every single page and this is kind of like the evolution visually of where our og images went to in a pretty quick time frame um and i guess the cool elevation of.
This that takes it into the automation space is that yes we ended up with this suite of really cool beautiful edgy og images but the little elements to the left of each one of those og images the little tile looking guys these actually correspond with blocks on our website so the way that the blocks work is that um whatever the header.
Block of that page is the color palette we can kind of pull from some information from that and these are generated automatically we don’t have to design these um they’re designed once in figma but we know that the color palette from say like our maroon block has a certain pop color and that informs our kind of arrow cta button we know what.
The the page title is we know what the url is we know what the feature image is and so all of those elements go together to create these og images that are automated every single time so when um the other thing that we did and iterated quite quickly as everyone will empathize content is such a big part of what we do especially in sort of the.
Tech and marketing space and we’ve got quite a few ebooks so we managed to iterate these quite quickly um and create something that not only worked really well when we started to roll things out visually with our promotional assets but when you looked at them as a suite you could kind of tell that if you saw any.
Of these in isolation that they belong to outfit um we’re also just going to transition into stuff that maybe was a bit more of a struggle um sub product collateral was uh and like it’s just a learning curve for us um some of our sub products starting to put together collateral to explain like.
Our make api for example um i mean on paper technically these colors should go together um but it started to teach us things about like how much content should go onto a page and what colors should we use together and what ratios um and so like there were quite a few of these pieces of collateral um and even internal signage where.
We started to say look some of these pieces from a design perspective are really beautiful but we look at them and they don’t feel like us um so i guess the kind of summary of that learning for us was that like figma enabled us to get information out of the brains of our subject matter experts and.
They often weren’t designers um they could iterate really quickly and collaborate and that was awesome um we got some things right but what we realized is that when we got it right they were often designed led marketing led pro i guess projects that we’re working on um we eventually have gotten to a place.
Where we’ve kind of tightened up a lot of these processes but as you can see in the beginning there were some rough rough concepts um but the trial and error led us down a road towards a new sort of process um and it was really important for us to kind of go through this.
Journey for two major reasons as i see them the first is that we could work on whole campaigns quickly on one art board and get pretty good at understanding the visual consistency across a range of different pieces um also super handy for when those things end up in outfit and you’ll kind of see why in the case study um but it also started to inform a sort.
Of framework which has become a bit of a guiding light for us at outfit so let’s talk to the framework um like i mentioned in our agenda we uh we wanted a way that we can be able to problem-solve quickly um but then offload that work once we understood it once we understood how uh our social media pieces were coming together once.
We understood how we did emails once we understood how we um were able to to sort of build out new slide decks we needed a way to be able to scale that and then automate that at a certain level as well for some things i guess what allowed us to to do that or.
Or what allowed those pieces to progress was our confidence level uh in that our confidence level that if we were to pass that out to a non-designer audience are they able to create something that is on brand and is meeting our high brand standards that we needed to maintain um but also confident in the usability of that piece as well um it’s.
One thing to to to sort of have rules and guidelines but it’s another thing that we’re actually giving those pieces to a non-designer audience that is usable that’s simple to use and that they understand um what they can and can’t do with it as well so so this is that that kind of that framework and and it starts uh it starts.
At the sole phase so what i mean by that is it’s problem solving basically but but to to who does that problem solving and where we do that problem solving um it starts with the designer and it starts on a platform like figma i’ll talk to the tools in a sec but.
It’s it’s that blank page effect of when you don’t know where to start and and effectively everything for our rebrand was starting at that at it was starting at that center we needed to be able to learn what those boundaries were and it means that we needed to insulate that work uh into a core group of designers to be able to execute that.
However once we started to to get to that point once we understand uh the rules the guidelines the many inputs that go into an uh to into a like a flyer the many permutations or different types of layouts and all that sort of thing for a flyer we would start to feel confident that um we’d be able to lock parts of those down um and pass those.
Out to our non-designer audiences um and where that starts i guess is it could be the marketing person sitting next to you or or it could be the sales guy who’s asking for a request um that’s what i mean by scale it doesn’t have to be massive either and then once you truly understand everything there is to know about a.
Piece of collateral like bec talked to in the the featured images on our website you can actually start to automate those no human interventions needed because in in that case it’s literally just a computer or an application making a request to generate a piece of creative and then.
Sends it back we know everything there is to know about share images we know that the template is going to account for those many inputs so we can just lock it away and there’s no human intervention needed so if we start to plot out where these different pieces of.
Our own brands sit right now this is where they kind of fall all the different types of creative so starting at the outside on the automate side of the spectrum you can see the share images that i talk to there um another one is actually qr codes they’re super simple all it is is a url and and maybe a color um.
You don’t need to you don’t need to design up a qr code you can just generate it automatically um in that scale phase then uh we we have rules we have guidelines we understand the many the many um sort of permutations of of those pieces um but human interventions still required there’s still a level of customizability.
Or unknowns in all of these pieces that um our internal teams still need to be able to do a little bit of problem solving in that space and then finally um in the center in in the soul phase we haven’t got to everything we haven’t done enough video and motion to to feel comfortable that we have proper rules.
And guidelines around that um we yes we have spot illustrations but we we don’t have a way of systemizing that yet um that’s where we definitely want to go though so what does the future look like for us um if if we think back to our product at.
Outfit what we help customers with is is in that pink band the scale phase um how they can drop collateral into outfit and scale that production out to their teams for us that’s our bread and butter but we want to be pushing that pushing that and offloading those workloads where human intervention isn’t ever isn’t.
Needed we would love to get to a point where um okay a new a new uh person on boards uh at outfit and um at the click of a button we can generate them a business card they’ve got a slack avatar ready to go um and we can get them up and running um there is no human intervention in that.
Sense so we want to be pushing the boundaries um for ourselves so that we can start to then get the learnings and then push our customers down that road as well because realistically as designers we want to be moving to high impact tasks the the things that are really going to push our brand forward um not making business.
Cards or web ads what are the tools that actually then get that job done for us um at that solve phase uh it starts in figma allows us to problem solve it allows us to ideate and when we do have those times where that blank page effect is real we’ve got the the components at our.
Fingertips to be able to just pull things together really quickly once we’ve got that confidence that we understand that we can then move it into a platform like outfit and we can codify up our templates lock lock it down based on the rules and guidelines that we set and open up inputs so that our users can can type in a headline make a change and.
And get that piece out as quickly as possible and then once again once they once we understand the many different ways that people are editing those templates we can start to start to automate that um instead of a human having to type in a headline it could be based on a database or it could be based on somebody making.
An event or firing an event on our website they’ve signed up for a form we’re going to give them back a flyer so so those are the tools that allows us to empower our teams um i’m going to kick over to beck and talk to the higher education campaign how we kind of used all three of those tools to to get this job done.
Yeah um so just to kind of set the scene a little bit and understand um what was involved in this campaign um our marketing team was again quite small and we definitely the way that our business is always innovative is with strategy in mind um.
And so the campaign itself was around kind of the higher education industry in our uk market um our marketing team was based in australia and we didn’t have a separate marketing team to service that market um and so we had you know a phenomenal lead generation professional and a phenomenal seo.
Person we had a lot of amazing content experts within our team and so we needed to push out a high impact personalized campaign that leveraged the skills of time poor team members um across a lot of different kind of specialties um and so that went to about 90 executive marketing professionals in the higher education space um in the uk um.
And it included a printed dl personalized flyer with a personalized qr code that sent them to a personalized landing page on our website with a demo video of how this piece of collateral was actually created in outfit with a personalized introduction um so what we’ll talk through we’ll have a look at the actual pieces themselves um.
But i guess the kind of key this kind of follows the framework of you know we kind of we’re able to utilize the figma platform for that ideation we were able to kind of work together and iterate that quite quickly push it into the outfit space and use some trial and error.
And then create some automation using our make api as well so you can see from what james is showing us here again not far off where our ideation began before which was that we the ideas were from a content perspective um we kind of knew that we needed some brains for a video they.
Started pretty rough it didn’t quite feel right and we iterated quite a few times on lots of content less content different color palettes then like lots of color arguably too much color trying to find that balance is always a fun little journey when you have a colorful brand like ours and then settling on a kind of visual.
Identity that maybe feels right from a design perspective the cool thing about figma was that we were able to kind of collaborate here and the developer who then built out um you know the the frames that were personalized using outfit or build the template itself in outfit um he was able to put those into the platform and go oh these seem really.
Good from a design perspective but when i put them into their software this is a reaction that we didn’t expect so he could kind of give us that feedback in figma using the comments feature we were able to collaborate super quickly give him back an aesthetic that he could then try to make sure that it worked in uh theory as well as execution.
Um the cool thing that we were able to do once we actually put the flyer as a primary example into outfit was that because we come from an outfit perspective there was never a chance for us like we never think about collateral on a one-to-one campaign basis so we never.
Just design a flyer for that specific purpose we’re always thinking about how could we use this flyer to service every campaign that we do for the next 12 months five years but in a way that it’ll feel fresh and new every single time by just designing at one time and you can see here that the kind of way that.
We broke those down is that the color themes are variable and they tie to our brand system so if we decided we wanted to switch up the campaign 12 months from now we can kind of play around with some different color palettes and have it feel like new creative um the other thing that was really.
Amazing about this whole process is that really all we wanted to leverage was data right so the way that someone can populate this creative they don’t need to be a designer they bring that information from whatever their crm is for us it was hubspot um pull it into what’s basically a spreadsheet.
We don’t need them to generate the qr codes because we know we can automate that um just give us the link that you want us to send that person to populate the information and then every single person on that list gets a personalized experience um and so you can kind of see here that alex has something unique so does ali.
Um and then like it just you can kind of see how this offers us the flexibility to go we’re going to run a completely different campaign in a completely different sector switch out our case studies switch out an image flip around the color palette maybe get rid of the qr code and all of a sudden this becomes.
Scalable scalable across many campaigns um so that was really exciting for us and i guess kind of the key point for i guess from my perspective being within that team is that we were able to build this campaign out in less than a month like amazing key content amazing.
Automations pretty schmidt design from where i’m sitting and it works and is scalable and it’s usable by us for many many months i think the the amazing thing that bec just kind of talked about i guess is the uh those first two bands there was that solve band which we utilized in figma.
And then the scale band where we’re now in outfit i’m just going to quickly touch on that automation band as well um knowing the audience i’m not going to dig into code i’m not going to do any of that um but but what allows us to automate is is primarily um apis and being able to kind of code those templates up as an example here you can.
See that this little qr code that’s actually it’s actually a template that lives in outfit that’s somewhere else and whenever we change that data those qr codes will update based on that so that’s one example of a really simple automation another example is also um uh all of the uh landing pages so as bec.
Mentioned the way that all of those qr codes would move to a pre-generated landing page that’s another example of an automation um where everything that that we move towards is is it was all about personalization and engagement um and same with in this case is video’s default um but uh we were.
Able to create sort of these these pre-generated videos and give that person a really personalized experience um we didn’t have to over invest in this campaign because we knew that we just wanted to absolutely nail it for these 90 people that we decided that we wanted to nail it for um and it’s been super successful in that sense um in terms of.
Just being able to drive engagement uh and and just start that conversation for for our audiences which has been great um so yeah so that’s the case study and i think in in summary there’s there’s three bits that we want to that we want to sort of um give you guys to take away the first.
One and i think one of the biggest ones is that it’s an evolution and and uh you can’t really shortcut um those learnings and understanding what works and what doesn’t work um as an example the the stuff i showed you at the start with our design system and how easy it.
Was to get that social media piece it wasn’t like it didn’t happen like that overnight um it took a lot of work and a lot of problem solving to be able to get to that point but in saying that once you do sort of hit on something that’s working and you start to create that design system um it it has allowed us to to work quicker um and be more.
Consistent and achieve that high level of um brand integrity that that we were striving for um and and if anything it’s actually helped uh for all of our branded touch points whether um whether it’s a platform team uh somebody working in the website or digital space or somebody who’s working in the visual design or graphic design space each of.
Those are working from that same brand playbook which is which is super important uh for us i guess the second point um and this is a really important one for me is be decisive and understand the needs and what i mean by that is that while i guess at the beginning of any of these processes we get the building blocks and.
We as like outfit are really passionate about moving this kind of like brand ownership or brand management in its the way that it has always been seen is like a gatekeeper right someone who really protects the brand like it’s some sort of amazing treasure we’re all super afraid of cowboys going and turning it into something really disgusting but.
Like we’re really passionate about moving from kind of gatekeepers to more like guides or like people who are empowering people within the organization to own the brand right like it belongs to them we don’t have a brand without them but i guess the draw card of that is that they need boundaries to make sure that they’re empowered to do.
It in a way that still is beautiful and authentic and helps build the brand identity not tear it down um and so what that means is that you need to make some tough decisions you need to set those boundaries and take people on that journey so that they don’t feel terrified or overwhelmed they feel like they they really understand it and they.
Do actually own it um and so i think it’s really possible for you to gain efficiencies for people to really buy into the brand for people to really feel empowered to use it if you give them tools and guidelines to do it safely exactly and i think the last one and probably most important for us we’re a brand management company we’ve been.
Working at this uh game for like six seven years so so we’ve always lived in that scale space um but you need to start small it’s like flexing a muscle like you’re gonna need to build that strength up to kind of getting used to that um so an example for us even was we would always get asked by sales guys for their.
Decks um i just need this component for this thing and and i put it off for months i i was i was just giving them a little thing that that they can get their job done finally bit the bullet and actually just spent half an hour put together a little icon component that they were able to change the color on.
And they were able to go in um and and just drop in the icon that they’re looking for to really hammer home a certain point um shared this with one of the sales guys and then it took off like wildfire um that’s a that’s an example of being able to scale your brand locking down those guidelines so they can’t stuff that up and they get.
What they need at the other side it’s simple and easy in that sense so that’s an example of where we can start small and that’s it i think um yeah that’s it thank you so much guys really appreciate it um and also thank you to anthony and the figma guys i think this has been amazing.
Um just just um helping out a smaller australian company it’s been great to really appreciate it awesome well thank you both so much this has been incredible and and i mean i i even love i always managed to learn something new on on all of these especially from the brand side as well.
So i really appreciate it and those are some really awesome takeaways there at the end too uh cool so we’re gonna we’re gonna transition now to q a uh so for everyone here let’s go ahead and share my screen so we’ve got this here great.
Awesome so again if for anyone who has questions feel free to drop them in that q a we’re going to go through some of our questions that came in right now if you’re having trouble finding the q a you can use the chat as well there’s some great great responses from folks in the chat too as well i think a lot of people are just as excited as i am on.
That that summary slide there those are some really great takeaways that you had um we’re gonna go ahead and we’ll start with a first question that that came in here um which was um thanks you know thank you for this very inspiring what are what are some of the main challenges that you often find when.
You’re implementing this framework with other departments or stakeholders um there’s a bit of a follow-up question here that i’ll just post right now like like what are common excuses that you that you might um that you might hear we’ll come back to that second part but let’s just start on that first question sort of like well.
You know what are those challenges that you’ve seen or or what are things to be that people might want to be aware of as they try to bring this to other departments and stakeholders i think um for for me the biggest challenge was um uh.
Being able to to create rules and guidelines on these pieces of collateral to to meet the different needs so if we’re talking about a a deck a slide deck for example um the sales the sales team is going to need a different um going to need some different content compared to the marketing team so how are we able to.
Kind of create something that meets all of those needs um and it meets all of those needs and we can start to lock those pieces down and the thing is you’re not going to be able to do it all from day one so i think it’s just taking one of those use cases from one of those teams and then being able.
To to bring in all of those other sort of bits of feedbacks or improvements um into those pieces so that over time you’re able to kind of um to nail it for everyone because you’re not going to do it from day one we had such different challenges bro my big challenge was not that my big challenge from a marketing perspective.
Was that like we i just can’t stress enough how much of an interesting challenge it is being a thought leader in the brand space in a business full of designers like my biggest challenge was the fact that people are really excited about this new brand and finding a balance between just give.
Me a sec i’m gonna give you guys some amazing tools just stay with me like it’s so exciting but you need to just hang on a second because like we went through really like the layers to it were like full brand refresh logo redo new font like and these all happen they didn’t happen in a linear fashion like there were chops and.
Changes in a lot of places and i think for me just walking that line of like empowering people and saying yeah please like help us experiment help us iterate but also please don’t build a full slide deck out and put it in front of our clients just yet because like trust me it’s going to be great just give me a second.
Awesome yeah and so so it sounds like they’re what you’re saying is that the there’s some guidance there’s guidance of the guidance almost as far as i’ll get back to you on that thank you very cool uh we had another question come in that’s around um so so as you’re moving towards this there’s more of this.
Automation right so we have you know you’re talking about um you know where you are with all of the different pieces of your brand framework whether that’s the video the social email web ads employee branding you know all of these elements what gives you energy when you’re when you’re automating these parts of your.
Brand how do you how do you stay how do you how do you keep that energy going um i think the energy comes from once you start to automate it you don’t have to worry about it again so so i think in that in that sense it’s it’s always um being able to.
It’s there’s a there’s a there’s an end in in in mind for when you’re thinking about automating things i think and and that’s what gives me energy it’s like okay well i can lock that away and it’s done so i don’t have to worry about that um for a period of time and that’s great and so i think i think that’s uh that’s what gives me energy on that side.
Nice very curious if you have any thoughts yeah like i mean what gives me energy as someone who is not in any way a developer is just a people like we’ve got a real atmosphere of like i know tim um our head of brand often says every idea is a bad idea and so what that means is that people feel really free to.
Just like give us the ideas and be like wouldn’t it be mad if we could do this wouldn’t it be insane if we could try that and sometimes they seem like really small things and then we automate them and those of us who aren’t technical are like oh my god i didn’t know we could do that.
And so for me what gives me energy is just like tiny little wins and just pushing that boundary a little bit further every single time and getting to spend more of your time on the things that are fun and creative and different and challenging big time awesome awesome uh another question came.
In here um for any any advice on how to align brand and product design so you know do you think it’s okay for brand and product to have the same foundation but then maybe have very you know start to start to split or maybe use your design system slightly differently based on needs how do you approach that.
Relationship i love this question um yeah i think it it starts from the same foundation yes 100 um but you need to start to so like an example for us is um color usage and iconography uh so once you kind of reach that product realm um yes we have a lot of colors but.
But realistically the for all the different warnings alerts all that sort of stuff we need to be able to extend that color that that color um that color spectrum same goes for iconography our icons on the brand side uh are great um but uh at small and small usage and all that sort of stuff from an accessibility perspective.
Probably not probably not perfect for that need so it’s basically how do we extend that product design system based on the foundations that we already have um the the cool thing about um our designs or i guess the um the way in which we build our products um we we have a uh a ui toolkit um that’s based on you can look this up if you want um.
Based on a react framework called called chakra ui um what chakra really allows us to do is uh utilize the same sort of primitive react components uh and you can retheme those really quickly with a really simple theme with really simple theme logic so all of.
Our websites products all of that all using the same ui toolkit um and i think the the all the the only thing that we need to do is really just switching those themes out and extending those themes when we need to which is um which is really great i think like probably like an ex expansion onto like obviously james is.
Like covered so well the technical side of like how to manage that but from like a brand and culture working together perspective like i just can’t impress enough the importance of taking like product on that journey with you and i know what was really important for us is like we keep harping on about the lean team thing but it was such a powerful.
Tool for us that when we were going through the brand refresh we assembled the team of what we kind of lovingly called the brand custodians and so what we did was we cherry picked someone who was passionate about brand from basically each department in our organization and we would sense check everything with those people so we’d be.
Like here’s an execution what do you guys think pull it apart or like we would work together like i worked with one of our product designers on a huge amount of those components that became part of our like brand atoms like i just think it was i think that’s why we succeeded right is because we had that team assembled of people from.
Different backgrounds and gave them the tools and said what do you think like we’re only thinking about it from a brand and marketing lens or a technical lens let’s bring it all together and um more hands make it more effective yeah that’s great i i see that myself too even in our own work as well and especially within figment where i can.
Just have like a design systems team or foundations teams or brand alignment teams that kind of thing and just bring all those different parties together and and uh it’s one thing to say that yeah shared ownership it’s very different to put it into practice than actually really folks to engage with you that’s great um a few other questions.
Here too as well um so i i love seeing uh some of the behind the scenes of just the real files and actually how things are put together and and the real work and the things that didn’t work and all that that kind of stuff because that’s a lot of a lot of what happens right that’s the majority of the iceberg that’s underwater that.
You never actually get to see all you see is this perfectly polished work um and i love that just sort of that down and to the right sort of approach to iteration that you see right there right it’s probably maybe related to right to left languages but in any reason we go that way um curious how you.
Uh once you have gone through approvals and you’ve gone through how are you pointing people to the final work how are you how are you directing people to to the areas of less ideation and more of like this is this is our direction that we’re going with do you want to take this one back this.
Is all you yeah i mean for us uh usually it’s pretty straightforward in the sense that we have as james likes to call it the do not touch file um and that is very treacherous and sometimes you let people eat and they have a small heart attack um honestly for the most part we um it’s a.
Combination really of a really clear and defined frame that really kind of walks you through okay what are the key take-homes that we need for this particular project this like nothing moves to this frame until we’re satisfied with what is our final work um but i guess the other part of that too is that usually we export the work and.
What is exported um i don’t like to put the word final in the end of a file because it feels like a curse for me um because then you end up with final v2 final v3 final v4 um which i’m not a fan of but i think a combination of if we’re presenting um to like larger stakeholders a final frame or a final page or yeah just like a zip x.
Zip export yeah even even just being able to use pages in figma for instance yeah so so you just you’re kind of on okay this is v1 somebody comes along with an improvement all right we’re up to v2 now and it’s just reordering those the latest is always at the top um yeah that seemed to work well and realistically we.
Did the same product design as well any improvements new page new thing um so so that seemed to work quite well as well and and you’ve got that wake of the work that came before that you can reflect back on raw from that kind of stuff as well that’s great yeah um another question.
That came in here uh so how do you think about brand scalability within automation and personalization right so so um you’re as you know into the future where there’s certainly going to be unseen scenarios or needs that that may not uh you may not be able to prepare for now so so how are you approaching that how.
Do you approach that scalability and automation with those unknowns it’s hard that’s the hardest part especially in the automation space like i think when you kind of reach that scale bench as an example when we put something into outfit um there is still a level of uncertainty right so if we’re when we’re opening.
Inputs up and we say okay we’ve just codified this flyer we’ve got these inputs um and so they can maybe change the layout they can move uh they can they can say they want to headline one here a headline two here and some copy but it’s kind of up to them um the issue you have at the at the.
Automation space is because it’s codified you really need to to be decisive in what you allow into the template and how you do that as well um i guess because those templates are html um and css you you can utilize like responsive uh design or you can use css to to or even javascript as well to be able.
To to flex a template and accept a level of um variants so so an example of that is um that the share image example that bec talked to depending if a headline is three words or two sentences um the text uh is is is sent through a javascript function that basically fits that text back to the space um.
But even then we need to have a minimum font size requirement so what happens when it goes over that great question um well i guess you would just you would just kind of uh do a couple of ellipses and and just say look there’s no more space so you kind of just always got to keep thinking about.
The fallbacks and keep understanding the boundaries of those inputs um and how you want to account for those but at a certain point you’re just going to reach a point and be like i i don’t know what to do anymore yeah and i think like a bit of our retro process like we learned so much from our clients too we have a real luxury in.
That sense that like our customer success managers work with some like massive companies from a rent because we’re pretty industry agnostic right so like we get the luxury of being going through those processes with our clients where they do retrospectives on their clients maybe like a display network has really released a new size or format or.
Like there’s just like things changed within that kind of digital realm for an example and so we’re constantly working with okay yeah we have this really robust suite but here’s the way that we can evolve it and so we kind of naturally get to do that ourselves like the constant retrospective and keeping our pulse on what’s going on in the.
Industry to see okay are there like natural ways that we can scale and are there more ways that other companies are personalizing that we could maybe kind of jump on board as well that’s great yeah and and i assume some of those unknowns are the challenges that you do want to put more brain power to and you do want to actually explore and.
Understand how they how they how they work how you want to talk about them great awesome well thank you all that’s most of the questions that we had here uh sorry if we didn’t get to any of your questions um but i just want to say huge thank you to to beck and james again this has been an absolute pleasure um please uh.
Everyone check out future live streams that we have coming up we run these constantly in fact we have another one coming up uh march 23rd uh you’ll be able to uh learn a bit more about uh building headless design systems and and i won’t even tell you what that means so you can be surprised and shocked and figure it out um if you have any ideas.
For us please we love feedback so please uh do not hesitate to reach out at community figma.com um you have i’ve dropped uh back and james’s twitters into uh uh the uh chat so we can hopefully continue the conversation if you’ve got more questions there as well and yeah just again thank you both so much uh this has.
Been wonderful and we will see you all next time thank you thanks all
Tune in to learn how the team at Outfit used Figma and and their own brand management platform to find a balance of flexible, …
Figma Official Channel,the,building,brands,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, product:figma_design, audience:designer, language:english, format:standard, produced_by:marketing, theme:design_systems, event:none, series:in_the_file, type:other, level:intermediate, primary_feature:, secondary_feature:,