HuffPost for Android: How We Refreshed Our App

2013-03-05-Device_Andoid_Silo_Double_Argo.png

When we first gathered the team to start discussing an app refresh for Android we started with you, the reader. We pored through the comments on our site, the feedback you’ve submitted directly, and the suggestions you’ve posted in the Google Play store. Our takeaway? While you use the app frequently for the latest in news, politics, entertainment, and technology, it could be more stable, more media-friendly and above all: faster. Today we’re proud to release our updated version of HuffPost for Android. The refreshed app was created with these five core elements:

Faster: A lot has changed since our first Android app. Overall, we wanted to take advantages of the latest Android software and hardware to build a smooth, fast, and simple user experience. We designed the app to include the latest version of the Android platform — Ice Cream Sandwich. We’ve added new features to make for a more natural, fluid, and simple user experience, including:

  • From the top navigation bar, a new quick drop-down list that highlights your favorite sections.
  • A new article viewer that allows the user to flip left-and-right to access more stories.
  • Background downloading of content so users can start to use the app more quickly.

 

... and Smaller: Second, we completely rebuilt the network that feeds the app to be more mobile-centric. We designed the new server API to offload a lot of computations from the client side to the server side, which tremendously shrinks the data size that is downloaded and improves the client rendering performance — all which makes for a smaller app that’s faster. 

More Legible: We’ve designed the app to follow all the latest Android design patterns, which should make the app more intuitive to Android users. We’ve reinterpreted our big & bold HuffPost splashes for the smaller screen and made the feed of blogs and articles bigger, bolder and more tap-able than your traditional article listing. For a better and more legible reading experience we’re using typography designed for digital screens by Font Bureau. 

Online, and Off: If you want to read the news while you are offline you can download your favorite sections before you hit the road or board your next flight with a simple press of button.

2013-03-05-Device_Andoid_Silo_Widget.png

Widgets: To scan the latest news even faster, you can place our brand new widget on your home screen (inset) to quickly flip through the latest news when you are in a hurry and don’t have time to engage with the full app.

 

As with all software, this is just the beginning — we look forward to adding new features over time. Look for the companion Android tablet app in the coming months, as well as our redesigned iPhone app. Download the app and let us know what you think.

— Josh Klenert and Otto Toth

Josh Klenert leads the Design & User Experience team for The Huffington Post. Otto Toth leads the Mobile Development team for The Huffington Post.

HuffPost for iPad: Inside the Relaunch Process

We listen to our readers.

While record numbers of users are engaging on our desktop websites and mobile extensions, one thing was clear: our readers found our iPad app buggy, slow and difficult to use. We clearly needed a reboot! The facts were clear: the site is growing every day. Over seven-plus years, The Huffington Post has added dozens of verticals, expanded to five international editions, and publishes hundreds of multimedia stories each day. How do you pack that into an app experience and make it easy and fast to use? 

The new app, which launches today in the App Store, features extended sharing capabilities, stunning visuals and a completely new video section with a HuffPost Live archive. You can check out a demo video here. The all new iPad app was created with these five core elements listed below the video:

Rebuild from the ground up.

It’s a rare opportunity at a well established brand when the mobile team can have a clean start, ditch all of the 400k lines of code we inherited from the past and start again from scratch. On the technical side our aim was to lay out a solid foundation we can build on in the next couple of years. The main considerations were the unique capabilities of the mobile platforms, the user expectations and how mobile is different from the desktop counterparts. Data consumptions, client side computing capabilities, user experience and fully localized support of all the international editions were the main concerns.

2013-02-20-03EntertainmentdoubleiPad.png

All the other layouts, UI elements and animations are created in native iOS code to provide the best performance, smoothest user interaction and intuitive gesture and multi touch based navigation. We incorporated our brand new commenting API with the OS level integrated share capabilities. 

Editorial voice... with customization.

It was also clear from the beginning that HuffPost was serving up an amazing amount of content across our news, politics, entertainment, tech sections. Also, we’re not an automated feed like Flipboard. Editors are choosing the blogs and articles that make up their sections. Philosophically, we wanted an experience that allowed users to personalize our editorially curated content to set their favorite sections, but also dig deeper. Now, at start-up readers can select the sections that matter most to them. Then, you can simple swipe right-to-left to see those sections, and then swipe down to dig deeper within a section. Its the world in real-time at your fingertips.

2013-02-21-04_Comments.png

Conversation starts here.

As with desktop, conversation is key. For the iPad app we completely rebuilt and redesigned the comments section natively in iOS. And, they are now one tap away from the bottom left corner of an article or blog.

Native vs Responsive.

Temptation was high to build the new app based on pure HTML5 but in my opinion HTML5 is just not there yet. To combine the best bread of both we are rendering the articles in HTML format and instead of recreating the same layout million times on the devices we render and cache it on the server side.

The HuffPost core API were built in focus on the desktop experience and provided way too much unnecessary data for the mobile clients so we created a mediation layer between of the the core API and the clients serving only the data what is really necessary for them. By reducing the number of API’s and building article templates that are responsive to mobile screen sizes, we we’re able to speed up load times. Ultimately, the app is native AND responsive.

No instructions required.

From a design perspective, this new app could not be simply a fresh coat of paint. We wanted to get out of the readers way and let you dive in as quickly as possible. We kept referring to it as a “no instructions required” approach: we wanted an app that was so intuitive, we would not have to add a complex “how-to” screen when users entered the app for the first time. We did want to reflect the attitude of the desktop site on the smaller screen. We’ve reinterpreted our big & bold HuffPost splashes — which highlight the stories that matter the most. For a better and more legible reading experience we’re using typography designed for digital screens by Font Bureau. To quickly scan the news, the app uses a simple grid that is populated with the latest content that our readers are engaging with the most.

2013-02-21-dfdfdfdfdbreezi_placeit.png

This is just the beginning, but we hope the new app is “a hell of a lot better” and with this solid new foundation, we look forward to adding new features over time. Look for the companion iPhone app coming soon, as well as the phone app for Android. Download the app and let us know what you think.

— Josh Klenert and Otto Toth