The Ask

horizontal-separatorhorizontal-separator

Discover Possible

NATIONAL GEOGRAPHIC MAGAZINE

Reimagine and redesign the National Geographic Magazine app. Adding value for both National Geographic and their readers.

The purpose of this case study is to showcase my full creative skill-set: user experience, design direction, problem identification, concepting and storytelling. I created this work this for my enjoyment and hopefully yours.

The Client

horizontal-separator-greyhorizontal-separator-grey

National Geographic Magazine gets you closer to the stories that matter. Through the world’s best scientists, photographers, journalists, and filmmakers, National Geographic captivates and entertains a global community through television channels, magazines, children’s media, travel expeditions, books, maps, consumer products, location-based entertainment and experiences, and some of the most engaging digital and social media platforms in the world.

Project Goals:

•  Create a solution framework that can be repurposed for all National Geographic Magazine titles
•  Improve the users reading experience and add delight
•  Create a platform built on templates and components
•  Create an experience that lives up to the print and desktop version of the magazine

Project Assessment

horizontal-separator-greyhorizontal-separator-grey

Challenges:

•  Different content needs depending on region served
•  Scattered National Geographic app eco-system
•  Readers expect the same experience they get from the desktop version of the magazine
•  Massive content archive
•  Needs to support multiple languages
•  Multiple organizational groups managing content

Opportunity:

Create a reimagined reading experience that lives up the quality of content being delivered, inspires reader engagement, encourages discovery, allow for customization and acts as an equal to the desktop version of the magazine.

The Approach

horizontal-separator-greyhorizontal-separator-grey

The rollout of the new National Geographic Magazine app will be released in phases. Each adding additonal value and benefits to the readers being served.

The first phase includes a refreshed visual esthetic,

optimizing content organization and hierarchy, updating the framework to leverage templates and components for page builds and the addition of some new features that improve the users experience.

Competitive Landscape

horizontal-separator-greyhorizontal-separator-grey

I took a look at 40+ magazine and blog apps and realized only a couple of them delivered a good reading experience.

Features & Functionality

horizontal-separator-greyhorizontal-separator-grey

Now that I have an understanding of the current app and competitive landscape, I do an unfiltered brain-dump of features and functionality ideas for the app. For me it's important to not get too caught up in the details of an idea at this point.

Is it technically feasible, does it provide lasting value or is it just plain idiotic? I don't really care. The most important thing is that I have ideas and I capture them. Pencil and paper first, narrowing of ideas second.

ff-1170x1180ff-1170x1180

Phase 1 Launch:

+  Page read progress bar
+  Sharing
+  Page navigation toolbar
+  Video page heros
+  Animated gif images in articles
+  Push notifications of new issues and recommendations
+  Auto downloading of new issues
+  Save content for offline viewing
+  Printing of content
+  Language switching
+  Intro on how to use app on first launch, always accessible
+  "Back to top” button
+  Responsive component framework for mobile and tablet viewing
+  Navigation hides as user scrolls
+  "Time to read” article noted

Additional Ideas:

-  Bookmarking
-  Quick-jump links in articles
-  Light / dark skin toggle

-  Type size adjustment controls
-  Use skinned Google maps instead of illustrated maps
-  Profile includes bookmarks, reading history, magazine subscription list, purchases and recommended articles based on reading history
-  Recommended articles
-  Ability to create customized magazine experiences from saved articles
-  Article extras content
-  “More like this” button for recommends
-  360° video and photography
-  VR versions of video content
-  Search functionality searches all issues, not just current issue
-  Inline text highlighting, commenting, sharing
-  Download images for use as a wallpaper
-  Buy prints of photos used
-  Index of photographers in issue noted with links
-  “Photos only” mode for viewing issue
-  Article toolbar with tools at bottom of screen, hides when scrolling
-  "Photos of the day" sent to you at a time you set
-  Ability to follow topics
-  Instagram feed and # integration
-  Short-read versions of articles
-  In-line article commenting, highlighting

User Experience

horizontal-separator-greyhorizontal-separator-grey

With some ideas on how to improve the experience written down, it's time to start architecting it. This is one of my favorite part of a project, turning ideas into something tangible.

In my case I like to start sketching wireframe concepts, incorporating features and functionality where appropriate.

I have a good understanding of the current flow a user goes through when diving deeper into content. I see opportunities to improve user enguagement by restructuring the global navigation and introducing in-page navigation where appropriate. Of course, I sketch my ideas down.

I also start sketching up wireframes for the pages I will use in design. Insuring there is a cohesive flow from screen to screen.

Bringing it to Life

horizontal-separator-greyhorizontal-separator-grey

I took a look at 40+ magazine and blog apps and realized only a couple of them delivered a good reading experience.

hero-impagehero-impage

Home Screen:

A completely reimmagined home screen features the latest content including the last five issues nicely tucked into a user-friendly carousel and some popular items available in the store.

Global Navigation:

I wanted to introduce a global navigation to the app to bring more of what people love about National Geographic Magazine to the forefront. By keeping the navigation structure clean and intuitive, I've left room for additional navigation links down the road.

A secondary navigation will become available on the right-hand side of the screen when reading an issue of the magazine. It provides a quick way for the user to jump between pages and add them to their favorites.

Issue Contents:

I wanted to make browsing a list of article names fun, so I added a parallax effect to liven things up. As the user scrolls the list, each column moves independently of the other providing more information on-screen in an interesting way.

brandingbranding

In Summary

horizontal-separator-blkhorizontal-separator-blk

I hope you enjoyed the inside look I gave you into my creative process. This process is tailored to the needs of the project requirements, team members involved, deliverables, scope, timeline and budget. Adding and subtracting deliverables as needed. Tack för att besöka.