Overview

We live in an era where individual tastes and interests matter. People want quality customizable experiences on the web, whether that's in fashion, beauty or basic news consumption. Major news outlets are struggling because they are competing with social media giants (Facebook, Twitter, Instagram) and Google in bringing people to their news sites and apps. Meanwhile, these companies have already figured out the algorithm to constantly show content users want to see again and again, making news sites more obsolete and irrelevant. The CNBC mobile app redesign is an attempt to provide a customizable news experience so they can receive high-quality news from the number one business news site in the world.

This was a personal project I did inspired by my desire to make the CNBC mobile app more desirable for everyday consumers. I spent 4 weeks to complete the project from the initial ideation to finalizing the prototype for the imaginary app. My role was product designer where I focused on product strategy, user research, interaction, visual design, and prototyping & testing.

[If you want to skip ahead and view my prototype, click here]

The Problem

A recent Pew Research Center survey shows that over 85 percent of U.S. adults, including Americans 50 years and older, read news on a mobile device. With an overwhelming amount of news available on the web, it’s becoming increasingly more important to provide a pleasant user experience for people as they interact with their news apps.

People also have a short attention span and are easily distracted on the web. News outlets are competing and losing to Facebook, Google, Apple News and other news curation applications because they are unable to show users what they want to see. What if we are able to customize news for each user based on their true interests so that they won't go anywhere other than CNBC to get their daily dose of business news everyday? 

The Goal

• The goal would be to build a feature that would customize content for each user on the CNBC mobile app based on their interests and past reading histories in order to increase engagement on the app compared to other websites

Users and audience

For the purpose of this project, I created an imaginary but realistic user persona to narrow down the target audience for my product. Michelle Meyers is the primary user for this project. Michelle's main goal is to quickly find news, save articles and a feature that would easily customize content based on her interests.

The Design Process

I started to brainstorm on how I could improve the CNBC mobile app homepage so that the user could find the information they are looking for in a fast and efficient way. Too often, apps that don’t provide pleasant experiences tend to get thrown out or uninstalled. We want to avoid this at all costs. 

The first thing I did was research other national news mobile apps. I noticed that The Washington Post, The New York Times, CNN and NBC News all had icons at the bottom of the homepage. These icons allow the user to move quickly from one page to another, allowing for easy navigation of the homepage screen.

‍

The CNBC mobile app homepage on an Android doesn't have any icons and instead a hamburger menu on the upper left hand corner.

‍

I wanted to make icons for the CNBC mobile homepage just like the other news mobile apps because I thought this would be good way for the user to reach her goal, which was to find information in a fast and efficient way. Some drawbacks to having a hamburger menu might be that it has too much information or is confusing as to what it can offer to the user.

Here were some of my very first sketches of what the redesigned CNBC mobile homepage would look like.

‍

Here are some low-fidelity prototypes of the CNBC redesign mobile app based on the sketches from above.

I decided to create four icons for the CNBC mobile app using Figma. Home, For You, Video and Alerts.

• The first icon is the homepage icon which is the first screen that will be displayed when you initially open the app.
• The second icon is called "For You" which was inspired by the NYT and Washington Post. Both news organizations have icons that allows the user to customize their news content. The user can easily add topics of interest, e.g., Climate Change or specific articles they want to read in that section.
• The third icon is video which showcases CNBC's video clippings taken from CNBC TV.
• The fourth icon is alerts which shows the user news alerts they missed in the last 24 hours.

‍

The next step was determining whether to label all of the icons with text or not. The NYT labeled all of their icons on the bottom to avoid potential confusion as to what the icons identify as while CNN was less clear due to the lack of text. The Washington Post display the words under the icons when you click on the icon. I thought this was the best way to communicate to the user what the icon signifies as without creating too much information overload. Here are some high-fidelity prototypes of the newly designed CNBC mobile app homepage.

As you can see above, when you click on the specific icons it displays the text accordingly. Since CNBC is part of NBCUniversal, I also examined how NBC News designed their mobile app pages. I really liked how NBC News had big pictures on their homepage screen with a clear headline and bullet points to summarize the news for the reader. I took inspiration from the way the NBC News app was designed and implemented a lot of the same design in my CNBC mobile homepage.

As for designing the "For You" page, I took a similar approach in adding large pictures to label each section CNBC covers such as politics, markets, business and technology. Users will now have the chance to click the plus button when they interact with the For You page and the page will only show content they want to see.

Outcomes and lessons

In my initial prototype, I kept the hamburger menu on the upper left hand corner of the app that would be used as a default home button. Later, I realized this was confusing so I got rid of it and kept it simple with just four icons. If I had more resources and time, I would like to hear from other people on their thoughts on how to improve the CNBC mobile app and work through different decisions to create a collaborative team effort project. All-in-all, I believe this was a fun project for me because it forced me to think in a design-centric way to try to improve the CNBC mobile app.

Here is my final prototype of the CNBC Mobile App. Click HERE to access.