The New York Times’s design philosophy is to create experiences that are simple, intuitive and familiar between all touchpoints and across platforms. As design lead for mobile screens, I balanced platform conventions with brand considerations to create products that are grounded in user needs and integrate seamlessly into the Times ecosystem.
Case Study: The New York Times Best Sellers List on Android
Role: Design Technologist
Goal: How might we add value to the NYTimes Android app through habituating experiences?
As the leading source of best selling books in the United States, the Best Sellers List is a weekly reference for bibliophiles where they can discover new and noteworthy books across various genres and categories. Published since 1931, the list has taken many formats. This is its first implementation on the android platform.
Since the books move up and down in rank on the list, I decided to use inset cards to help suggest their sortability (in contrast, news stories on the home screen are housed in full-width cards since their rank within Top Stories represent fixed hierarchies based on news judgment).
To ensure that the cards are easily scannable on mobile screens, I limited five elements to the their initial state: its rank, title, author, image and truncated description. Two action buttons support the primary behaviors: buying the book and reading the Times review if there is one available. Additionally, If the book has moved up or down the list from the previous week, an arrow will be included beneath the rank and if the book is new to the list, a badge will appear on top right corner. By tapping the chevron, the card expands in place revealing the books’ full description and publisher along with the listing’s stats including number of weeks on the list and last week’s rank. The cards on tablet screens are always fully expanded.
On mobile, a bottom toolbar that launches to a shelf is used as navigation. This functions to let the user know which list they’re in while they scroll and easily switch to another list. On tablet, with a wider viewport, the list is accessible from the app bar.
Left: the cards on tablet, right: a fully expanded card on mobile.
Left: tapping the buy button launches a bottom sheet with three sellers, center: tapping the bottom toolbar on mobile brings up the navigation between lists, right: at the end of the list, a message prompts you to swipe to navigate between lists.
Case Study: Social Sign On for Mobile Platforms
Role: Design Technologist
Goal: How might we encourage users to log in to our mobile apps?
Platforms: Android & iOS
A significant number of our registered users remain anonymous on our apps. To encourage signing in, we implemented social sign on for faster account registration and login. Logging in allows readers to save articles, comment, and sign up for newsletters among other benefits. We hypothesized that in the context a mobile app, more users would prefer logging in and registering through social channels, taking only 5 taps to get back to Top Stories, as seen in the following chart.
Alternatively, users can login and register via email. In those screens, we made it easy for a user to toggle between logging in and creating an account at any point in the flow.
The log in and create account flows when using an email address. Top: logging in, bottom: creating an account.