Newsboy

Tl;Dr; Newsboy is my BA thesis. It’s an iOS app for journalists that allows them to create, edit and share animated news-trailers of their most valuable stories.

In March 2015 I graduated with honours from the Free University of Bozen-Bolzano. Newsboy is the title of my BA thesis and the final result. And this is the story behind it.

Today news are consumed on devices that are interactive by their nature. So, if editors do not profit from these powerful tools, the output they produce will become increasingly stale compared to more elaborate and attractive interactions of apps such as Candy Crush or Netflix.

David Horsey for the Los Angeles Times. May 29, 2012.

My aim was to give the rightful attention to the stories that matter, but that are presented in a way that is not sufficiently attractive. In my opinion it’s nearly impossible to catch the attention of potential news readers only relying on the story title and subtitle published on their social network feeds.

Journalists usually spend a lot of time writing great stories, but how can they effectively promote them?

During my thesis research I understood that short videos are one of the most successful formats for raising attention online. Actually major news providers — such as the New York Times or the Guardian — are already promoting their stories with short and catchy videos. But of course they have in-house talented video teams that take care of this task. How can I, as a designer, give the possibility also to freelance journalists or small newsrooms that have no resources to produce attractive video-trailers?


First steps

Before getting started with designing the tool I wanted to test if my idea was effective enough. First I had to test if it was possible to produce a video-trailer starting from a news article. In my opinion if I wanted the app to succeed I should definitely not ask reporters to produce extra content for the news trailer.

So what I did was first taking a story. Second I tried to build a trailer on my own. An article from the Italian weekly magazine Internazionale got my attention. It was titled 6000 euro per essere abbandonati in mezzo al mare (6000 euros to be abandoned in the middle of the see) and it was the desperate story of thousands and thousands of refugees looking for peace far away from their home country. It was a bit less than 2000 words and it would require around 10 minutes to read it (based on an average reading speed of 200–250 words per minute).

I opened Photoshop and with the interplay of layers and the timeline tool I tried to narrate the story with a short video. By only splitting the title in different slides and adding the images that were already present in the article I was able to easily create a video-trailer for the story.

The result was quite pleasant. So I decided to push in that direction. I took a second story. And this time I tried to create the video not only with the title and images, but also with words from the article. I remembered that few days before I had read a terrific story on Medium by Virginia Hughes. It’s a 6000 words piece and it took me literally more than half an hour to read it all. That was the perfect story that needed a trailer in order to be rightfully promoted. In this scenario a title and a subtitles were definitely not enough in order to catch the attention of potential readers. I limited my timeline to 15 seconds which is the maximal video length allowed on Instagram.

Also in this case, with the simple combination of the title, the pictures and some words from the article I was able to create an attractive news-trailer.

Something that I naturally did was to create a square video. I think that in my subconscious I wanted the news-trailer to be consumed on social networks and mobile devices. And Instagram and Vine definitely played a big role in my decision. News need to be where the potential readers are and videos are the perfect medium that enables editors to summarise their stories and catch the users attention.


Designing the tool

Proven that it was possible to produce a short video with just the content from a news article, I decided that it was time to go on with the development of my idea. Without too much thinking I decided I wanted to design an app. I think that an app is the best option for such a tool. Usually an app does not require any particular knowledge in order to be used and most of the times the learning curve is really low if not absent. Moreover “forcing” journalists to produce the news-trailer on their mobile device would help them develop something which is already optimised for mobile consumption. This is also a limit from a design perspective. In most of the cases conceiving a desktop application ends with plenty of features due to the larger space available and obviously it brings with it a higher learning curve.

The small screen wasn’t the only limit. I also decided that I wanted to limit the number of choices that a reporter could do. What he or she could basically do is:

  • create a text slide;
  • add a photo or video from the library;
  • directly shoot in the app.

With this approach the journalist can just focus on his or her story without taking care of all the technical details that are not relevant for him or her.

Apple iMovie iPhone app.

Before diving into designing the user interface I took a look at some video-editing applications. Plenty of features and buttons constraint into a small screen. I immediately noticed that all the apps I reviewed had an horizontal timeline. That felt really unnatural for a smartphone screen. That’s when I decided that my app should have had a vertical timeline.

So armed with my trusted Pentel and paper I started wireframing the user interface. Something I tried to keep always in mind while drawing the app was to design and offer just one action per screen. I really wanted to keep the learning curve as much as possible close to zero. This approach has proven to be successful also for other bigger services such as the new Virgin America Airlines website and the iOS operating system. Displaying just one thing at the time drastically improves the user experience.

At first I kept the basic actions in a separate slide-in window. A very common behaviour on both iOS and Android devices. But I wasn’t happy with the result. I think that we should think more carefully about the kind of interactions we design and implement instead of taking the producers guidelines for granted.

Looking at this sketch today feels really like prehistory.

In a second round I tried to give the interactions a stronger semantic meaning. UI elements should not just appear from nowhere but they should naturally react to the user actions. That’s why in this stage I decided that, for example, the basic actions buttons should appear directly from the plus button.

As you can see in the splash screen the user must face just one decision. Either go through the guided tour or dive into the app. Same thing for the timeline screen. The user can tap on the plus button. As said, one screen one main action.


How the heck do I call you?

Between wireframing and visual style there was a small parenthesis about the possible name for this tool. I know what you’re thinking. Name should be the last. But let me tell you how it happened. I remember I was just talking about this project to a friend of mine and the moment after we found ourselves in the middle of a brainstorming session. It was crazy and awesome at the same time. A lot was put on the table. Of course news and video were our main focuses but we couldn’t manage to find something really catchy. But then, suddenly, we wondered: how the heck were called these kids from the twenties, thirties selling newspapers on the streets. We googled it and we couldn’t have been more right. Newsboy. That was the perfect name.

U.S. National Archives and Records Administration.

Visual style and direction

Being quite happy with the basic user flow and super happy with the name, I decided it was time to do some design explorations. Playing around with designs always helps me focus on the user interactions and it stimulates me to think about possible handy features. I decided to use Sketch mainly because for two of its features that I find really convenient. The first one is Sketch Mirror. I think being able to check your UI directly on your device — in a one on one scale and in real time — is really helpful. The second one is the export option which was vital in the prototyping phase.

In the early stages of the design I kept a more classical and newspaper-oriented style. A serif elegant font combined with pastel colours.

Classic pastel palette.

Even though I didn’t dislike it wasn’t what I was aiming for. Not only did I want to make news attractive again with a video-trailer, but I wanted to try to bring some fresh air also from a style point of you. This is one of the main reasons behind my eternal love to the new bloomberg.com redesign.

So I deleted the classy fonts and opted for something fresher and young. The second issue to solve were colours. Everyone knows I suck at choosing colours (as I suck at choosing CSS class names) so I run deeply into a crazy exploration that can be translated in something similar to this.

Disco time.

Prototyping

While continuing the research for the perfect palette I thought it was time for some interactions. I strongly believe that interactions should be a big part of the design process and should not be kept at the end, when the user interface is finished. They help us improve the UI in many directions. They help us consider things we didn’t consider due to the static state of our assets and they push our boundaries in terms of user experience and user flow. Something really beneficial is that interactions force you to think off the screen. They constrain you to break out that beautiful defined space that you love so much and in which you feel so safe.

It was my first experience with app interactions and I didn’t know where to start. I started googling around in order to find a tool that would allow me to animate the assets I did so far. Many where the results but at the end, after trying few of them, I decided to go for Quartz Composer combined with the amazing Origami library powered by the Facebook Design Team. The options that I discarded were InVision App and Framer.js. The first one because the impression I had was that you could put some fancy animation over your pixel perfect mockups. On the contrary Framer.js looked pretty solid but my very tiny knowledge of JavaScript pushed me towards something more visual like Quartz.

In order to get to know it I watched some tutorials and among them the one from Jay Thrash was the most useful. It helped me understand the basic functions of Quartz and how I could play with the different modules provided by the Origami Library.

I really fell in love with Quartz Composer and the Origami Library makes things run pretty smoothly. So smooth that after few days of play I ended up in things like this.

This is just a layer.

The final result

For the purpose of my thesis project I decided I wanted to develop two demos. One to show the basic actions offered by Newsboy and another to show how you can easily review and share the result that is the news-trailer.

At first launch the app shows the splash screen where the user can either take a tour or slide in directly to the interface. Once the user slides in he or she faces just one single UI element: the Add a slide button. If this call to action is triggered, the user can choose to add a text slide, select something that already exists in the library or shoot a picture or a video directly in the app.

During the prototyping phase I further developed the visual style and the features of Newsboy. In the Add Text screen further than typing a sentence the user can for example choose a typeface from a selected list and/or the colour palette of the slide. The font and the colours will apply to the whole video for design coherence. The font size will adapt automatically to the length of the text. The length of the text will also automatically set the slide duration based on an average word per minute reading speed.

In the Shoot screen the reporter can directly take a photo or a video in the app. He or she can as well add some text over it. Worth saying is that the journalist can add some text over the moving images before shooting. This feature allow him or her to easily play with the composition of the slide.

In the Library screen journalists can select some already existing content from their phone. They can also access to specific albums in case they have a particular collection of work assets.

Once the reporter has created all the slides he or she can review them in the timeline. The timeline offers small hints about the news-trailer length and it shows instantly if it fits on social networks that limit the video duration such as Instagram or Vine.

If the reporter is happy with the result by tapping the Play button he or she can instantly watch the Newsboy preview. And here is where the magic comes. Newsboy will automatically animate all the slides and their content setting automatically the duration for each slide in order to improve readability and consumption. Through all the process the only thing that the reporter had to take care was the content.

Of course another important feature is the sharing function. With Newsboy journalists can set their favourite social networks. Moreover users have the possibility to setup multiple accounts for a single social platform. This is really handy for reporters that work in a newsroom and that have access to the newspaper social profiles. This action allows them to decide to either publish the Newsboy on their personal account or on the news provider social page or both.


Appendix

This is how a Newsboy looks once is shared on social networks.

So this is it. This is Newsboy. I worked on it for 6 months during my thesis semester. I was lucky enough to learn a lot from many different fields. I had the pleasure to spend time and read such amazing books. I understood with what newsproviders are competing today and how they can improve the services they offer. I had the opportunity to play with amazing tools such as Sketch and Quartz Composer combined with the Origami library. I could understand what it means to design on and off a small screen and how important is the role that animations play inside an app. But it’s not over. I would really love to see Newsboy coming alive. As a designer I focused on everything I could. From the concept to the user interface and the user interactions. If you are reading this, and if you happen to be a mobile developer, write me an email or contact me on twitter. We could join forces and build something awesome!