Katerina Kabanova

UpToDate

A personalized news app designed with a minimal interface to help people stay informed without information overload.

Three UpToDate phones: a health feed, the home screen with breaking and latest news, and an article
Type
Concept project
Role
Product Designer
Tools
Figma
Year
2026

Problem & goal

The problem

People want to stay informed throughout the day without much effort. But cluttered, confusing interfaces make relevant news hard to find, and it is not always clear whether a source can be trusted.

The goal

Help them reach relevant news quickly and from sources they can trust, with a feed shaped by their interests, simple ways to find and save stories, and navigation that stays out of the way.

Key decisions

  1. Need: Relevant, trusted news

    Personalized feed

    My Personal Feed screen: topic filters above large news cards

  2. Need: Different ways to find news

    Search & discovery

    Search screen with Trending now stories and Recommended topics

  3. Need: News to revisit

    Saved

    Saved screen: topic filters above a list of saved articles

  4. Need: Easy access

    Clear navigation

    Home screen with the bottom tab bar: Home, Explore, My Feed, Saved, My Account

Process

Research

Competitive analysis

I compared three news apps on their structure and core features.

Strengths

  • Saving content to read later
  • Different ways to consume news
  • Following topics and categories
  • Managing news subscriptions

Weaknesses

  • Confusing navigation patterns
  • Poorly organized content and features
  • Relevant news takes longer to find
  • Cluttered interfaces that are hard to scan

These apps already offered plenty of useful features. What they lacked was clear organization. So I focused on three things for UpToDate: a clearer structure, easier ways to discover news, and quick access to relevant content.

Define

Customer journey map

Based on my research, I mapped the user journey. These are the main pain points that shaped the design.

Stage User questions Pain points
Log in Do I need an account? Registration takes too long
Unclear benefits of an account
Home Can I quickly find topics I care about? Irrelevant content
Important news is hard to spot
Categories How can I find what I need? Areas of interest are missing
No category structure
Article Is the information trustworthy? Clickbait
Unreliable and outdated information
Saved Where can I find my saved articles? Saved article is hard to find
Article unavailable after saving
Subscription Is the subscription worth the cost? Unclear pricing
Difficult cancellation process

See the full CJM on Behance

Ideate

From pain points to screens

I turned the research findings and pain points into solutions for each stage of the journey.

Prototype

Wireframes

I wireframed the path from login to an article, and the account screen. Switch a screen to Design to see the finished version.

Visual Design

Typography

Colors

Components

  • The Guardian
  • CNN
  • Dzen
  1. Log in

    Registration takes too long

    Log in screen: email and password fields, Continue with Google or Apple, and Skip in the top cornerRead news without an accountLog in with Google or Apple
  2. Home

    Important news is hard to spot

    Home screen: Breaking news cards above a Latest news listBreaking news at the topLatest news below
  3. Categories

    No category structure

    Categories screen: Politics, World, Sport, Technology and Business as photo tilesAll categories in one list
  4. Article

    Unreliable and outdated information

    Article screen: a photo, the headline, CNN as the source and the dateSource and publication date
  5. Saved

    Saved article is hard to find

    Saved screen: category filters above saved articles, each with its source and date, and the tab bar with Saved selectedFilter by categorySaved in the tab bar
  6. Subscription

    Unclear pricing

    Get Premium screen: Premium and Free features compared, 1 Year and 1 Month plans and a Start 7 days trial buttonPremium and Free comparedPrice of each plan
  1. Log in
    The finished log in screen: email and password, Continue with Google or Apple, and Skip in the cornerLog in wireframe: email and password, Remember me, a Log in button, Google and Apple icons and Skip in the corner
  2. Home
    The finished home screen: Breaking news cards above a Latest news listHome wireframe: search and filter icons, a large news card and a list of stories
  3. Categories
    The finished categories screen: the same categories as photo tilesCategories wireframe: Politics, World, Sport, Business, Technology and Culture as grey tiles
  4. Category feed
    The finished Health feed: Popular and Recent tabs, a large story card above a list of health stories, each with its sourceHealth feed wireframe: a large story card above a list of health stories
  5. Article
    The finished article screen: a photo, the headline, CNN as the source and the textArticle wireframe in Health: an image block, the headline, the author and the text
  6. Account
    The finished My Account screen: the profile photo, Subscription, Payment methods, Language, Notification and Dark mode switches, Help center and Log outMy Account wireframe: the profile, Dark mode, Language, Notification, Subscription, Payment methods, Help center and Log out

  • Bebas Neue

    Headlines

  • SF Pro Display

    Interface & Body

  1. #2C2C2C
  2. #2C2C2C at 90%
  3. #2C2C2C at 70%
  4. #2C2C2C at 60%
  5. #2C2C2C at 20%
  6. #2C2C2C at 10%
  7. #FFFFFF
  8. #E14344
UpToDate components: the Log in button, icon buttons, text fields with an error state, the Popular and Recent switch, the tab bar in each of its five states, a large news card and a news list item

Final design

Finding a story

Search opens on trending stories and recommended topics. People see recent searches when they tap the field and suggestions as they type.

Four search screens: Trending now with recommended topics, recent searches, suggestions while typing Olympic, and the results for Olympic games 2028

Reading

My Feed opens on the stories people read and save, sorted into topic tabs. An article ends with related stories.

My personal feed with category tabs, then an article about Megan Thee Stallion’s Halloween costume, and the same article scrolled down to related stories

Premium & account

People compare plans and pay in the app, and can cancel the subscription from their account.

My account with subscription, payment and notification settings, the Get Premium plans, and the Subscription page with Change plan and Cancel subscription

Reflection

What I learned

In a news app, the structure and the interface can’t be designed apart. With content that never stops changing, people rely on a clear hierarchy and navigation to find their way. I learned to look past single screens and design the parts of the product as one system.

What I’d improve

My Feed adapts to what people read and save, but I didn’t work out what a new user sees before the app knows their interests. I’d ask new users to pick a few topics on first launch and build their first feed from them.

Next steps

I’d run usability tests on the main flows and the navigation.