Client: The UX-team in the development department of Bonnier Broadcasting (now owned by Telia), with the streaming services TV4 Play and C More for VOD (video-on-demand). Workplace, the TV4-building in Gärdet.
Challenge: To create UX-design with a focus on UX-Writing and microcopy, in Swedish, English, Danish and Norwegian, for the UI on the website and the native apps for Android, iOS och Samsung TV. Also taking on an active role in designing the UX for onboardingflows, dialogues, information texts and other important points for the user interface in all services. Documentation of usability tests with users.
My role: My assignment started in October 2017, my official title was UX-writer and I was part of the UX-team in the development department. But I also took part in developing design for onboarding flows, conversion flows and payment flows, designing CTA-buttons, dialogues and more. Part of my assignment was to harmonize tonality cross all digital platforms, and I did this through collecting all documents that had been produced in different departments to describe the editorial language, the marketing language and the development department’s text routines. Everything was collected in one place online, with the purpose of making this a starting point for a organized Design System for Tonality, Voice and UX-Writing in the company platforms. I also produced a “praktika”, a handbook for the developers, with links to language resources, and many examples of how to write f.ex. Release Notes in Appstore/Playstore (instead of copy/pasting a single version again, and again, and again (!) after every update or release).
When: Work went on from October 2017 to beginning of June 2018.
Link: https://www.tv4play.se/, https://www.cmore.se/
.
From this …
To this …
Creating forms is not the easiest task. Collecting legal and personal information in a correct and simple manner is just one part. Other parts are balancing the need for an easy retrieval of a password with the security aspect – is it safe for our users if we reveal that a certain mail address is actually registered with us? Then the design language. What do we want to express with the shape and placement of our design elements? Modernizing this particular form, for registration of a new user, was a fun but challenging project.
.
From this …
To this …
To this …
Microcopy for user interfaces doesn’t need to be long. The words should just help the user move on without thinking. Straight, simple and kind information that is easy to get. Soft and friendly design language. Same functions.
…
From this …
To this …
Do we want to police the user, put up a stop sign, tell them that they’ve arrived to a gated community, and loose them as clients? Or do we want to invite them to explore and discover? We found another and more empathetic way of addressing the clients, from the user’s perspective. This view has been iterated on many times, this is the current version for C More, but I can proudly say I took part in the change towards a more welcoming apporach. The versions and the concept is the same on the web as in the apps.
…
From this …
To this …
Current version. The UX team has been iterating on our design for onboarding of users that are abonnents through cable networks in several versions, but they kept our original idea – to combine states in order to minimize the number of screens. The illustrations above shows the state for when the user chooses the second tab in the form. I worked together with the senior UI-designer to find the right model and we had three meetings with the project leader over different iterations until everyone was happy to release. The design looks almost exactly the same on the web as in the apps.
…
Filler.
Brief: Short copy text, possible to “get” in two seconds.
Functions: Branding, information about watching films and series without ads, on C More. Goal: to create a very short and smashing tagline.
Explanation: When you’re watching TV online, you’ll first be served a vignette announcing the ads, then a number of short ads and trailers, and finally there will be a filler – a vignette that says something like “The film will resume shortly”. The filler is there because the interruption for ads is always shorter on the web than with linear or analogue TV.
Challenge: This particular filler needed a new text, but the timespan was only two seconds. The text became more and more minimalistic, until we realized the message had to be “gettable” not mainly as a text but rather as an image of a text. We needed the Logo and then a short phrase that tells it all in just a second.
Conclusion: Short texts are often the most difficult ones. A lot of work, data analytics, and iteration, has been put in most of the really short microcopy that you will find in this service. We went through many suggestions and versions before we were finally happy with this filler. As a final “peak” one of the UI-designers also created an animated Pause-button that rotated in over the text. Done!
…
Usability tests were arranged regularly and at some occasions I got to help with the documentation. Above the document I delivered after a test of Swipe-functions. I watched the videorecording that documents how the user, and the UX:er giving instructions, carried through the test. I wrote down their dialogue and chose the parts that were most important for the possibility to draw conclusions. The task was to test an updated version of the streaming app. The user doesn’t get any instructions but is supposed to find out on their own how the functions are supposed to be used. The user was instructed to “think aloud” and voice out what they thought while navigating the app, good, bad, conclusions, etc. In this particular case the user is trying to find out how to switch between channels. It turned out to be so difficult that several of the pain points were changed after the test.
…
Call to action. “Please write something on the button. And – should it be red?” Working with different types of CTA:s are part of the UX-team’s work and here I was assigned to complete the editorial text. Aligning with the principle “make it simple” I decided to go with “Watch Trailer” for the CTA, and ask the editorial team to change their text instead. Which was done (but I don’t have a screenshot for that, and the film is long gone from the site).
…
Call to action i A/B-test. I designed a CTA-button that is supposed to inspire users to try the streamingservice C More for free, during two weeks. I came up with a version with a number “Try C More 2 Weeks For Free”, which drew more conversions after click than the others that we tried. It is still in use, in A/B-testing, and in combination with other versions.
…
When there’s no time. A large part of the work for C More consisted of translating the words on different views to English, Danish and Norwegian. Sometimes there was simply no time to think too much. I worked tightly with copywriters from Denmark and Norway but I was the one with the final responsibility, and I didn’t want the developers to use Google translate as a plan B. Thanks to my knowledge in coding I was able to take the J-son docs and correct the language directly there, so that we could keep the deadline for deploy.
…
I faciltated a workshop on language design and future usability in digital applications, for UX:ers, Marketers and Developers at C More and TV4 Play in 2018. We talked about how language changes in digital environments, and becomes more informal the closer to the user you get. What does it mean for usability, tone, and voice, that we are practically speaking everywhere with our users, in their pockets, or in their beds? How intimate can our language get, in gadgets that are part of our users’ everyday items, without giving them an awkward feeling or putting them off? And what kind of voice and tone is best from the perspective of conversion, or usability? In the workshop my participants got to do some simple exercises, for instance to write a selling text, then rid their language of all adjectives and reflect over how that impacts the message. Another task was “deliver a message to your boss”, where the participants got assigned to use different platforms – a formal letter, a note, an e-mail, a text message, a talked message – and reflect over how they changed their use of language depending on the context. We also talked about voice navigation, and how it will soon be something that users demand as a standard feature. And we finished producing new value propositions for TV4 Play and C More.
…