Project: Redesigning the Digital Newspaper
This is the first UX project I led at Creative Labs at UCLA which we started in Spring 2016 for digital design collaboration. I facilitated brainstorming in a group of six people and everyone helped with wireframing. Here, I try to summarize our process over five weeks and the results we obtained.
Problem
Millennials don’t read the printed newspaper. The digital newspapers are trying to simulate the physical ones so they end up being really cluttered and people aren’t able to consume information from those. They end up using entertainment e-mag type websites like Buzzfeed or using news aggregators like Apple News which gather news from different sources and don’t create any. But the sources actually creating the news need money to continue to do so which they are losing on because of lesser readership.
tldr: less readers, less revenue, less news
Solution
Rethink the digital newspaper experience for the modern reader — the millennial.
Goal
Allow millennials to read news they care about, discover news they might be interested in and make this experience more social thereby increasing readership and revenue.
Users
We tried to categorize users into three personas, representing various use cases. This makes the redesign focused and efficient by actually solving the problems for the users we want. To do this, we followed a process I learned from Chris Do and Jose Caballer at The Skool.
Process
We gave the each of the three users a background story so we could start empathizing with them and put ourselves in their shoes by making them as real as possible. We considered their personalities, habits, preferences, occupations and bringing up. This allowed us to think about their needs and challenges as they related to the goal and find specific solutions .
Defining the Users
Sam — He’s a 16 years old Asian high school student in Ohio and he is the go-to tech guy at his school. He uses his laptop more than his phone and frequents Reddit, Tumblr and Deviant art along with Tech Crunch. He cares about some issues like global warming but doesn’t do much about it. He doesn’t care about the importance of news but wants to be in the know about technology. He doesn’t want to put in the effort so wants quick news but if something piques his interest he likes reading more about it. A good solution for him would thus be to show him tech news and a lot of opinions and allow him to participate in comments easily. Also a snapchat-like feature where he can read the news details quickly would be ideal for him and it would be good to allow him to discover news by showing him relevant pieces to the current article he’s reading.
Dan — He’s 22 years old and working in the entertainment industry in Los Angeles. He follows a lot of different type of news and usually reads at home on the weekends and at night before going to bed. He also vlogs about his travel and likes traveling to destinations popular in the news. He wants digests and condensed news and wants to find it out in a few minutes. It would be good to show him a video tab, location based news and news specific to the location before he travels.
Brittany-She’s a 20 year old undergrad at NYU studying politics/history and is an intern at a fashion magazine. She is part of the student government and reads the Huffington Post. She’s openly bisexual and is really active on social media. She wants to be more exposed to political and social issues and currently used a large number of apps to stay informed and share her opinion on relevant issues. She doesn’t have a lot of free time but commutes to school from Brooklyn on the subway. She wants to know what her friends are interested in. It would be really crucial to have good integration with her social media accounts, concise way to read, highlight and share points in the article, Facebook comments and reactions, and a way to see what her friends are reading.
Wireframes
The user study allowed us to come up with concrete features for the redesigned newspaper web/mobile app itself and we used it to do a competitive analysis by looking at all other newspaper websites and seeing what they do well and what they don’t to get ideas from good existing implementations.
We came up with the basic user flow as defined in the wireframes. You select your interests on startup, see the relevant articles with not more than 3 on the screen at a time, and see the summary of the article before seeing it in depth. At all times, you can view your friends and their reactions to the articles. There is also a section of fast news inspired by the stack on Vox which lets you quickly find about key happenings around the globe.
Style guide
Now that we had the wireframes down, we decided to start thinking about the visual language and style guide. We defined the color scheme according to what colors relate to the goals of reaching the millennials and having a contrasting primary color that evokes good energy and can be used to make things pop and give them an appeal. We selected the typography based on what people find easier to read in headings and paragraph styles and landed upon a san serif font Avenir Next Black for the headings, Avenir Next Light for the subheadings and Karma for the paragraph text which is a slightly more smoother version of Baskerville and has a little more x-height which makes it more legible.
We also defined a grid system so that there’s never more than 3 groups on the screen. A group can either be a long horizontal news article, a long vertical news article, a short news article or a set of 3 headings for fast news. They can be arranged in any way except putting two small ones side by side.
Mockups
With the style guide in hand and a good idea of what features we wanted to implement, we started doing the first iteration of high fidelity mockups for the design. We did them for both web and mobile and made some framer prototypes to see what the interactivity would be like.
The home screen was designed for the web to show how the grid system would work so that the user is able to see all the news stories because of the visual hierarchy as they scroll down the home page. It expands on clicking the article and the article page has the ability to add to reading list, bookmark or share the article by either sharing on social media or suggesting to friends on the web app itself to retain users. This is followed by a short summary of the article that people who just want to glimpse through it can read and return to the main screen. We also plan on doing this by long pressing on mobile and force touching on the mac.
This is followed by a reading time for users so they can decide whether they want to read the whole article or read it later by adding it to the list. If they choose to read it, the reading experience is a clean and ad free one because of other discovered ways to monetize (see below). While reading the article, they do see top highlights really lightly because of the power of annotated web and see what their other friends think is important about the article.
They can select any text that lets them highlight, share or search for that text again causing user retention and engagement. This is followed by a discussion of the article using Facebook comments so the reach can be improved when they share the articles and comments can be aggregated. It also has the sharing options again so they don’t have to scroll all the way to the top to do that. This is followed by related articles one of which branches out of the current topic a little to potentially interesting topics and the other one is a more related news article. These are also replaced by promotional material which is targeted advertisement to cater to the user’s interests. Scrolling down further takes them back to the home view and collapses the article.
Another key feature is Friends section where you can see what your friends are reading, liking and you can suggest articles to each other. The following is an interactive framer prototype and a video to demonstrate the user flow on web and show the interactivity we intend to have on the elements.
User Engagement
We thought of a few things to keep the users engaged. Besides a good selection of related articles, the large amount of sharing features, the friends features along with the intrinsic social integrations allow for a good way to keep users in communication. We plan on having desktop and push notifications for keeping the users updated even when they are not actively looking to read and to time the notifications in a way that they don’t disturb them when they have things on their calendars.
Monetization
We had some unique and interesting ideas for monetization as well. One of them is that we can show targeted advertisements instead of general ones. And rather than being random ads, they can be of something the user is interested in that are sponsored. So if the user is interested in reading about a lot of articles on stress, a sponsored class on stress management can be suggested.
Another idea was to integrate shopping into the platform. So basically throughout the images and videos across the site, if they contain pieces of clothing, furniture or electronics that can be purchased, they will have an icon on top that represents that and they can click on that to see the things they can buy and they can buy them directly. This could work especially well for gossip and entertainment news in particular and give new powers to brand promoters.
Summary
I had work on small UX projects before but this was the first time doing something this elaborate and leading a team to do so. Everyone on the team was also doing UX and UI design for the first time so everyone had a great time. We were able to figure out how to run things better in the future, how to lead to quicker results and divide work more efficiently. Overall we were happy to have met our goal of redesigning the digital newspaper experience to allow millennials to read news they care about, discover news they might be interested in and make this experience more social thereby increasing readership and revenue.
The following people were part of this Creative Labs Project:
Rishabh Aggarwal
Rachelle Juan
Nicolas Mickovciak
Gabriel Hughes
Kelley Nguyen
Brian Shih
