Web. Text. UX. App.

I will be pre­sent­ing 2 projects.

#1

The first one is an app – I was in charge of UX writ­ing and it’s in Eng­lish. The rea­son I chose this one is that it shows how I go about build­ing brand voice mate­ri­als and a sound foun­da­tion to work from.

#2

The sec­ond one is a web­site – I was in charge of every­thing, from research to pro­gram­ming, to text.I select­ed this project as it shows how I col­lect and use data to cre­ate work. This one’s in German.

UX Writing Case Study (EN):
Project Management and Payment App

The Context

Hand­shake is a – fic­tion­al – project man­age­ment and pay­ment app for free­lancers and their clients to man­age projects, track hours and make/receive payments.

I was respon­si­ble for edit­ing the in-app text in Fig­ma and com­mu­ni­cat­ing pos­si­ble design and func­tion­al­i­ty improve­ments with­in the user inter­face to the oth­ers on the team. My edits based on brand voice mate­ri­als I pro­duced through­out the course; the most rel­e­vant ones are includ­ed in this case study. On top, I imple­ment­ed the sug­gest­ed func­tion­al­i­ty changes in the mockups.

This case study illus­trates my final project for the UX writ­ing cer­ti­fi­ca­tion I earned through the UX Con­tent Collective.

Project 

App design 

My role 

UX Writer, Con­tent Designer 

Scope 

Review and rewrite the UI con­tent for two types of users – free­lancers and their clients – for an app built for iOS and Android oper­at­ing systems 

Timeline 

Eight weeks 

Tools 

Fig­ma, MS Word, pen and paper 

Bild: Übersicht der App, Design, Tech, Informationsarchitektur, Brand Voice, UX Writing

The Objective

My goals for the UX case study

My main goal was to show the process involved in shap­ing the lan­guage with­in the app to best meet the needs. The UX writer’s role is all about how to name things with­in a design sys­tem in a log­i­cal and strate­gic way. Though I’ve includ­ed sev­er­al edit­ed Fig­ma mock­ups at the end of this page, a large part of my case study focus­es on how I cre­at­ed style guide­lines that – togeth­er with oth­er product’s assets – can ide­al­ly serve as a sin­gle source of truth across the prod­uct team (and beyond). To achieve this, I aimed to:

  1. Crit­i­cal­ly sur­vey the screens and assess how they might be eas­i­er for users to under­stand (from both a lan­guage and usabil­i­ty perspective)
  2. Back up my deci­sions and solu­tions with data
  3. Com­mu­ni­cate my think­ing and design process
  4. Show (not tell) my abil­i­ty to imple­ment the above

CLICK!

Getting Started

The prod­uct design team I was col­lab­o­rat­ing with was work­ing on revamp­ing the pro­to­type of the app, and rewrit­ing the copy was part of this process. Here are the Fig­ma mock­ups they shared with me (click the image to make it bigger):

Mockups

User flow overview

It’s impor­tant to fig­ure out how the peo­ple we are design­ing for will make the best use of the mobile app. User flows pro­vide a bird’s‑eye view of the prod­uct – they help us walk in the shoes of our users and iden­ti­fy pain points and chal­lenges. The designer’s draft was for­mat­ted in three basic sec­tions – set­up, onboard­ing, and ongo­ing use, with alto­geth­er five user flows:

  1. Login and first-time setup
  2. Onboard­ing (client)
  3. Onboard­ing (free­lancer)
  4. Ongo­ing use and mes­sage cen­tre (client)
  5. Ongo­ing use and mes­sage cen­tre (free­lancer)

Evaluating the given prototype

The eval­u­a­tion of screens and inter­ac­tions unveiled that the pro­to­type lacked refine­ment both in terms of lan­guage and design. To fix lan­guage pain points, I did com­pet­i­tive research, ana­lyzed the two user per­sonas (sec­tion A below) and used brand mate­ri­als I cre­at­ed through­out the course, includ­ing a glos­sary and style guide (sec­tion C below). To fix design flaws and add help­ful func­tion­al­i­ty, I made sug­ges­tions on how to fix them, added screens and wrote on-screen notes to the prod­uct design team to share my reasoning.

A: Exploration

Understanding the app and the people who use it

Features

With this mobile app, peo­ple can:

  • Cre­ate and man­age projects
  • Sug­gest budgets
  • Accept bud­gets
  • Send mes­sages
  • Track hours
  • Send bills
  • Send pay­ments

User personas

Every­one, say hi to Kel­ly and Tom. They are the user per­sonas that will be help­ing with the rest of our jour­ney. The UX research team pro­vid­ed per­sona work­sheets (click the images to read all the details).

Primary persona: freelancer

Kel­ly is 24, a dig­i­tal native web devel­op­er and new to the field of freelancing.

Goals: She’s learn­ing how to run a busi­ness and would like to earn enough mon­ey to live well, pay off stu­dent loans and put mon­ey aside. She’s look­ing to use a mod­ern plat­form to track the hours she works and bill clients.

Frus­tra­tions: Legal paper­work and tax forms scare her. Though she gets excel­lent feed­back for her work, she wor­ries her clients might not like what she cre­ates yet also about not charg­ing enough.

Secondary persona: client

Tom is a 52-year-old busi­ness own­er, with years of expe­ri­ence under his belt. Tom has hired Kel­ly to redesign his website.

Goals: He needs an updat­ed web­site so clients can find his busi­ness online and would like to engage with a plat­form that has robust options for keep­ing track of work progress with­out being tech­ni­cal­ly overwhelming.

Frus­tra­tions: He’s a pro with every­day busi­ness pro­ce­dures, but does­n’t enjoy bureau­crat­ic tasks, let alone any­thing too technical.

Any ques­tions you would like to ask me about the data?

B: Crafting Voice & Tone

“How do we sound?”

To con­nect with an audi­ence, we need to first under­stand who they are. What do they like? What’s impor­tant to them? What kind of con­ver­sa­tions are they hav­ing? What type of words are they using? What are they good at? What do they enjoy?

To devel­op a mean­ing­ful style, the first step was to accu­rate­ly pick out the sig­nif­i­cant infor­ma­tion from the data sheets pro­vid­ed by the UX research team and use this to tap into how our users Kel­ly and Tom might feel using the app. The emo­tion­al con­text helps make informed writ­ing choic­es fur­ther along. Based on the giv­en per­sona work­sheets, here’s a range of emo­tions they may experience.

Kelly – the freelancer – may feel:

  • Excit­ed about get­ting hired
  • Anx­ious to get a reply to the bid
  • Hap­py to be paid, to have the project appro­pri­ate­ly tracked with software
  • Impa­tient because every moment spent on admin is time away from the cre­ative work she enjoys
  • Empow­ered because the app makes track­ing, invoic­ing and billing straight-forward

Tom – the client – may feel:

  • Uncer­tain this app will real­ly solve busi­ness problems
  • Appre­cia­tive of it being easy to track sta­tus and com­mu­ni­cate with freelancer
  • Appre­cia­tive of it being easy to pay when the job is done or at agreed-upon instalments
  • Intim­i­dat­ed by new technology
  • Empow­ered by the easy way to work togeth­er with freelancers

Next was to cre­ate voice attrib­ut­es that answer the call to the user’s needs. The more spe­cif­ic the words, the eas­i­er it is to write con­sis­tent con­tent. When we write copy:

  • We are cheer­ful, but not excitable. We are a wel­com­ing place for all users, but nev­er hyper.
  • We are smart, but not cocky. We know what we’re talk­ing about, but we don’t use jar­gon to show off our smarts. 
  • We are trust­wor­thy, but not bor­ing. We are 100% trans­par­ent at all stages.
  • We are straight­for­ward, but not brazen. We lis­ten, empathise and say what needs to be said. No more, no less.
  • We are pro­fes­sion­al, but not stuffy. We allow the accu­rate and effi­cient com­ple­tion of admin­is­tra­tive tasks and payments.

At this stage I would have involved my team to get input. 

Here are a few sen­tences I would have asked my team­mates to complete.

Bild: 4 Fragen, um Brand Voice zu identifizieren

C: Content Style Guide

Defining words and writing style

Bild: Brand Voice macht ein Produkt einzigartig

Good UX copy requires accu­rate use of ter­mi­nol­o­gy and is con­sis­tent. Deci­sions need to be made at the begin­ning of the design process about the voice, per­spec­tive, style, and strat­e­gy. That makes cre­at­ing and main­tain­ing writ­ing guide­lines that are in line with the brand a nec­es­sary evil.

  • “Is it con­trac­tor or freelancer?”
  • “Should the date be 23 June or June 23?”
  • “Do we write email or e‑mail?”

The voice brings con­tent to life. Using a con­sis­tent voice rein­forces the brand and sim­pli­fies a person’s inter­ac­tion with the prod­uct. This in turn inspires loy­al­ty and leads to trust.

Which terms should my team con­sis­tent­ly use in the app and why? As a start­ing point, I brain­stormed all the words that both free­lancers and clients would use in order to find the com­mon lan­guage from which to build the voice, tone and style guidelines.

  • Free­lancer
    (not entre­pre­neur)
  • Client
    (not busi­ness own­er, entrepreneur)

List of terms to use for the app (in alphabetical order)

  • Add. Enter. Use.
    We use sim­ple, unam­bigu­ous, every­day verbs. This is to make usage of the app as fric­tion­less as possible.
  • Auto­mat­ic
    We are here to sup­port the users and that means automat­ing process­es in the back­ground, so they can focus on the work they enjoy. This is a sell­ing point.
  • Bud­get
    Reg­u­lar use will remind both the free­lancer and the client that man­age­ment and pay­ment of mon­ey is a vital part of the project and partnership.
  • Effort­less. Sim­ple.
    The more mat­ters that can be made into sim­ple or effort­less steps, the bet­ter. This is worth highlighting.
  • Flex­i­ble
    The appeal for both audi­ences is how much eas­i­er it makes their work. Flex­i­bil­i­ty is key.
  • Invoice
    More pro­fes­sion­al than “send me a bill”.
  • Pay­ment
    Clients will see this in sit­u­a­tions like “pay­ment is due” and free­lancers will see it in sit­u­a­tions like “you have received pay­ment…” This term clear­ly indi­cates what is required on both ends and is more spe­cif­ic than “cash sent” or “mon­ey sent”.
  • Project
    For either audi­ence, jobs will be referred to as projects and tasks are a sub-cat­e­go­ry. The word project has cre­ative con­no­ta­tions for the freelancer.
  • Track (time, project)
    Use this in ref­er­ence to how a free­lancer will doc­u­ment his or her work and how a client will be kept up to date. It’s a straight­for­ward term every­one under­stands and is more spe­cif­ic than “log­ging”.
  • Work
    When we talk about what’s being pro­duced by the free­lancer, if specifics are unavail­able, refer to it as their “work” and not “deliv­er­ables” or similar.

Which terms should not be used and why?

List of terms NOT to use for the app (in alphabetical order)

  • Deliv­er­able.
    Avoid this kind of busi­ness jar­gon. If we can be spe­cif­ic, we are spe­cif­ic. Oth­er­wise, just use the word “work”.
  • Mon­i­tor. Keep tabs.
    Specif­i­cal­ly when talk­ing to the client, our inten­tion is not to help them micro­man­age, but sim­ply to see how a project time­line is tracking.
  • Opti­mise pro­duc­tiv­i­ty. Max­imise pro­duc­tiv­i­ty.
    It is up to the free­lancer how pro­duc­tive or opti­mised they are. We are not here to push max­i­mum effi­cien­cy. Our job is to facil­i­tate their work­ing style.
  • 1099, net 15, net 30, and oth­er tax-spe­cif­ic ter­mi­nol­o­gy.
    We avoid (tax) jar­gon at all times.

We aim to main­tain ver­bal and brand con­sis­ten­cy between all prod­ucts and out­lets. When writ­ing for the app, remem­ber to keep lan­guage con­ver­sa­tion­al. Keep things clear and sim­ple, be direct but friend­ly. Some gen­er­al tips (excerpt from style guide):

  • Stick to infor­mal styles

  • Cut the fluff – be straight­for­ward and natural

  • Speak direct­ly to the user (use the sec­ond per­son “you”)

  • Use the present tense

  • Use the active voice

  • Use con­trac­tions (use com­mon ones like “you’ll” and “you’re” but avoid rar­er con­trac­tions such as “this’ll”)

  • Use gen­der-neu­tral lan­guage; use the sin­gu­lar “they”

  • Use ter­mi­nol­o­gy con­sis­tent­ly (see glossary)

  • Pri­ori­tise clar­i­ty (brevi­ty and gram­mar are impor­tant, but clar­i­ty is crucial)

  • Some inter­jec­tions are nice, but don’t over­do it (!!!!)

At the core of the new brand voice here is human-cen­tric lan­guage. My main goals were to use clear writ­ing that would make it easy to use the app and to com­mu­ni­cate my ratio­nale to my team with sound rea­son­ing and in a diplo­mat­ic way.

An impor­tant aspect in devel­op­ing the brand voice was to shape it in such a way that it would speak to – and res­onate with – both audi­ences. I also focused on eas­ing the cog­ni­tive load that comes with pay­ment and bank­ing soft­ware, as this type of app often has a steep learn­ing curve, which can be off-putting. It was crit­i­cal to posi­tion the app as a sim­pler alter­na­tive for free­lancers and their clients. Besides apply­ing the brand voice, adding micro­copy and tooltips came in handy for this.

Understanding the difference between voice and tone

We have one brand voice, but our tone changes, depend­ing on to whom and what we’re com­mu­ni­cat­ing. For exam­ple, we use one tone when cel­e­brat­ing an accom­plish­ment, and a dif­fer­ent one when warn­ing about a violation.

Bild: Ton variert, je nach Kontext
Tone spec­trum – from fun to seri­ous and every­thing in between

Any ques­tions you would like to ask me about the style guide?

D: Bringing to Life

Applying brand voice to product materials

To get famil­iar with the voice attrib­ut­es, I cre­at­ed a series of sam­ple head­lines and body sen­tence pairs for the onboard­ing screens. They need­ed to be of a cer­tain length*, speak to both audi­ences and describe shared benefits.

  • Easy as a hand­shake
    We han­dle billing, so you can han­dle your business.
  • Save time and mon­ey
    Spend it doing what you love.
  • Con­ve­nient pay­ments
    Online billing at your fingertips.
  • App-man­aged projects
    A mod­ern solu­tion for mod­ern busi­ness owners.
  • Avoid the has­sle
    Hand­shake means peace of mind payments.

* Head­lines: 20 char­ac­ters max., no peri­od; body text: 40 char­ac­ters max., with period

To get famil­iar with flex­ing the tone of the voice, I wrote two emails. One for peo­ple who just signed up, and one for users who just can­celled their account.

Head­line: Thanks for choos­ing Handshake!

Body text: Hi [first_name],

You’re one click away from effort­less project man­age­ment, time track­ing and invoicing.

Hand­shake is all about the per­son­al touch. That means real sup­port, always. Vis­it support.handshake.com for FAQs and to lodge a help request.

CTA: Get started

Head­line: You’re mov­ing on

Body text: Hi [first_name],

This is to let you know we’ve can­celled your Hand­shake account.

Thanks for work­ing with us – we loved get­ting you paid faster. If you need us again, we’re one click away.

CTA: Reac­ti­vate Handshake

The Solution: Rewrites

Applying brand voice to UX copy in mockups

For the sake of brevi­ty, I’m show­cas­ing the Fig­ma pro­to­type series for the login and first-time set­up screens only, with­out the notes to the team. I chose this user flow because it’s an impor­tant – if not the most crit­i­cal – phase in any app user’s jour­ney. The more pleas­ant the onboard­ing expe­ri­ence is, the more like­ly a per­son is to come back and use the app. To achieve this, I focussed on three objectives:

  • Help the user to register
  • Edu­cate the user about the ben­e­fits and func­tions of the app
  • Gath­er pro­file infor­ma­tion that can be used to present cus­tomised con­tent and notifications

Login and first-time setup (before)

(click the image to make it bigger)

Login and first-time setup (after)

(click the image to make it bigger)

10 UX issues that called for improvement

Rewrit­ing the login and first-time set­up screens, there were many issues that need­ed atten­tion. Here are the ten most impor­tant areas I focussed on:

  1. Declut­ter, get rid of all text that is too wordy and use visu­al weight to con­vey impor­tance – sim­pli­fy with­out los­ing significance
  2. Cre­ate new text to wel­come the user with a brief expla­na­tion of the prod­uct and its uses
  3. Employ all caps for but­tons (max. three words, always), remove drop shad­ow and use clear action verbs
  4. Add but­tons, espe­cial­ly “back” but­tons, as these put users in control
  5. Improve usabil­i­ty by sep­a­rat­ing login (return­ing users) and first-time set­up (new users)
  6. Add labels and field text to all emp­ty states of fields to take the guess­work out of fill­ing them in
  7. Improve read­abil­i­ty of text for pass­word choice – eas­i­er to read and to the point
  8. Add “take tour” to help first-time users (with link to onboard­ing mate­ri­als such as videos or documentation)
  9. Add legal text and check box (this text needs a heads-up from legal experts before deployment)
  10. Add dynam­ic text (cus­tomised to each user’s name) to add a per­son­al touch that fos­ters trust with the user

Would you like to talk about a spe­cif­ic top­ic before we move on to the sec­ond project?

handwerk.ingebateman.de

The new wel­come screen now explains the val­ue of using the mobile app and how it will pos­i­tive­ly impact users’ lives. Sep­a­rate sec­tions for new and return­ing users are more clear­ly laid out with con­sis­tent CTAs. Upon suc­cess­ful­ly com­plet­ing account set­up, new­com­ers are now direct­ed towards onboard­ing mate­ri­als. This bit of extra guid­ance goes a long way towards reduc­ing churn, ensur­ing that users actu­al­ly com­plete the process of cre­at­ing their first project. And final­ly, adding dynam­ic text – cus­tomised to each user’s name and their project overview – adds a per­son­al touch, fos­ters trust with the user and serves as a home base that makes the app eas­i­er to use.

Wrap Up

Lessons learned

  1. Effec­tive UX copy is human-cen­tric and requires an under­stand­ing of the brand, its users, and their needs, goals, and motivations. 
  2. Writ­ing for user expe­ri­ence is a col­lab­o­ra­tive process involv­ing mul­ti­ple stake­hold­ers. Researchers, design­ers, and writ­ers all stand to gain from shar­ing their insights and expertise.
  3. UX writ­ing is a fun­da­men­tal part of the design process. When eval­u­at­ing the effi­ca­cy of a par­tic­u­lar design, prod­uct, or ser­vice, prop­er UI text is crit­i­cal to things like usabil­i­ty test­ing. Place­hold­er text only leads to con­fu­sion and frus­tra­tion on the part of those using the product.
  4. The impor­tance of work­place com­mu­ni­ca­tion. Since this was for a cer­ti­fi­ca­tion course and not a real com­pa­ny, resources for user research and test­ing were lim­it­ed. The project was con­duct­ed inde­pen­dent­ly, leav­ing scope for team collaboration.

Celebrating Accomplishments​

Dis­cov­er­ing Fig­ma was a game-chang­er for me. What dis­tin­guish­es Fig­ma from oth­er design tools is its col­lab­o­ra­tion fea­ture that makes it sim­ple to bring con­tent design­ers like me and oth­er stake­hold­ers togeth­er onto the same page. Mas­ter­ing the new tech­nol­o­gy forced me to look at every item on every screen and see what need­ed fix­ing and learn how to get it done. It was my first project using Fig­ma and dig­ging into the tech made me aware of just how pow­er­ful it is and that it’s a ton of fun to use.

The UX Con­tent Col­lec­tive deemed my high-fideli­ty mock­ups “ready to launch” and “out­stand­ing”. I achieved a grade of 115% on the final project and earned spe­cif­ic shout-outs for my atten­tion to detail, thought-process com­mu­ni­ca­tion and usabil­i­ty improvements.

What’s Next?

With the pos­i­tive feed­back, the next step is to make the app real­ly pop visu­al­ly and then do usabil­i­ty test­ing. We need to get our app in front of users to uncov­er pain points that may still remain hid­den. Then, fol­low­ing mood board inspi­ra­tion, an inter­ac­tive hi-fideli­ty pro­to­type could be built that takes the results of usabil­i­ty test­ing into account and strength­ens the design.

Keep for now

This case study illus­trates my final project for the UX writ­ing cer­ti­fi­ca­tion I earned through the UX Con­tent Collective.

Hand­shake is a project man­age­ment and pay­ment app for free­lancers and their clients to man­age projects, track hours and make/receive payments.

I was respon­si­ble for edit­ing the in-app text in Fig­ma and com­mu­ni­cat­ing with my team about pos­si­ble design and func­tion­al­i­ty improve­ments with­in the user inter­face. I took it a step fur­ther by imple­ment­ing the func­tion­al­i­ty changes in the mock­ups. My edits based on brand voice mate­ri­als I pro­duced through­out the course; the most rel­e­vant ones are includ­ed in this case study.

The Business

Next steps

A usabil­i­ty test­ing ses­sion of the fol­low­ing goals:

Ques­tions for freelancers:

  • How do you add your first client and link a project to that client?
  • How do you start tim­ing a project, pause then resume the timer, and then stop the timer?
  • How do you add time man­u­al­ly to a project?
  • How do you cre­ate an invoice from tracked time and send it to the client?
  • You want to know if you have any out­stand­ing pay­ments, where would you find this information?


Ques­tions for clients:

  • You’ve been invit­ed to Hand­shake. How do you accept the invi­ta­tion and log in?
  • You have received an invoice, how do you pay the invoice?
  • You want to know if you owe pay­ments and when they are due. Where would you find this information?


A/B test­ing:

  • ‘Add project’ ver­sus ‘Add job’
  • ‘Mile­stones’ ver­sus ‘Dead­lines’
  • ‘Client’ ver­sus ‘Employ­er’
  • ‘Project com­plet­ed’ ver­sus ‘Archive project’
  • ‘Pay invoice’ ver­sus ‘Pay now’
  • ‘Late invoic­es’ ver­sus ‘Over­due invoic­es’ ver­sus ‘Invoic­es due now’


Heat map of the homepage:

  • Does the sign-up/lo­gin sec­tion get overlooked?
  • Is the help sec­tion get­ting a lot of atten­tion? (Indi­cat­ing it is hard for vis­i­tors to find what they need.)


Analy­sis of user flow on the website:

  • Are vis­i­tors to the site sign­ing up after watch­ing our intro­duc­to­ry video?
  • Where do peo­ple who start their vis­it on the home­page drop off?
  • What is our main goal from the home­page (app down­load, login, learn about app through video tuto­r­i­al) and what is the goal for con­ver­sion rate?
  • Any upselling goals? Will we add new func­tion­al­i­ty at dif­fer­ent pric­ing tiers?
  • What is the main pri­or­i­ty: fos­ter­ing rela­tion­ships with exist­ing users or acquir­ing new users?
  • How will we dif­fer­en­ti­ate from competitors?
  • Where do we talk to the free­lancers and where do we talk to the clients? Do we cre­ate a web­page ‘For clients’ that gives them the infor­ma­tion they need and gear the rest of the com­mu­ni­ca­tion at the free­lancer market?
  1. An email wel­come series:

    • Wel­come and intro­duce sup­port and FAQ sec­tion of site.
    • Video tuto­r­i­al for adding clients and projects.
    • Blogs to enrich the expe­ri­ence through tips and tricks.
  2. A blog sec­tion with tips for free­lancers: how to find new clients, tax advice, how to use the app to improve workflow.
  3. Cre­ate a walk-through tuto­r­i­al that takes new users through the app and high­lights the loca­tion of dif­fer­ent fea­tures and how to use them.
  4. After they com­plete set up, make sure there is a clear call to action that gets them start­ed:
    “Yay! You’re ready to start. ‘Add your first client’”
    Repeat this in the wel­come email too.

The Process

What happened to kick off this project?

Bits & bobs

When I got down to rewrit­ing the con­tent for the app, I focused on cre­at­ing a clear and mean­ing­ful con­ver­sa­tion between the user and the prod­uct by using on con­cise lan­guage and main­tain­ing a casu­al tone with the user.

Facil­i­tat­ing a pos­i­tive onboard­ing expe­ri­ence is essen­tial for app retention.

is an impor­tant phase of any mobile app user’s jour­ney and get users famil­iar­ized with the app. It needs to be as seam­less as pos­si­ble – bold, sim­ple and rel­e­vant launch screens tend to work best.

Sell­ing a prod­uct is one thing, but mak­ing sure cus­tomers know how to use it is a whole oth­er challenge.