SMARTNEWS/NEWSARC

HEAD OF (0 TO 1) DESIGN

Context

SmartNews is very popular in Japan and wanted success in the U.S.

The app was translated into English, but never resonated with an American audience. Struggling to retain users, and unable to attract new ones, the product needed a new approach.

We looked at redesigning the existing app, but with so many tech limitations and constraints, we needed to start over to make any significant changes.

Rather than win people back to something they disliked, we decided to create a new app within the SmartNews family.

Existing App

A mix of Japanese and English. Overall, this product made little sense to American audiences.

My Role: Head of Design/sole designer

Responsibilities:

  • Product Strategy

  • Research, Validation, trend analysis

  • Branding & Visual Design

  • Prototyping, flow mapping

  • Motion & Microinteractions

  • Content Design, UX Copywriting

  • Feasibility, tech constraints, handoff

The Team

SVP of Product, U.S. and Japanese Engineering teams, Machine Learning Team, Data & Analytics, Head of Design

Timeline & Goal

We had three months to design, iterate, test, and build.

The goal was to launch a MVP that resonated with our target audience: American readers seeking quality news coverage.

Research

U.S. News Consumption

Before I joined, a research study was conducted on how Americans consume, understand, and think about the news. This served as inspiration for designing a news product, and the following were valuable findings:

    • In the morning, many were interested in reading specific news events, or breaking events, based on what’s happening globally.

    • The afternoon saw less news participation. During this time, Americans preferred brief, interest-based topics that fit into lunch breaks or downtimes. They preferred skimming articles or videos with captions.

    • In the evening hours, news took different formats — audio and video, particularly. Americans sought soft news, but would also follow-up on important Global or Political events (often into the night).

    • Based on the sampling, Americans viewed sources like TikTok, Instagram, and other social media as “on-the-ground” reporting, but were also wary of these same sources for misinformation

    • Generally, Millennials and younger generations viewed watching cable news networks as something for older generations. Furthermore, they did not seek out these news networks at all — they were avoidant of these networks on socials, as a subscription, or watching their content on Youtube, etc.

    • Based on the sampling, these Americans avoided hard news, or the news altogether, and wouldn’t know about current events when talking with friends, coworkers, or family members. 

    • Many reported that they felt “dumb” when news-related happenings would come up. These participants expressed wanting to be informed to appear knowledgable, particularly in social situations, or to “not feel left out”.

    • News consumption took a toll on their mental health with a constant reminder of “unprecedented times”, with video formats particularly creating opportunities to doomscroll.

Opportunities

News Fatigue

  • Americans were doomscrolling rather than staying informed.

  • Research showed that people wanted to know what’s going on, but were avoidant due to misinformation.

Quality Journalism

  • SmartNews already had great publisher partners. Many covered a variety of news, including music, recipes, and travel.

  • We wanted to introduce this great content to readers interested in news they want.

For Readers

  • Based on the findings, many news consumers preferred reading the news.

  • Why? Reading allowed people to go at their own pace: skimming, skipping, or diving in.

  • On our side, we faced technical complexity with audio and video formats. Rather than cover all news formats, we focused on a delightful reading experience.

Challenges

Moving fast, moving targets

I needed to ship compelling designs daily to both the U.S. and Japanese teams.

    • 10am: Leadership had a new idea, different than yesterday’s, and wanted it TestFlight by end of day (5PM). Requirements were vague, and engineers were empowered to make their own product decisions.

    • 12pm: I concept initial designs in hi-fi in order to refine today’s vision. Why hi-fi? Leadership didn’t understand lo-fi and were unable to provide actionable feedback outside of hi-fi. Meanwhile, engineering coordinated backend work while product choices were being made.

    • 2pm: Final key screens and “happy path” prototype expected for handoff in order for engineers to continue. I discuss with engineers the product decisions and critical design initiatives.

    • 4pm: Engineering commits build to TestFlight environment. I annotate and prep for international handoff. This often included additional designs, flows, and/or interactions based on how much the U.S. engineering team could build.

    • 5pm: I hand off to the international team in order to continue with 4PM’s commit. The U.S. build was the first cut, and the Japanese team would get additional requirements from Leadership for what the morning TestFlight should look like: a full build to determine what needed more iteration, or a new direction.

10 years of tech debt

At first, we were using the current SmartNews app, but we discovered 10+ years of tech debt. This became a problem as it was impossible to experiment or realize the vision of this new product.

Instead, we decided to create a new tech stack. Engineers were now placed on the NewsArc team, across timezones and expertise. Many engineers varied on degrees of experience in the engineering stack, but were all tasked with delivering front-end.

Brand New Brand

Since NewsArc was a new addition to the SmartNews family, Leadership wanted it to stand out. Why? The previous English-based SmartNews app didn’t resonate with an American audience, and there was a direct ask to separate NewsArc from any existing branding.

To ensure NewsArc as a new experience, the Branding and Visual Design work fell on me to direct Leadership’s vision.

Process: AI & News

Co-Creation with Leadership

As Head of Design, I needed to help Leadership define their vision, while directing what I know to be successful.

Here were the highlights:

Exploration 1: AI News Map

Leadership wanted a novel way to discover the news, describing a “galaxy of news”. I led co-creation sessions to understand the purpose.

News Map: Clusters

Leadership’s Sketch

“Organic” shapes based on news event scale:

  • big, developing stories = large, multiple nodes

  • small news events = fewer nodes

Proximity of clusters were defined by NewsArc AI

News Map: Arcs Format

Leadership’s Vision

  • Overview of all news topics of the day as the primary form of navigation

  • Use Arcs to connect one news event to another

  • Color-coded topics

Learnings

Overall, feedback pointed to the difficulty in discovering news in this format. The visuals skewed too scientific — potentially scaring off people that were interested in other topics.

Exploration 2: AI Summarizations & Synthetic Content

Leadership was interested in AI, and I looked into how we could leverage this in a way that resonated with our audience.

I worked with engineering to understand the LLM, what we might be able to achieve, and recommendations on how to incorporate it into the experience.

Search Topic Summarization

  • When users search a topic, offer summarizations based on trendiness, timeline of events, and involved figures

  • This content served as a jumping point into other queries and clusters

Long-form Reading of Synthesized Content

  • Allow user preferences to inform what news is surfaced to an individual

  • Have morning and evening summaries

  • After summaries, users can go in depth on each topic

Snapshots of Synthesized Events

  • Use related emojis in content to provide context

  • Limit to 4 major events

  • Outside of the major events, show related news events for further synthesized content

Learnings

Sentiments around AI in journalism were negative: we followed companies that failed in this space, and saw how easily our own LLM was unable to capture appropriate tone/context.

We decided to not pursue synthesized content.

Exploration 3: AI & Social Community

Leadership came from social media apps, and wanted thoughtful, long-form comments as a form of user engagement.

I designed for User Generated Content (UGC), private & public group chats, and discussions around news topics.

Base Level Start:

  • 1-level replies

  • No @mentions

  • Only upvoting

  • Comments live on articles

This first phase was aimed for a simple commenting system to understand user engagement.

Discussions

  • Since comments lived on articles, many were lost in the 24-hour news cycle.

  • To create more opportunity for community engagement, Leadership wanted to introduce group discussions.

    • This added complexity, users needed to be able to find, add, block, group, and invite friends.

  • Discussions around popular topics created an opportunity to use AI to showcase trending discussions, topics, and articles.

Sample Flow: Email Referrals

To improve engagement, Leadership wanted existing users to be able to refer their friends via email in order to gain more traction in discussions.

Discussion Summarizations

  • Use AI to summarize discussions

  • Promote top commenters and highlight comments

Learnings

Comments on the news can become highly decisive and polarizing.

We saw that commenting/discussions were not getting the engagement we wanted.

Process Continued

My Design Directions

While working with Leadership to realize their ideas, I brought my own. I designed and championed the following:

Audio Influence

Based on our existing research of how Americans consume the news, I looked into audio visualizers that could use AI.

Playlist Paradigms

I also explored the paradigms to music, like creating a “playlist” of news content to add in personalization.

Here were early concepts around showcasing our publishers and being able to mix and create collections of exclusive content.

Outcomes

  • This is where we learned that audio was not something our tech could easily support.

  • Even without the audio elements, my designs showed how users could create their own “playlist”, highlighting our excellent publisher partners, exclusive content, and depth of reading material.

  • My designs later became a core product experience: Collections.

What’s in a Name?

As I collaborated with the Content Team and met with our Publisher Partners, I saw new opportunities for discovering content.

I called these moments Arcs — an opportunity to tie our brand to bundled content.

AI for bundling events, developing stories, and more

Arcs were generated contextually, based on the best coverage of a news event, trending topics, or a user’s explicit interests.

Outcomes

  • I designed Arcs to introduce brand trust; derived from connecting users from one point in the news to another.

  • Arcs would introduce users to news partners, coverage, and deeper reading.

  • Arcs influenced the MVP by providing AI filtering and grouping in formats like news events, “Arc with us”, and “must reads”.

Cutting out the noise

I wanted to design something to help users understand the ever-changing news.

I designed lists, dynamic ranking, and customization to help users understand what’s happening in the world.

Outcomes

  • My concept was to have our product do the heavy lifting of making sense of news events.

  • As news changed, our recommendations would adapt and provide insight to users on why they’re seeing X amount of events at that time.

  • My concept of dynamic, newsworthy ranked lists later became the News page.

Creating The brand

Leadership was open-minded to what our product could look like, but needed my help strategizing for brand differentiation and adoption.

NewsArc did not have a dedicated Marketing Team, and we had the opportunity to develop a net-new brand.

Think Big

I did a competitive analysis, researched current trends, and found inspiration outside of the news space. These initial designs sped up the process by providing real visual examples and use cases. During this time, I led many workshops directly with the Leadership team.

Step 1

Step 2

Go Broad

Leadership introduced the motto “News made modern”, to which I explored broadly what our visual system could mean against this idea.

Step 3

Hone In

After exploring broadly, Leadership was able to shift into a more definitive framework: “News worth reading”.

Design Principles

Design Principles

With all the learnings, breadth, and collaboration, I created our Guiding Principles:

  • Quality & Trust: Transparency in sourcing, publishers, and your explicit choice.

  • Relevancy: Demonstrate the value in the content you see, and why you’re seeing it.

  • Connection: Serve as the bridge to content you should know, content you explicitly asked for, and discovering new content.

North Star

Understanding what we want, how our product reflects that, and how users should recognize us through Quality & Trust, Relevancy, and Connection became our North Star.

I was able to craft our Design System, Motion & Animation Guidelines, and Marketing material with this Brand Strategy in place.

From 0 to 1

After everything, we landed on the following product experiences, success criteria, and phase 1 plan:

News Feed

A dozen of the best news coverage,including breaking news, ongoing events, and must-reads.

Collections

Explicit personalization for users that want specific, exclusive publisher content.

Variety

Daily showcase of top content, like recipes, what to watch, music, and more.

News

Variety

Collections

Measuring Success

For this first phase, we wanted to capture an audience that already reads the news and were looking for a supplement/new aggregator.

Business Goals:

  • Daily engagement

  • Subscriptions

Measured by: return visits, registration, subscriptions

Design Goals:

  • Does NewsArc, as a brand, stand out against other news aggregators?

  • No complaints about legibility

Measured by: monitoring social media, app store reviews, feedback surveys, support tickets

Results

News worth reading

Our product launched, and while still in its infancy, we’re actively collecting feedback.