UX Writing

Content Design

In her book, Content Design, Sarah Richards advises that a UX writer needs to sound simple and human to the user. Also, we need to be inclusive, clear and have good level of empathy. A UX writer needs to talk to a wide audience and to empower them.

Writing is Designing

Writing is designing is a great book for all UX writers and designers. Michael J. Metts and Andy Welfle encourage UX writers to be a fundamental part of the design process. UX writing goes beyond words, a UX writer works with designers, developers, researchers, marketers, product managers and stake holders.

Voice and Tone

As a UX writer, you need to always consider that the content you create will reflect the company's brand and values. Every word you will put in the design will help users navigate your UI and better understand your product and your company. In other words, it is a mirror of how you stand as a company. Uber brand is an excellent example of how they want to approach their brand to the user.

Localization

As a UX writer you need to consider that the content that you are creating will be translated to different languages at some point, and the translated content can definitely change the design of different assets in the UI.

Notion

Notion is a real-time collaboration writing tool, perfect for documentation and, of course, UX writing. It allows you to personalize and create templates for your projects, and you can easily share the documents with your team members, stakeholders, and clients.

Ulysses

Ulysses is another excellent writing tool; it has features like word goal, which can help you moderate the number of words you want to apply in your UI. You can also post directly to WordPress and Medium, and you can even publish your text to ePub.

Grammarly

Grammarly is a great companion for any UX writer. You can copy your text to the app or use their plugin, and the app will review the text and suggest some corrections. This tool is potent and impressibly accurate.

Using components and variants for our UX writing process

For this exercise we will create some small cards that can help us divide the content that we will add in our UI. These cards will give us a good idea of the length of text that we will have in our UI when we translate it to different languages. Let's start by creating three frames sized 25 x 34.

On these frames, we will add some emojis that will help us identify the voice and tone of our text. Formal = 🙂, Casual = 😉, Enthusiastic = 😀. Make sure to use SF Pro Display Regular 25 points.

Select these 3 frames and remove the fill. We will convert them into components and then into variants.

Now I will create a box that we will use as the title box of our tile. So let's press F to create a new frame 300x54 and we will name it Category. Now we will add some color: fill linear gradient at 50% with the top gradient #18204F at 80% opacity and low gradient #18204F at 50% opacity. Make sure to add auto layout and a drop shadow with the following values x = 0, y = 20, Blur = 40, and the color #000000 at 15% opacity. Then set the border-radius to 15.

Inside this new frame we will add a variant from the Tone of voice, let's copy and paste the happy face emoji and next to it write Section.

Now, we will create a tile named card with a size of 340x144. Set thr border-radius to 10. Then on the color we will add the following specifications: linear gradient with the top color #C0CAF7 and the low color #F2F6FF. Inside, our card frame we will add the title box and underneath the title box we will add a text, where we will write content with fixed width 300. To finish, select the entire frame and add auto layout.

Now let's make a copy of our last component, and create description cards where the text for each section will be detailed. To do this, we will change "Tone of Voice" to determine the tone we should write in, and "section" will vary according to the section we are writing, in this case, title. Next, "content" will have a change of style according to the section; in this case, the title will be SF Pro Display Bold 40, and we will convert them into component with auto layout.

Next, we will repeat the steps for each card with the following styles: Subtitle = SF Pro Display - Regular 15 # 48507B, Email = SF Pro Display - Regular 15 # 000000, CTA Sign Up = SF Pro Display - Semibold 17 # 0E435C and Terms of service = SF Pro display - Medium 15 # 48507B

Then we will create a copy of each component and organize it within our layout. For the Email section we will create a frame with the following values: W = 320, H = 44, Rounded corners = 30, stroke = 1 # DBE1FF, Drop shadow X = 0, Y = 10, Blur = 20, Spread = 0 # DBE1FF 30%, auto layout on. Inside this we will drag the icon provided and the copy of the component. For the password section we repeat the action with the difference that we will use * in the text section. In the same way, create a frame for Sign Up with the following values: W = 320, H = 50, Rounded corner = 30, fill # 90DBFF, Drop shadow X = 0, Y = 0, Blur = 40, Spread = 0 # 90DBFF 30%, auto layout on centered.

To finish, we group the text within the design and transform it into a frame with auto layout; this will allow us to have an automatic spacing in any text change.

If we want to test the text in another language, we can make use of a plugin called Translator, which will help us translate content. It may not be 100% accurate but it is very helpful. You can download the plugin here.

Finally, if you want to test your user interface and see if the different languages, for example Spanish, don't break your design, you can translate the cards. It will automatically be reflected in the design. To do so let's select the cards, right click and go to Plugins > Translator.

Conclusion

Content is king, and this is applied everywhere, even in UI design. We always need to consider that the content we will put in our design will be translated into different languages. The text has to fit without destroying the original design utterly. Make sure to use the right tools and collaborate with all the other teams and project members.