Content Refresh for the New York Times

This was a project I did while I was an intern at the New York Times. I was on the mobile app team where we looked at how content could be refreshed on the app.

Timeline 1–2 Weeks

Team 1 Engineer, 1 Designer

content-refresh-final
content-refresh-final-2

The Problem

Currently, when the reader goes on the app the user doesn't know whether they have fetched new data or not. Because of how the New York Times cycles their news it doesn't act like an Instagram feed despite looking like one. For this project, we're looking for an opportunity to get rid of the time stamp at the top of the app and help users understand that the app is fetching data every few minutes or so.

We also wanted to find an opportunity to elevate the brand of the splash screen by adding in some animations or text to the LaunchView Controller.

Group 3

LaunchView Controller

Group 4

App

explain-content-refresh

To come to terms with the situation at hand I had to understand the technical feasibilities and specs required for an iOs launch.

For iOs, we're given a launch screen that's static and unmoving. In order to give the appearance of an animation, the LaunchView controller has to align with the static launch screen, which is placed on top of the app, giving the app time to fetch new data. We were looking to give a stronger brand opportunity for the LaunchView Controller as well as time better ways for the app to fetch new data. We landed on a time: 5 minutes of being idle outside of the app, and the LaunchView Controller would trigger every day.

After understanding the allowed specs, I was tasked with making as many iterations as possible. These explorations were an unseen UI pattern in the app, so the stakeholders wanted to see as many combinations and possibilities.

Group
Group 2
Group 3

Rounded button loader

Group 4
Group 5

Pill loader with Rounded button loader for No Internet

Group 6
Group 7
Group 8

Blue pill loader with all cap text

Group 9
Group 10

Black pill with text in all caps

Group 11
Group 12

Black pill with serif typeface

Group 13
Group 14
Group 15

Grey banner with serif typeface

Group 16
Group 17
Group 18

Grey pill with bolded sans serif typeface

Group 19
Group 20
Group 21

Dots

Group 24
Group 23
Group 22

Black banner

Group 25
Group 26
Group 27

Grey banner with serif typeface and red color for alert

Reflections

It's kind of crazy to think that millions of users on the New York Times app see my design the first thing when they open the app, as well as every other minute when the app starts fetching new data. I worked closely with an engineer in one on one meetings collaborating on ideas and seeing what other ways companies have branded their splash screen animations.

As a new grad designer and previous intern, it's so rare to have an opportunity where a project goes live and it becomes tangible for the real world to experience. There were a lot of things I learned from this project: I learned to be clear and get a clear technical understanding of technical capabilities, I learned to have good communication with engineers and product leaders to know what the full scope and problem of the project is so that I'm solving the right problem. Initially, I thought I was solving for swipe down to refresh which is a completely different UX experience than what I was tasked to solve for.