Designing Scroll for Android

With a major update to the Scroll app only a few days away, we walk down memory lane to reflect on our current app.

From the start, Scroll.in aimed to be easily accessible wherever and whenever our readers chose to read it. Although we launched as web only, many of our readers soon began requesting an app for Android and iOS platforms. Given that the majority of our mobile readers were using Android devices, we decided to take on the Android app first and set out to build a focused, minimal product that let our users do what they enjoy most: read the news. And we did it in only five days.

The Scroll.in app now has over 15,000 downloads and a very positive 4.4 star rating on the Google Play Store. Here’s how we did it:

Setting the stage

To achieve the incredibly ambitious target of releasing the app in one week, our lead designer and a top developer got into a room to begin planning. It was decided that the app should:

• be a web app (yes, the current app is non-native!)
• look & feel like a native app
• facilitate sharing and navigating
• notify readers once a day when our morning staple piece, The Daily Fix, is published

Getting started

Our developer started work on the app by wrapping a web-view inside of a native skeleton. Then, the raw HTML was fetched from the Scroll.in website and dumped into the web-view. We then added in a native hamburger menu to navigate between each section and a reload button to fetch new stories on the home feed.

The article screen got a native FAB for sharing articles. At this stage, this is what the app looked like —

Making it beautiful

The next step was to get rid of the navigation bar, adding Scroll.in’s brand color to the native toolbar. We coded up and designed a native hamburger menu to navigate between each section of the website. The typography and spacing were then changed to emulate a native look and feel using CSS built into the app.

The article screen was slightly tricky. We wanted the image to be the main focus when a reader enters the screen. And having a native Share button meant that we needed to get rid of the share buttons from the website. Since modifying the HTML structure for the article screen was not a choice, we achieved the new flow along with typography enhancements through CSS.

With the article screen ready, we tested the app across internal users and pushed it out on schedule. The overwhelmingly positive feedback from our readers brought a smile to everyone involved in the app process!

As mentioned earlier, we’re a few short days away from launching a major update to the Scroll.in app. It’s a step towards reimagining the Scroll.in experience from ground up to make content discovery easy and engaging. Here’s a quick preview of what you can expect:

• An elegant, native Android app with Material Design standards
• Support for new sections such as Video, SocialWire, and Roving Correspondent
• A new way of discovering related content using swipeable cards
• Universal search support

We hope you’ll love using the new app as much as we’ve loved making it. Expect an update on the Google Play Store soon! We’d like to thank you for being part of this journey with us and look forward to more feedback. Keep scrolling!

Originally published at blog.scroll.in.