Newslet V2

A fast, lightweight app for your favourite news

Image for post
Image for post

Duration: 1 month (April 2017)
Role: UX UI Design
App: Newslet V1 available on Google Play Store

Tools:

  • Google Forms — user survey and feedback gathering

Newslet is an Android app I designed and developed over 3 months (Aug — Oct 2015). It was made to prioritize news that people want to read. It is a lightweight app where you can read your favorite news topics.


Objective

The purpose of this project is to redesign Newslet to give users a better experience. Although I had developed and published Newslet on the Play Store, it had problems.

The motivation to redesign came when after many complaints, I realised that Newslet wasn’t delivering what it promised.

Problem

Newslet was made to solve two major problems:

  1. Content-first was not a priority
    Many news readers out there are too disorganized and spammed with advertisements, making content extremely hard to read.

But user feedback indicated Newslet wasn’t tackling these very well.

Image for post
Image for post
Feedback from Play Store reviews and user interviews

Process

Image for post
Image for post

Research

The feedback revealed users’ pain points. But before I started designing solutions, I needed a better perspective.

User Survey

The survey helped me learn users’ news reading patterns and more. It cleared many misconceptions and assumptions.

Image for post
Image for post
User research — Survey results summary

Competition Analysis

Before redesigning Newslet, I needed to understand:

  1. What’s already on the market?

Analysis was narrowed down to TOI and Inshorts, as the survey indicated them to be the most popular.

The aim wasn’t to do a teardown, but to understand what engages users. Personally using these apps along with user survey results gave me the following insights.

Image for post
Image for post
Times of India (TOI) Android app — Feedback from survey users
Image for post
Image for post
inShorts Android app — Feedback from survey users

Challenge

The feedback gave clear indication on what needs work. But the real challenge is improving Newslet, while maintaining it’s simplicity and speed which people like.

Image for post
Image for post

Design

Before redesigning, the existing design was carefully evaluated. If people liked something about Newslet, I didn’t want to be changing that.

Newslet V1 — Breakdown

Image for post
Image for post

User Flow

Before addressing individual screens, the overall user flow had to be improved.

Image for post
Image for post
Newslet User Flow — Before & After

Redesign

I began sketching on paper as it helps me to down ideas quickly.

Paper

The focus here was to form an idea for the layouts, putting key elements in place. It also serves as a moodboard which includes design variations and points to remember.

Image for post
Image for post
Initial paper sketches (See left to right)

Wireframes

A low-fidelity design of the screens gave a clearer picture of what the app would eventually look like. It helped in deciding how the layouts will adapt on Tablets as well.

Image for post
Image for post
Newslet V2 Wireframes — low fildelity

Newslet V2 — Final Designs

The final designs were high-fidelity mockups. Slight design improvements were made along the way.

Material Design principles were sparingly followed to make Newslet feel native to Android. To prioritize content, I had to do away with distracting and bright colors. Moreover, shadows (elevation) were limited in use, as they can add ‘heaviness’ to the design.

Complexion Reduction was employed to ensure image prominence and clear typography.

Product Tour

Previously, Newslet had an introductory Product Tour. While it looked fancy, it prevented users from using the app. Instead it highlighted common features people normally expect in a news app.

Image for post
Image for post

The Product Tour was removed and tutorials were made immersive and context-relevant. While using the app, a feature will be introduced to users.

Image for post
Image for post
When Lite Mode is enabled for the first time, users are notified and given a choice.

Onboarding — Setup

First-time users directly go to the setup screen. For clarity, it’s split into 2 steps.

STEP 1: Auto-detect user location (to receive country-based news) — Although location is predetermined, users had to be informed of this
STEP 2: Allow user to select their favourite (3–10) news topics

Image for post
Image for post
Image for post
Image for post

Home screen

Users wanted to select more favorite news topics, so Newslet now allows up to 10. But having a Tab for each topic involves a lot of swiping effort. Hence Tabs were removed. Now, all news topics reside in a single list akin to a news feed. It allows for a more natural way to consume content — by scrolling vertically.

Image for post
Image for post
Home screen redesign

Filter Function

Merging all news topics into a single feed removes the user choice of consuming content. The filter function grants fidelity on what news people want to read and in which order.

Image for post
Image for post
Filter screen — By default, the selected news topics are based on user preference.

Lite Mode

A faster, image-free experience for slow network speeds.

Newslet can auto-switch to Lite Mode when the network is slow. This ensures the app remains fast.

Image for post
Image for post
Image for post
Image for post
Lite Mode on phone and tablet

Tablet Support

Before —

Image for post
Image for post
Image for post
Image for post

After —
Bottom Navigation was pinned to the left edge on landscape Tablets to encourage two-handed use. One hand can handle navigation (left), while the other can interact with the article (right).

Image for post
Image for post
Image for post
Image for post

Monetization

Previously, Facebook Native Ads were used.

In contrast to traditional banner ads, Native Ads are similar to the app’s content in terms of relevance and appearance.

Image for post
Image for post
Native ad placement options

Styleguide

Image for post
Image for post

Play with Prototype


Other Screen Designs

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Splash screen, Bookmarks (Empty State) & Settings
Image for post
Image for post
Image for post
Image for post
Search Results & Search Screen (Tablet)
Image for post
Image for post
Image for post
Image for post
Dark UI Theme — Home, Detail & Master-Detail Screen

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store