All Stories

Creating Trove for iOS

head-1.jpg

In 2014, Washington Post Social Reader rebranded as Trove. The evolutionary experience for Trove was news topics (called troves) that users would promote stories within. This concept encouraged subject matter expertise, and users could follow each others’ unique perspectives on topics through the lens of troves.

I had been responsible for Social Reader’s web experience early in the transition to Trove, during which time a small team designed and developed a native iOS application to support Trove’s new experiences. After the early iOS application launched, I shifted to take responsibility for mobile design at Trove.

Architecture First

Trove for iOS was originally designed with a main content well and a drawer menu on the left and right — left for navigating topics the user followed or recently viewed and right for search and recommendations. Thorough instrumentation and user testing identified this design as generally confusing. Users were unable to recall the content or purpose of either side menu, and were frustrated when actions taken in those menus replaced the navigation stack in the main content well.

Design and development issues were further exacerbated by structural differences between iPhone and iPad versions of the app. The iPad version of the application intended to replicate a magazine interface in the main content well, requiring separate (and for a small team, costly) rounds of design and implementation for every new feature.

When I took responsibility for mobile design at Trove, my first priority was unifying the design of iPhone and iPad applications to allow for faster iteration and turnaround time. At the same time, I proposed a clearer information architecture that identified five key user tasks presented as tabs:

  • Home, where users could view their personalized news feed and featured stories
  • Your Trove, a view of topics a user had expressed interest in
  • Explore, dedicated to search and discovery of topics recommended by Trove’s editorial team
  • Profile, a user’s view of their activity across the Trove ecosystem
  • Notifications, where breaking news and activity by other users were accessible

A tab structure corrected for the “pop-and-replace” navigation construct that users found frustrating with side menus. Independent navigation stacks on each tab allowed users to interact with Trove in a parallelized manner, and search as an omnipresent navigation item enabled on-demand content discovery from anywhere in the application. I designed Trove’s mobile search experience as a hybridized search and discovery, so users were presented with relevant content to stories they had read and topics they had followed without typing a single character.

Onboarding

Analytics revealed that a sizeable number of users who downloaded Trove from the App Store bounced from the application before completing a mandatory registration process. Through direct user testing and interviews, I found that users were unclear of the value of registration and found the first-launch experience abrupt.

I designed a new first-run experience (nicknamed Assistant) that used simple, friendly language and playful animations to step users through a quick setup and customization of their Trove account.

On launch, fullscreen prompts with large text presented users with simple, human prompts like:

  • How would you like to sign in?
  • What are you interested in?
  • Follow a few topics.

Realistic transitions between each prompt coupled with heavily optimized load times reinforced a sense of community and friendliness that Trove aimed to project throughout the entire newsreading experience.

body-1.jpg

Dynamic Content

My objective in designing Trove’s iOS application was to let the interface get out of the way as much as possible and adapt to the user’s newsreading preferences.

Trove had a full-content relationship with approximately 100 major publishers by 2014. Similar to today’s Google AMP and Facebook Instant Articles, I designed and developed a (Objective-C) Mustache-based article rendering pipeline for Trove. When a user accessed a topic, the application would loop through a batch of stories for content Trove had license to republish. All eligible stories were asynchronously cached to disk for quick access and loaded instantly. A remote template design allowed for new story formats to be deployed without App Store updates, and designs were capable of reacting to different attributes of each story (publisher, number of images, media attachments).

To further blur the line between application and content, I judiciously applied dominant and complimentary colors algorithmically derived from images to make each story feel entirely unique and immersive.

Extending Trove

Application extensions were introduced in iOS 8. Trove’s web application had a Javascript bookmarklet that allowed users to promote any web content into one of their topics. Before extensions, some users would use Trove’s bookmarklet to promote content not found from within Trove — a clumsy experience that involved manually copy-pasting Javascript into a new bookmark, then triggering from within their bookmark list.

I designed a counterpart extension for iOS that would display Trove in share sheets in Safari. While browsing any site in Safari, a user could trigger a Trove extension that would list the user’s topics and prompt for an optional comment — users just pressed the share button, then Trove. This design was simple and efficient and was shortly recreated within Trove’s in-app browser for a uniform experience.

Designing a Community

To improve and emphasize Trove’s social backbone, I encouraged user-generated content by giving prominence to user perspectives whenever available. Stories in a user’s home or topic feeds often led with a brief snippet of commentary at the top of a story’s cell, trailing with additional user commentary or replies (if available).

I designed a dedicated view to house all details of a particular story. Beyond the headline, users could read a brief preview of a story and see which users had promoted the story (and in which topics they promoted the story within). In a second segment, users could read and participate in a discussion thread on the story. Previews became a hub for activity and content discovery, providing avenues for commentary and exploration of different user perspectives.

With iPhone and iPad interface design unified, I was able to push further into adaptive layouts throughout Trove. A prominent example was an experience on iPad in which a user reading a story in our in-app browser could view story previews (including activity and discussions) side-by-side. The story preview interface from iPhone would overlay browser content in portrait and displayed adjacent to the (automatically resized) browser in landscape orientation.

Building an Ecosystem

Trove’s mobile design informed and advanced product thinking across the Trove ecosystem. Late in 2015, I led a project to migrate both the structural and aesthetic refinement of Trove for iOS to Trove.com.

This project incorporated everything I had learned from iterating on Trove’s user experience on mobile devices (particularly iPad) — including imagery integrated into content, prominent discussion threads and meaningfully-placed recommendations for new content to discover.

Trove was variously featured in The New York Times, Slate, USA Today, CNBC and The Today Show.

Early revisions of Trove’s interface were licensed by Foreign Policy for their iOS applications. Trove’s team joined SocialCode in late 2015.

Published 19 Feb 2018

I'm a design lead based in New York City, currently creating products for Priceline. Previously, I designed experiences for SocialCode, Trove and WaPo Labs in Washington, DC.