UX Writer’s Journal: Telling Story with Toped Universe

Fahri Syadia
Tokopedia Design
Published in
6 min readNov 21, 2019

Some people might think UX writers only guide the users from page to page. But have you known that UX writing is also the right tool to make user experience more engaging, relatable, and emotional? Along with the introduction of new characters from Toped Universe, this moment remarks a whole new world in our UX writing exploration.

Expanding our imagination

Every day, what UX writers do is imagining. Imagining being on the users' position, imagining their mood on specific states, imagining if the message will cause them confused or not, etc. Okay, that's essential to gain context and craft a good copy for user experience.

But how if we want to imagine something more? Maybe a land of wonder or something more dreamy. It’s our goal to make the users’ journey through the app not only seamless but also meaningful and memorable.

After months of development, finally, we bring that idea into reality: Toped Universe, a platform where we can build a story of characters with the environment, friends, villains, etc. It’s a world of floating islands, where cute creatures live there. They collect and create Lucky Egg daily and then send it to the human world through Tokopedia.

Toped Universe characters

The story is centered on our main character and mascot, Toped (top left). Next to Toped is his friends: Pedi (the pink one), Cody (the big blue one), and Dot (the dog-like one). Then who’s flying next to them? Well, it’s our semi-antagonist character, Piko. Not forget to mention the sidekicks, Eggos (2nd from right), and the citizens (far right).

*Nb: the full story will be available soon

Okay, they’re cute. But the question is: how do we incorporate them into the product? This challenges not only illustration scope but also in copywriting. To ensure an excellent experience, we need to make both functions aligned. So, here how we handled this~

A golden rule called Tone of Voice

To maintain consistent copy throughout the whole product, UX writing requires a tone of voice (ToV). That’s why a good brand always has a tone of voice for a guideline to their conversation style. Usually, the ToV made by analyzing the product itself, the audience, and brand identity.

When developing Tokopedia’s UX writing ToV, we conducted a workshop with fellow product designers to identify what characteristics does their product should have. From that, we decided that Tokopedia’s main tone is casual, with the possibility to become more playful or more cautious in certain situations. Another thing included in our ToV is the copywriting core values (clear, concise, useful) and copywriting do’s & don’ts.

Dos and Don’t from our tone of voice

Since every state has a story, illustration and the copy must be aligned. Any illustration on Toped Universe’s illustration state must refer to this same dos and don’ts rule. This rule is made to suggest a positive mood for the users. Happy states become exciting, the neutral states become encouraging, and even error states become solve-able.

Copywriting & illustration alignment

From ToV to PoV

We have decided the tone of voice and basic guidelines. All this time, copywriting always based on Tokopedia’s general tone of voice. But after Toped Universe involved, shall we permit the characters to speak directly to the users?

That means we also have to decide the point of view (PoV). There are two options of point of view in storytelling. First-person, a character speaks to the users. If this is used, a copy of the product will be coming from each character’s voice. Or second, we use the third-person point of view. “The Voice” that speaks to the users will be coming from the narrator using Tokopedia’s general ToV.

The two possible PoV

To address this, first, we reflex on each character’s traits. It was decided that Toped Universe’s characters use different language than humans, just like Minions from Despicable Me. The second consideration, we reflex to Tokopedia’s tone of the voice itself. The ToV is made by Tokopedia’s general style, not each character’s style.

Therefore, we use the third-person point of view. The character’s appearance gives a visual representation of the state, while the narrator speaks to the users.

Implement, implement, implement!

Finally, we are ready to craft the copy! But before that, we need to build a whole new story behind the state to add a story to the context. So we conducted a workshop with UX and UI Designers to collect as many ideas and then shortlisted the ones we think the best. After the story decided, we determine the illustration, and then we craft the copy. And, here are the outcomes…

Internet connection error

Oh no.. Piko strikes again! He broke the antenna, causing the internet down in whole Toped Universe. While the fun illustration amuses the users despite the error, we also highlighted the storytelling side with the presence of protagonist and antagonist character.

Of course, we don’t forget the basic UX writing goals by giving a clear command for the users to fix the error: check internet connection, WiFi, and mobile data.

Server full error

Oops, Toped’s house is full of visitors at the moment. It’s even gonna explode! Here, we said that the characters would make space for the users to join them having fun at home. That’s how we give the users a sense of security by informing that we’re working to fix this — but with storytelling style.

This state also provides a more detailed environment about Toped Universe: Toped has a house, friends, etc.

Give rating app

Toped (left) and a citizen (right) are feeding Dot with stars. Meanwhile, in the real world, as an app, we can say that Tokopedia lives by stars that are given by the users. That’s why it’s told in the copy “Waktunya kasih bintang, nih!” (It’s time to give stars!). It’s a double analogy referring to the illustration and copy: (1) Toped and citizen giving stars to Dot, and (2) the users giving stars to Tokopedia.

Are we applying this to the whole product?

Well, it’s been only 3 months since the first Toped Universe introduced to product. Of course, it’s still the beginning of our exploration. Aligning copywriting and illustration to build interesting stories was our priority at that phase.

Then, will we implement this method on all Tokopedia states, from onboarding, empty states, error states, and after states? That would be lovely, but maybe not necessary.

Yeah, it’s fun to get a journey that rich with imagination. But on more “serious” state such as payment state, we’d still have to give more explicit instructions and less improvisation. Because guiding the users to reach their goal seamlessly will always be UX writing’s primary function.

Clear copy on loading payment

So, it’s also our duty to maintain the accuracy of this storytelling usage. We need to define when we could be very playful or when we should be more to the point, and then implement it through the whole product. So please tighten your seat, because we’re just getting started! #KamiBaruMulai

--

--