Content Refresh

How might the New York Times app refresh content so that it fetches data fitting of a news publication?

Considering
the Question

— Overview

Previously, when the reader went on the app, the user didn't know whether or not they had fetched new data–the only signifier was the timestamp at the top of the feed–which at times was unreliable and difficult to understand. It was a non-dynamic value that only updated when the app would have fresh news but you were never sure if the app actually updated or not.

The news cycle is constantly updating, it is carefully curated and controlled unlike an infinite feed you might find on Instagram. For this project, my goal was to look for ways to get rid of the timestamp at the top(yet still inform the same information) and create a seamless experience with how the app updates the latest news.

This would also create an opportunity to elevate the brand of the splash screen by adding in additional text/animation to the LaunchView Controller.

The Result!

Clarifying
the Problem

— User Research

The main issue we were facing was inconsistency and missed expectations. When a user first enters the app there is an expectation of having the most recent and breaking news. However, because the app doesn't have a loading animation the user has a difficult time understanding whether or not the app is fetching newer data. The only indication is the timestamp at the top which doesn't update periodically and updates based on content received. Having a more consistent content refresh cycle as well as not being constrained to a timestamp banner could bring a better opportunity for bringing users the most recent and breaking news.

Collaboration over timing and data fetch sequences with the software engineer and knowing when the user would fetch data was needed in order to build a cohesive cycle.

An understanding of technical constraints, internet speed, timing, and animation was also required for a seamless loading experience.

The screens before the content refresh update. (On the left) The logo mark is used instead of the logo type. (On the right) The static timestamp above top news.

Comparison Audit

— Research

To understand and get more insight into the world of launch screen animations I took a look at how other popular apps designed the sequence from launch to loading. The focus of my research would be on timing, purpose of the extended launchView Controller, as well as an understanding of motion.

Twitter logo mark zooms out showing the rest of the interface. The motion follows the branding throughout the entire app. The animation gives the app time to load. Seamless and quick.
The interface expands out showing the map. The interaction flows well into the landing page showing all the necessary components needed to interact with the rest of the application.

Audit Insights

— Research

From doing this research, I was able to see how different apps were able to mask launch times by adding in animations that helped transition the user. The ones that did well elevated their interfaces and added to the product's branding. LaunchView Controller animations seemed like one time animations that would only trigger after a long time away from the app.

Launch -> LaunchView Controller -> App

Technical Considerations

— Research

To come to terms with the problem I was solving for, I had to understand the technical constraints and feasibilities 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. Thus giving the appearance and illusion of something that feels natural to the flow of the app. The LaunchView Controller is the one screen where things can be altered and changed.

Timing was set and experimented on Principle and then the handover was done through Jira with specific specs and timings.

The app would transition to the LaunchView Controller after longer periods of time. The app would transition to the app with the loader during shortened periods of time.

Design Explorations

— Deliverables

One of the things I was specifically tasked with was to make as many explorations as possible — colored text, bar, pill shapes, rounded corners, no-rounded corners, serif, sans-serif, icons, transparent or non-transparent, etc. I think this stage was particularly important because it helped us nail the look and tone of the messaging.

From a product perspective we wanted to have several stages of loading – from fast, slow, and no internet, respectively.

LOADING

SLOW INTERNET

NO INTERNET

The final design!

Reflections

— Thoughts & Learnings

As an intern, this was such a blessed opportunity. I just want to take this time to thank my managers and team members for even giving me the chance to make something that can be put out in the real world. It's amazing to see that the first thing people see when they load the NUMBER 1 news app in the United States is something I DESIGNED during the ephemeral period of my internship. Knowing that people would be going through and interacting with what I designed daily, I probably would have spent more time experimenting with animations making things not as choppy and being more efficient with the movement. Trying out more variations. I think my stubbornness got to the better of me and really limited my scope of what the animation could be.

Identify the problem correctly —
In retrospect, I wish I could have done more. In the beginning when I received the project, there was a lot of confusion. I didn't have a clear understanding of the project, and I misidentified the 'refresh' feature we were trying to solve. There were many times I had to sit down with my design manager where I had to go step by step in making sure we were using the right language and solving the correct design flow. Although this was frustrating at first, this helped me come to terms with how I should be communicating.

Keep making variations —
Although the components of the design were simple, I made several designs. In retrospect, there were times where I would make variations for variation sake, which wasn't the best strategy, rather I should have taken the time to understand the scope and build efficiently from there.

Don't be afraid to ask questions —
ARTHUR DON'T BE AFRAID TO ASK QUESTIONS! A sticky note posted not only in my notes but also plastered all of my brain. Something I'm oh so terrified to do for no reason at all except for the fact that I fear being judged. I have to realize that my coworkers want me to understand, they want me to succeed! Trust the process!