large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/to-write-is-to-design-fdbe8440b44e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Simon Kümin 
Why Ginetta integrated UX writing in its design workflow
Anyone who works in UX design should stop thinking about text creation as an external service. Writing does not just result in a document which will later in some ways be implemented. Rather, writing is designing with words.
<h3>UX design vs UX writing</h3>
Over the last five years, UX design has become a very popular topic. Google searches have quadrupled over the last five years. Meanwhile, UX writing is still a neglected topic. Compare the Google searches over the same period:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jS62hSoOsbhWN_XeiFcbWg.png">Google searches 2012–2017. Blue: UX design. Red: UX writing.
<h3>Why is UX writing so important?</h3>
Imagine it wasn’t there.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NAIMmo96U6lJCHQI7rruTQ.png">Design doesn’t work without copy.
Written word is probably still the most efficient way to communicate with a user. On the other hand, copy does not work without some form of visual arrangement. From the beginning of the letter-press era, text was styled. It still has to be today:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hMwCSz6CbZx9-cOBU_nQQQ.png">CNN Lite is great. It’s accessible to all users and works well in emergency cases. But it also shows the disadvantages of “undesigned” copy.
Styling (as of 2017, mostly of the visual kind) helps guiding users and making them find what interests them. But even in a future of voice-based devices only, we’d need to take design-decisions and think about vocal range, intonation, dialect and sociolect. Content needs style as much as style needs content. The symbiosis of the two is what we call design.
<h3>Make UX writing fit into your design</h3>
In the 1930s, the American psychologist John Ridley Stroop had names of colors printed in different colors. He then asked people to name the color of the ink.
The result is well-known meanwhile. When name and color match, the task was very easy for people:
<img alt="" src="https://cdn-images-1.medium.com/max/280/1*Sgz0XYRs7a8O_yiSUxiUQA.png"><img alt="" src="https://cdn-images-1.medium.com/max/354/1*2V0A9-GMgR0LsqgQq1F6qw.png">
When word and ink color are different, it took people longer to name the color and they also made more mistakes:
<img alt="" src="https://cdn-images-1.medium.com/max/280/1*ZHI0fH6Tc0Gu9TpvaArA9w.png"><img alt="" src="https://cdn-images-1.medium.com/max/354/1*2MYr-XIgfnS9GggP9VORWg.png">
Stroop called the cognitive dissonance interference. It occurs even if a participant makes a hard cognitive effort.
In UX, this effect also exists: If your writing and your visual language don’t match, your design confuses users.
<img alt="" src="https://cdn-images-1.medium.com/max/768/1*6CrG5Owjjj5ld_PNBeRVIA.png">How you don’t want your legalese to be perceived. Users would struggle with interference.
A language is a complex system of communication. Visual design is a language, as is the written word. As soon as these two languages are applied in one interface, they interfere and interdepend. Words and colors, semantics and whitespace, grammar and typography all contribute to design. Therefore, they all need to be consistent:
<ul>
<li>If your text shouts at the user, make it visually loud. If you whisper, be discrete.</li>
<li>If you offer a new product that is simple and user-friendly, get rid of all jargon. Write simple and user-friendly copy.</li>
</ul>
Here an example of great design. Of course, you know by know that this includes content:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4X_9uGZZdflYHYOTjELVww.png">TunnelBear uses a cute bear as its brand character. They support the charming illustrations with product names that fit their brand and their brand voice.
<h3>How to integrate writing in the design process?</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*VhNQ3UL8QGiEPI9R22-7kA.png">Ginetta’s design-driven development workflow.
At <a href="http://ginetta.net">Ginetta,</a> we managed to include UX writing in our design-driven development. This means that writers closely collaborate with designers during the whole project.
Design-driven development has five phases. Each consists of iterations: First, we analyze the challenge, then we find the best solution and at the end, we conduct user tests.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*Tr1LMevSPrwWkqxr4ZlLpw.png">The adapted workflow for UX writing.
When I joined the agency, I was the first UX writer. So, before I started working on projects, we adapted the workflow’s phases and included UX writing in every single one of it.
Spoiler: blog posts about each of these five phases will follow.
<h3>The five phases of UX writing:</h3>
<h4>1. Content strategy</h4>
A good strategy is very important. It is the foundation of well-written (and well-designed) content. Never start writing before you have answered these five questions:
<ul>
<li>What? Define the key requirements and specifications of a project. A website demands for more copy than an app that serves the same goal.</li>
<li>Why? A project’s purpose. Why does a user need this digital product and what makes it better from its competitors? The “why” is very important later on for headlines, subheadings and intro texts.</li>
<li>Who? Personas are not only important for designers but also for UX writers. Depending on how the personas use language, we have to adapt our writing.</li>
<li>How? A brand and/or product has a voice and a tone. Whereas a voice is consistent and general, the tone changes according to the situation. It is quite self-explanatory that an error message demands a different tonality than a tweet which should make new users curious about an offering.</li>
<li>When? Last but not least, each product has a timeline.</li>
</ul>
<h4>2. Content modeling</h4>
Strategy is very high-level and needs some adjustments before you can actually start writing. It’s what we call “content modeling”. The phase includes four steps:
<ul>
<li>Splitting content TL;DR is a UX writer’s biggest enemy. Think of your content as many interlinked content units.</li>
<li>Structuring content User have a certain reading behavior (you can analyze it with tools like Hotjar). Good content (or rather, good content units) should react to this and be structured accordingly.</li>
<li>Defining a controlled vocabulary Each digital product should define terms that are essential to its core service. A great example is AirBnB: they call their accomodations not “flats” but “homes”.</li>
<li>Writing UI copy Write the copy for prototypes and have it tested by real users. This helps you to understand if your text is understood as you want it to be.</li>
</ul>
<h4>3. Content creation</h4>
Only now, you can and should start writing. Always keep in mind UX writing’s most important rule: be short.
<h4>4. Content guidelines</h4>
Whereas visual styleguides are very common, content guidelines are still a bit rare these days. This might be another sign that content is still not seen as what it is: a part of design.
Content guidelines serve the very same goals as visual styleguides: consistency. They help new writers adapt to the voice and tone of a product easily and quickly and make brand communication more professional.
<a href="https://styleguide.mailchimp.com">Here’s a great example of content guidelines.</a>
<h4>5. Content optimization &amp; support</h4>
Turn good copy into great one. The following measures help existing or new products to be more successful:
<ul>
<li>A/B tests Small changes can have a big impact. A/B testing allows to compare two text (or image) version within a short time and find out which one performs better.</li>
<li>SEO Above all, copy should be written for human users. It is important however to make it findable for search engines.</li>
<li>Launch communication Users can react negatively when a familiar product is redesigned. Sometimes, they even reject significant improvement. This phenomenon is called change aversion. We know when it will probably occur and how to minimize users’ fears.</li>
</ul>
<h3>Conclusion</h3>
Written content is extremely important for UX design. Therefore, it must be integrated in the whole workflow and be part of it from the very beginning on.
This concerns anybody who works in UX. Above all, I want to encourage designers to pay as much attention to words as to fonts, spacing and lettering. Only when the content is wholly integrated in your design, the interface will work. See it as a challenge: To design is also to write.
Thanks a lot to Ginetta’s founder <a href="https://medium.com/@simonraess">Simon Raess</a> for the support.
I design with words and work as a UX writer at <a href="http://ginetta.net">Ginetta</a> in Zurich. You should follow me on Twitter <a href="http://twitter.com/simonkuemin">here.</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fdbe8440b44e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/to-write-is-to-design-fdbe8440b44e">To write is to design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

To write is to design

To write is to design

Top Stories