With few defined constraints and a timeline of six weeks, I led initial brainstorming and ideating sessions, created multiple concepts and high-fidelity prototypes, and worked with a team of amazingly talented creative minds to reinterpret our traditional app experience.
In conjunction with designing this new Kindle Fire app, I then led a redesign of the flagship iPad product, to streamline some technical challenges and further define the long-term content strategy of The Post's mobile products.
Initial Brainstorms & Exploration
Sketching & Brainstorming
Early on, I used my notebook and InDesign to explore how to drastically reinterpret our content using dimension and the Z-axis. Our mobile products were designed to be simple, reminiscent of flipping through a newspaper, so early divergence explorations focused on the z-axis as a system of content hierarchy, with atomic particles of stories adjoining each other, and less immediate stories further in the z-background.
After sketching and Post-It brainstorming, I turned to Illustrator to conceptualize conventional news app layouts. I laid out the basic wireframe shapes of our traditional single and two-column news app layouts, and began to further identify possible new grid breakpoints. Immediate user testing of these divergent layouts provided me with some insights about the most effective content wells; the most effective layouts would need to be respectful of ergonomics on each device while scaling content appropriately enough to preserve news hierarchy.
This approach allowed me to visualize how the two new apps should interplay. The redesigned iPad app would need to be a comfortable experience for loyal users who are familiar with our content and tone, while the new app might need to diverge from the grid structure.
Earliest prototypes were designed around a photo-driven UX with short, tight headlines of 140 characters. These initial iterations would encourage users to dive into our content but also aggregate relevant news from content partners, so that the experience becomes an engaging, easy-to-use, one-stop shop.
A perpetual scroll would seamlessly take users through the news stories of the day, and users could swipe through carousels of grouped content to discover more about each group of stories. The largest stories within each section would anchor the 4-column grid.
NewsX was created to counter the notion of the atomic stories grid we explored with the Photo Grid prototype. Where the previous prototype emphasized the user's selection of interesting related stories from a larger aggregate, NewsX allowed users to focus on all types of content within one single story.
The main content well was designed to be a single column, with Minion Pro selected as the serif, so users would be able to leverage the affordance patterns of reading a storybook. The story well sat above the immersive multimedia elements behind it, so as to bring the user into the story and encourage discoverability within each chapter. As the user explored the longread, additional content would appear on-scroll or on-click.
My working title for this one was “The Onion” because the experience relied on the user peeling back the story layers to reveal UI elements.
FOMO, or "Fear of Missing Out," was designed to let users get a high-level overview of the water cooler talk each day, with the option to explore the virulity and sub-stories within each hot topic. We surveyed our user base and found that a devoted group of millennial readers who share our content on social media do so to avoid the "Fear of Missing Out," or the idea that they might miss a massively viral news story. With that in mind, this prototype was inspired by our audience's interest in viral news stories and the chain of smaller stories that evolve in the real-time internet media landscape. Looking at the way news disseminates on social networks, we created a prototype that would centralize stories and aggregate their related stories altogether.
This concept leveraged the accordion paradigm to let users preserve their place on the story stream while still exploring each individual sub-story within the topic. Each story would be housed natively within the app structure, rather than deep-linking externally, so that users wouldn't even have to go anywhere else to stay on top of these topics.
High Fidelity Prototype
This experience was designed to let users sift through news stories as though they’re tactile cards, sorted in topical decks, with each story card atomizing the content into digestible content pieces. In short, it's a hybrid of the previous explorations. In the earlier prototypes, we did guerilla user-testing to validate our theories and deduced that the overall goal for this new experience would need to be respectful of our users’ time.
Building on what we started, Newsadex was largely inspired by the previous explorations, in which all types of story content were displayed in one container, saving people time. New UI conventions had just come out in Facebook's Paper and Safari's updated tab structure, and so I created an experience that would leverage those affordance patterns to bridge the need to curate stories into immersive, quick reads with additional levels of granularity available in a linear manner.
Whew, that was a lot to get through, so here's a cat gif!