Company 
SmartNews, Inc.

Role
Lead Product Designer

Goals

• Refresh Top Channel UX/UI to boost retention and engagement

• Define design principles for designing future feed experiences

• Upgrade UI to meet WCAG 2.0 standards

Opportunity

A large percentage of users are arriving at the Top channel for the first time, leaving without engaging at all, and never coming back. By considering the design of the app from a holistic perspective, as opposed to the many piecemeal tests done in the past, we can create a more cohesive browsing and reading experience. The hope is that this will drive user satisfaction and therefore retention.

Problems

User

• Poor Accessibility Design

• Confusing Navigation

• Hard to Discover Content

• Inconsistent and Outdated UI/UX

Business

• Declining engagement and retention metrics

• Feed architecture based on JP framework, content, typography

• Legacy tech stack = Inflexibility of UI in the feed

• Lack of process for creating new UI or using existing patterns

Goals

• Reconsider the top channel experience for users, and realize a revenue increase, along with at least neutral engagement + retention

• Explore implementing large cells (rich content/revenue)

• Improve quality of UI, including meeting WCAG 2.0 guidelines

• Consistent design language, principles to guide future feed decisions

Challenges & Constraints

• Any changes to the feed needed to see positive or neutral engagement/revenue metrics

• Any redesign needs to align with JP version of the app, where the SN brand is much more established and

• Legacy tech stack based on JP framework launched in 2011

• Cultural/Geographical differences between US/JP audiences

• Colorful channel tabs were not easy to remove/replace as they became a branding element in US/JP app editions

• Due to no previous email capture, we had no way of contacting our most engaged users for interviews, usability tests, A/B tests, etc.

• How to construct an information architecture
  which encourages content and feature discovery, and allows for easy navigation between areas of interest

Discovery & Research

Part one: User segments and pain points

SmartNews had some pre-existing user segments defined by our product marketing team, so we started there with our research. We decided to recruit both SmartNews and non-SmartNews users, and conducted usability tests using shell versions of our app, as well as competitors. This allowed us to see what first time users as well as churned users thought about our app side by side with our competitors. After synthesizing our results, we came up with this list of user problems:

1. App Felt Overwhelming / Cluttered

2. Confused by Where to Find Our Key Features or Content Types

3. Inability to Customize

4. Messaging Confusion - Don’t Understand What’s Being Offered

5. Content & Content Presentation is Off-putting

6. Lack of Categorization, Cognitive Overhead in Feed

Next, we worked with our Data Science team to view some data and click funnels, to better understand how traffic was moving throughout the app. As you can see in the orange squares, there was a sharp drop-off by a large percentage of users without really engaging with the rest of the app.

Taking into consideration the problems listed above, there was a clear correlation of why users would not be engaging in feed content or retaining overall.

Part two: Research Objectives with answerlab

We partnered with AnswerLab, a research agency, to conduct series of user interviews, usability tests, and competitor/industry research.

1. Gain a good understanding of target users’ mental modes of news feeds UIs
2. Identify best performing usage patterns for large cells in the news feed which bring real value to target users
3. Determine how to reconsider the usage of the top channels tab system and the GNB, in the context of the feed, to make for a better experience for target users

In preparation for the round of diary tests being conducted by AnswerLab, we prepared the following prototypes:

Define

From our research sessions, we defined some user personas, which helped us decide who to think about when prioritizing who we were building for.

Ideating, Prototyping, Tests

Initial testing key findings

• Participants felt that the ability to customize their feed was very important to them and is something they would want in any news platform they use

• Those who preferred smaller cells liked that they could see more articles in one view and the smaller size/uniformity of the articles, which allows for quick skimming, however most also preferred cells with “additional features” over uniform cells

• Participants indicated a heavy reliance on the top channel tabs as a means of navigation, stating that it prevented them from having to scroll excessively to find relevant content

internal dogfooding / stakeholder feedback

After reviewing the test results with the team and XFN stakeholders, we determined a few things:

1. Although the large cells were popular and visually appealing, they were still far off in terms of engineering capability

2. Smaller cells allow users to see more content, as well as satisfy revenue concerns

3. Keeping the colorful channel tabs was important because it provided a clear means of navigating to other content areas in the app. It also acts as a primary branding element, since the JP app is known for it

Design

We decided to scale back some of the explorations with large cells and minimal channel tab UI colors. This also gave us an opportunity to explore potential new UI for the colorful tabs, although we would stick with our existing UI for the upcoming A/B test.

Results

Impact

Concepts that were tested in usability test as well as A/B tests showed some promising metrics, although this was just a small sample size and more testing was planned before a full release. Some early numbers showed:

• FQ7: +1% - Users were retaining at a higher weekly rate

• TS: +3% - Users were spending more time in the app

• PV: +4% - Users were discovering more content

Reflection

Throughout my time on the project, I was happy that we were able to accomplish some impactful things that will setup the product team for future success:

• Updated UI to meet WCAG 2.0 AA guidelines

• Introduced product principles for building new feed experiences

• Discovered key learnings that will help the product team

Unfortunately my time at SmartNews ended before I could see the final iteration of this, but I am hopeful that we can see some of these updates in the app soon. I had an amazing experience working with so many talented folks, looking under the hood to really understand what was happening with our users’ journey.

Thank you!