My Dear Friends of Figma in Hello everyone my name is pinda i’m a ux writer at suv techx besides ux writing i also work in user research design strategy and design process improvement and today i’m going to be making a case for why i think ux writer needs design system and i’m going to be sharing with you the copy system we built in figma first of all in ux writing most of the.
Time not all the time but most of the time you want to use consistent language you wouldn’t want two different ways of writing okay in the same product this of course might not confuse your user but it will indeed impact the brand perception your customer might be wondering do you even have a standard at all.
Or as the ux writer you might probably came up with this new copy only to find out that copy of this scenario already exists with a slight variation in this case you wouldn’t want the variation you want to use the same copy to avoid increasing the user cognitive load unnecessarily but how on earth would you know that it already.
Exists or how on would you remember that it already exists among hundreds or maybe thousands of pieces of text in one application so now you can see the ux copy has some unique characteristics which are the consistency and its reusability just like ui elements actually.
Now another example as a ux writer you might be wondering if you should write the word approve or confirm here the use case might be a manager need to approve a transaction request but you might have decided that in your application you’re going to use confirm instead of approved here how can you make sure that your new ux writers know this or that you.
Yourself won’t forget this so when this kind of question arises what you could do is check the existing copy in the existing file but like oh dear each part would look like this there are like 50 screens there and there will be like five five to look up in or you could.
Ask your ux writing peers but chances are you get the answer like oh yeah i wrote something like that four months ago but i don’t remember exactly what term i used let me get back to you then that person disappeared for two hours to maybe two days because that person will end up doing the same thing.
This process is totally inefficient and unscalable wait what about having content style guys will that help well sky guides serve a different purpose they give you guidelines but what you actually need here is the library of all the copy you have in one product so one day we say enough this is madness we need a.
Solution so we came up with a solution one place to find all existing copy in the product the first use case is as the ux writer i want to quickly find existing copy that’s perfect for this button so that i can keep the copy consistent and i won’t have to reinvent the wheel the second use case is that once i found.
That there’s no existing copy that’s suitable for this button i can start creating new button copy with peace of mind well let’s meet annie annie is a ux writer now she’s tasked with writing copy for a button and she’s wondering should i use approve or confirm here with this new solution here’s what she.
Would do she can check existing copy by browsing or by searching and if she wants to search she can search by keywords in the copy or by metadata and i and if she finds that the copy already exists she could just use that copy but if this is something new she can know right away without asking around.
And she can start writing new copy then it depends on your process this copy might need to go through an approval process and once approved she can add this to the copy library well that’s the concept now let’s see how this works i start off by taking the button ui from the design library.
Now our button copy in this product is in one place and it’s right here i can search for button copy that has the word apply and there exists three pieces of text here and if i want to write okay now i’m directed to the correct way of writing okay in this application as you.
Can see there’s a synonym there and that’s for the search i can also browse the button copy we categorize button copy into a yes and a node type a yes button applies an action that moves the user forward in their journey no button does the opposite for example a yes button could be.
Accept allow apply now confirm and a new button could be applied later cancel don’t allow or pay later and if i’m thinking about writing register now i can see right away that it doesn’t exist so i have to create new copy i can do so by clicking on the text here.
And write register now it’s a good idea to leave a note saying when this new copy is approved i need to come back to this element to do something with it let’s say this copy is approved i’ll add it to the copy library we have a template here so i can just copy and paste this.
Then make it a component write to sister change the company name to register as well and click public change now i come back to the production file and click reset.
Override and open the library and there you’ll see the copy register being added so i’ll just select it as for pop-up messages again i’ll take the pop-up ui from the design library and i click on the word pop up to open the copy library for pop-up.
If you organize them the same way you see that this is unscannable because it gets truncated and even though figma expands the width of this navigation pane which might be good but it’s still unscannable because anyway because it takes long so you need to hover over the copy to see the full text.
So for long form copy like this we decide to leverage the space for the navigation instead so as a writer when i need to write a proper message i’ll ask myself what kind to pop up is this.
Is it a confirmation prompt an error or a success message if it’s a success message i select success and if it’s about booking success i select booking but if the scenario i’m writing for doesn’t exist i can see right away that i have to create new copy without having to ask around.
Now i’m going to show you how the visual and the copy libraries operate independently you can change the type of this button to secondary disable it enable it without it impacting the copy or one day if your ui designer wants to change the style this button to routed.
Corners they can do so again without it impacting the copy library they can also change the color of the button or the typography as well now you saw how it works now allow me to take you behind the scenes to see how we design this solution.
We apply the atomic design concept where we separate the visual and the copy a typical button may look like this but the visual and copy are managed separately the copy by the ux writer in the copy library and the ui by the ui designer and in their design library let’s zoom in on the copy library we make each piece of text a component.
Now in the design library you talk on the copy library and pull a copy instance from there so within the design library you have the copy instance and the visual component what we do now is we put the copy instant inside the visual component so the copy become a nested instance.
Now the ui designer can have different design variations without impacting the copy library and that’s the technical side of it now we still have a design challenge here we have to think about how to design an information retrieval system to support ux writers in the copy alignment process the system needs to support the browsing.
And the searching modes taking into account the writer’s information seeking behaviors with browsing what’s important is the organization scheme that will guide the writers to the copy they’re looking for and for the search we need to think about keywords and metadata the writer will be able to find the copy as long as.
The keywords match up regardless of where the copy is in the organization scheme as you’ve seen in the demo the organization’s game for button is pretty flat or shallow there are only two layers you decide first if it’s a yes or no type of button then you’ll see the list of all the button copy in that.
Category and this is how it would appear in the navigation on the right hand side and this works for short form copy however for long form copy the challenge nesting makes it unscannable in the navigation so for long form copy the organization scheme needs to be a bit more elaborate to support the navigation and it can.
Look like this then we create nesting using slash naming convention like this and then we add this to the component name there you have it in the navigation pane first you decide on the category then on the subcategory if there’s any and then.
You select the scenario you’re writing for now let’s see how we design a search let’s look at this example if you want to find the copy please confirm your email address normally i should be able to search using keyword contained in this copy or i can search using metadata now metadata is the data or in this.
Context keywords that describe this copy this copy is an error it appears in the pop-up it’s about registration and it’s related to email unfortunately we cannot search by keywords contained in the text well not just yet hopefully we can do this in figma soon so we have to decide where to put these.
Keywords in the design system so the system can fester to copy we have two options here to put them in the component name or in the description box what’s special about the component name is that the words you put here will appear in the navigation and we want to reserve this space for that so for the search we put both copy and metadata in.
The description box as for the component name that will be utilized for browsing in say you can also add synonym in the description box as well now we came across another limitation currently the the search in the design system doesn’t support specific search so if i type error registration and.
Email in the search box like this i got irrelevant results actually there’s only one piece of copy that contain all these three keywords so it will it would be great if one day we could narrow down our search uh you know using multiple keywords in sigma.
Well let’s talk a little bit about the file management one trick here is that due to the search limitation our workaround is to organize one five one copy element so we can narrow down our search scope for example if i want to find copy that has the word apply in buttons only i cannot type apply comma button because.
Then i will get irrelevant results probably resolve from page title or popups but i can specify this by selecting the button library in the drop down here by making well another benefit of this is that by making your copy component you can now benefit from something the designer have long enjoyed which is when.
You change something one it gets changed everywhere in the duplicates this is a master component and it had instances or duplicates and if one day you decide to change the way you write okay to okay why you can just change it in the master component instead of doing this three times in three different screen.
I know some of you have been doing this so all in all this is pretty much preliminary you see there are limitation and we’ve come up with many workarounds this is because design system weren’t originally designed with ux writers in mind so this is pretty much the prototype of this idea.
But what’s more important is its potential to become full-fledged feature or two that will empower you as writers as you can see the foundation is already there with a more efficient alignment process you can shorten your production time you can free your your ux riders up for high value work and most importantly it will.
Enable your ux riding operation to scale using consistent language when you have to can also lead to streamlined user experience and positive brand perception i want to make a statement here that you x writers too need design system we need a library where we can browse search and organize our copy and i think it is time that we have this.
Conversation so if you are ux writers well think of your copy as a system think reusability talk to your ui designer advocate communicate about the lag of two if you’re uxers and product people well i can’t emphasize that ux copy is crucial to your product success if you care about what and how your.
Sales person or your customer supports say to your customer you should be paying attention to what’s written on the interface because that’s how your product that’s how you speak to your customers it is an important to empower your ux writers with tools and processes they need to succeed and if your figma fault two makers.
Plug-in makers are there i want to say the ux writers are underserved their needs unmet and the opportunities are there and i think we ux writer will be happy to talk to you so let’s make design system work for ux writers too now i cannot do all this by myself luckily i have a great team.
You know at subtechx we are technology company that value creative ideas innovation and experimentation this experiment um this initiative about took place in the span of two weeks of course the idea has been there longer we try actually a different approach but it didn’t work and that’s okay but this time we kind of managed to make it work.
Within certain scope in our project thanks to these two people i want to thank my colleagues our ui designer atsuchai his inputs were crucial for this idea to work and you want to try something like this in your team it’s important that your power did you partner with your ui designer because they’re more familiar with this.
Tool than we are at chai also helped me beautify these slides he owned the visual and interaction design of this presentation i also want to thank our you excited rindada who’s been with me in this journey reynolds was in charge of prototyping we discussed and brainstormed a lot and she drew a lovely illustration shoot star in the slide i.
Knew i know they’re watching now back home in thailand it’s eleven o’clock there so allow me to say something quick hey pablo i am kuni kanti long time no no you are amazing and this is the end of my presentation i want to say this is actually just a beginning because if you like some of.
The ideas that i’ve shown you well then as a community let’s have this conversation and let’s see if we can make design system and decide tools work for ux writers too thank you
UX/UI designers have benefitted from design systems for years, yet no such system exists for UX writers. Join Pinda to hear how …
Figma Official Channel,writers,need,design,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, product:none, audience:ux_writers, language:english, format:standard, produced_by:marketing, theme:work_with_type, event:config, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,