City Pantry

Brief

When I joined City Pantry, it was a tech start-up that was trying to expand rapidly in a competitive food delivery landscape.

Because of this desire to scale up as quickly as possible, the words of the City Pantry product were often written without guidelines in place.

To improve the user experience of the City Pantry product, I was tasked firstly with translating the marketing brand guidelines into usable UX writing guidelines. Using these guidelines, I then created examples of UX writing best practices for the most common digital interactions across the City Pantry website.

Tone and voice

The marketing brand guidelines for City Pantry describe the brand voice as:

Frank

Our voice should be up-front and easy to understand. That means we're direct and we get to the point. We tell our users everything they need to know, but not overload them with information.

Human

We use the language our customers use, swapping formal words for normal ones. We're a friendly bunch, not a cold and faceless organisation. We always talk to our customers like they're in the room.

Rebellious

We're not your standard food delivery company. And we don't sound like them. We use humour and personality to surprise our customers. Sometimes that means saying the unexpected.

These three voice pillars are used together to create one brand voice for City Pantry, but in UX contexts, there needs to be different tones to express the voice.

The tone of a brand's voice is important because we sometimes need to flex the voice through tone depending on the audience, circumstance or subject matter.

I created a tone profile to help people express the brand voice through digital interactions. A tone profile is two opposing words in which all digital touchpoints can fall in between. Some examples of tone profiles can be things like Casual and Formal, or Enthusiastic and Matter of fact.

For City Pantry, I did competitor research and based on our existing brand voice, decided that the tone profile should be:‍

Lighthearted and Serious

These are the two ends of the tone spectrum, and depending on the message, circumstance or audience, we should always fall between these two tones.

To help people understand how tones work across digital touchpoints, I then mapped the tone profiles across the sign-up and ordering experience. ‍

With these common touchpoints mapped in this way, I could easily explain to my colleagues what kind of tone they should be using depending on the experience the user was facing.

By doing this, it meant my colleagues would be more confident writing their own copy for City Pantry's digital experiences.

Copy audit

Once I'd devised a tone profile, and got myself more familiar with the brand voice, I could start a copy audit of the existing experiences across the City Pantry website.

Rather than going through the entire website and updating every bit of possible copy, I focussed on some main experiences that I could create guidelines around so the same mistakes wouldn't be made the next time these experiences came up.

The type of experiences I audited were:

Success messages
Error messages
Buttons
Empty states
Forms
Chatbots

You can read about the work I did on each of these messages below.

Success messages

For success messages, I defined some simple guidelines to follow:

Try not to assume the user will be celebrating every time they see a success message
Say thanks to the user if they've completed a key journey like making an order
Make sure to give the user next steps or somewhere to go

Message context

This screen is shown to the user after they complete an order.

Before

after

Changes I made

Added a personal touch by thanking the user and including their first name
Included clear next steps for the user that aim to instruct and answer any questions they may have which the original message failed to provide
Changed the passive language of Your order will be delivered to We'll deliver you food so the message was active
Updated the date formatting to be more conversational but also easier to read

Error messages

For error messages, I defined some simple guidelines to follow:

Firstly, say sorry if it's not the user's fault
Clearly explain what's happened and how it can be resolved
Don't refer to the user or use the word you as that can blame the user
Don't use negative language, robotic language or any playful language

Message context

When users try to use a discount code that is invalid or expired, they're presented with an error message.

Before

after

Changes I made

Removed the robotic language like validating and error which doesn't fit into the friendly nature of the brand
Removed the negative language of error! and there was a problem from the start of the message
Made the message concise by front-loading the most important content for into the start of the message
Removed the redundant sub-copy under the header as it wasn't necessary once a descriptive header was in place
Changed your code to that code as the use of pronouns in error messages have a way of blaming the user for the error
Updated the button copy and added an extra call-to-action so the message gives the user clear next steps
Removed the intimidating tone from the original message and added a touch of friendliness by opening the new message with sorry

Buttons

For buttons, I defined some simple guidelines to follow:

Inspire action with active verbs combined with a noun like Save changes or Download items
Explain what's going to happen next when the user clicks a button
Be concise with your button labels
Speak like a human being so avoid robotic language

Message context

Users choose food from restaurants for the week ahead, but if they know they're going to be out of the office, they can mark themselves as away so no food goes to waste.

Before

after

Changes I made

Removed the repetitive Are you sure messaging and make the header descriptive by putting the most important content into the header
Made the primary call-to-action clearer by using active verbs so the user knows what's going to happen when they click the button
The original buttons weren't clear enough, whereas the new button copy is easy to scan and therefore easy for the user to make a decision

Empty states

For empty states, I defined some simple guidelines to follow:

Instruct the user on how steps they can take to make the empty state no longer empty
Be clear about why the empty state is empty at this time

Message context

This message appears when the website can't find any restaurants that match the current search filters or there aren't enough restaurants in that particular location.
‍
Our sales team were struggling to decide which new restaurants to try and add to the platform, so they wanted a way of knowing which restaurants our customers actually wanted to order from.

Before

after

Changes I made

Added a Suggest a restaurant button as I believed if a user was already searching for restaurants they might be more likely to tell us which restaurant they were searching for
By adding that extra button, it gives the user another option and means the user is no longer left at a dead end if they see this message
Updated the header copy to explain the search issues with greater clarity and leaves them with no doubt about what the current problem is

Forms

For forms, I defined some simple guidelines to follow:

Provide clear value to the user of filling out the form
Keep the amount of form fields as short as possible
If you don't need a piece of information from the user, then don't ask it

Message context

This form is intended to generate leads through form submissions on key landing pages.

Before

after

Changes I made

Changed the header so instead of telling users what to do (join), the header tells users what we'll be giving them (information)
Replaced the Submit button - which focuses on the work the user has to do - with copy that explicitly states the value of signing up
Removed form fields which aren't necessary for the user to proceed

Chatbots

For chatbots, I defined some simple guidelines to follow:

Have one simple goal of the chatbot, don't overcomplicate it
Keep your messages short and sweet
Be conversational as possible
Ask clear and actionable questions that the user can easily answer

Message context

To try and improve our order conversion rate, we created a chatbot to try and understand if user's needed help ordering from the menu.

Before

after

Changes I made

Removed the unnecessary copy that wasn't relevant to the user's journey which meant there only had to be one opening message
Changed the answers to be descriptive as users tend to skim ahead to the answers rather than reading the full question
Made the chatbot experience more in line with City Pantry's friendly voice
Made the whole journey much more concise and easier to navigate for the user

City Pantry

Background

Brief

Tone and voice

Frank

Human

Rebellious

Lighthearted and Serious

Copy audit

Success messages

Message context

Changes I made

Error messages

Message context

Changes I made

Buttons

Message context

Changes I made

Empty states

Message context

Changes I made

Forms

Message context

Changes I made

Chatbots

Message context

Changes I made

Brand voice guidelines

Handshake

Let's get in touch 🚀