Digital Application

National Geographic

PEOPLE CARING ABOUT THE PLANET

Idefined a beautiful user-experience for National Geographic that doesn’t just cater to the users but also provides a truly unique experience for the authors. The beauty of the photography and the creatives articles that accompany them are showcased to attract more users and hold their attention for a longer period of time. The entire user journey has been mapped out to ensure there is no frustration which leads to happy users.

“My best sources are my travels and my collection of National Geographic.”

Sergio Aragonés


Cartoonist at Mad Magazine

MY CONTRIBUTIONS

  • Strategy
  • Product Roadmapping
  • User Research
  • Mobile Design
  • UI design
  • UX design
  • Branding
  • Creative Direction
THE PROBLEM

DEFINING THE USER EXPERIENCE BEYOND JUST TEXT

As a kid growing up I loved to get the latest issue of National Geographic in the mail. It was a free pass to view the amazing things happening in the world while siting on a giant cozy couch. With the unfortunate fall of print media National Geographic was put into a tough situation, either evolve like the animals in their publication or become another nostalgic Buzzfeed post “10 things that died in the 90’s”. Fortunately, National Geographic made a huge leap and turned towards creating a web application that would reach millions of people. However it felt like a port from a desktop app and didn’t provide a user experience geared towards mobile users.

The features and functionality were put first while the users were left with a complex app that didn’t have a solid direction. As more and more users started to access the app on their mobile device it became clear that things needed to change once again to adjust to the current trends.

Success for this project was defined in a few different aspects. First the ability to capture users from the original National Geographic publication base. These users are loyal fans that have stuck with the magazine through thick and thin, making the transition as seamless as possible is vital.

Second is the ability to give authors a beautiful and engaging dashboard that is easy for them to use, while still giving them flexibility to create creative content. Authors are just as important to National Geographic as the users because without them there would be no content for users to view.

Lastly, the most important element of success, the ability to maintain users for an extended period of time and keep them coming back for me. As a benchmark we shot for having users use the app for three months before counting them as successful users.

CONSTRAINTS

TIME IS OF THE ESSENCE

Typically projects like this can last 6 months to a year but this project needed to be completed in less than two months. This put a huge stress on the project and deadlines but I used the information that I had available to map out a plan to create all the design in a timely manner while still allowing adequate time for design critics and revisions. Feedback is a critical part of the process, it's like taking a raw diamond and turning it into a beautiful 100k wedding ring, this takes many revisions to get everything pristine.

THE USERS

WHO USES THIS ANYWAY

To understand the problem it’s important to look at the users who are actively using the app, as well as those who previously succumbed to the frustration of the desktop experience. Looking at the demographic it’s clear to see that people of all ages crave to explore the wondrous world of National Geographic. They also have a clear goal. The amazing high res photos and detailed stories draw users into a world that is unknown to them. They want to be shown things that they have never seen before, to have their minds expanded to realms of the unknown. This was the problem I needed to solve and the goal I painstakingly strove to achieve.

To create the best user experience I needed to figure out who uses this app. After doing extensive research on forums and interviews I discovered three main user groups 1. researchers 2. Enthusiast 3. Authors. These personas dictated my decisions for the rest of the app.

AUTHOR DASHBOARD

AN EXPERIENCE BUILT FROM THE GROUND UP FOR AUTHORS

I started to manually sketching the editor layout on paper. This helps me iterate on the process really quickly and work through the initial problems. This isn't meant to be a beautifully designed layout, rather it's main purpose is to show the function of the app.

The first version was a solid start but after reviewing with a few authors and fellow designers I found that there were some design issues that needed to be solved.

  • The page had no context as to where the user was located, or how they could navigate to another section. It was confusing and inconsistent to the user-experience.

  • There was no indication for what the user should do or what any of the sections on the page did.

  • The photo upload and content sections had no scrollbar or arrows to show the user that those sections could be navigated.

  • The selected image on the photo gallery wasn't very noticeable and users didn't even know if the image was selected or not.

I knew a huge pain point was the header so I took special attention to make sure it was user friendly, since it's a crucial part of the app. I added a "bread-crumb" before the page title so users would know exactly where they were within the app. There is also the question mark help button that when pressed allows the user to get information on any part of the page.

To give even more information to the header I created 3 new notifications 1. Friends 2. Inbox 3. Activity. This allows users to get an overview of their account on any page so they never miss any action. I also added a user name to the header because I found that people used the same tablet to access their account and it was vital that they don't mix up their content.

To enhance the flow of the page I incorporated tooltips to show the user how to use different elements on the page. The cool part is that the tool tips appear according to what step the user is on. So for example if the user to added a few images a tooltip would appear that would direct them to adding new content to the page.

I also refined the selected image by using the primary yellow color to highlight the selected images and fading the image to show it's active state.

Adding scrollbars and navigation arrows to the content let the user know that those sections could be navigated easily.

To go beyond what the users stated I also changed the plus sign above the upload images text to be a icon of a picture. This allows for quick context when the user is scanning the page.

To allow the authors to have more control over their content I incorporated a building block style editor. Authors can add, remove and move sections to countless different layouts allowing for creative freedom to flow.

To keep the page simple and direct I made the add sections clickable, which then opens a overview to add various different modules (see above). The first version was nice and clean but after some feedback and reflection I noticed a few things that needed to be improved.

  • The overlay felt like a new page an was confusing to the user.

  • The modules didn't have an visual context as to what they did. Why should the user add this?

  • It wasn't obvious that the sections were clickable.

To show the user that the page was an overlay I added a transparency to the background so they could see the editor below. This gives context, showing that the overlay can be closed to view the editor.

To enhance the modules even further and to give context to what they do I added icons that were related to the content. Now if users quickly scan the page they won't have to look for longer than a second to find what they want. The human eye processes visual elements before it reads text. Then, to show the user that the modules can be selected, I made the counter a dotted line.

To handle all the content an advanced search algorithm needed to be created so users and authors could easily found content using target keywords. To work with this system I added a custom tags module that allowed the author to add custom meta tags to the images for easy search. I wanted the author to be able to view the image while they were tagging it so I added a two column page that shows the tags and the current image being tagged.

I was really happy with how this turned out but wanted to get some feedback so I sent the design to a few designer colleagues and discovered that there were some problems with the design.

  • The first thing I was asked was how to add a new custom field to the custom tag section. The add field wasn't very clear and needed work

  • It's not very clear which image is being edited and all the extra information below the image was hard to read and didn't serve a clear purpose.

  • The non tagged images were too large and didn't need to take up so much space.

I updated the header to match the other pages, then worked on solving all the problems. To show the author that they can easily add new tags I added a new "add new field" tags that was highlighted to show that it could be clicked.

I completely overhauled the currently tagging section. I added a yellow dotted border around the image and change the wording on the modal to be more clear. Then I removed the unnecessary meta info below the picture and included the image title within the image element to save space. Below that I shrunk the untagged images so you can see more at a time and added navigation.

When a user views an image in full screen they can view different popup tags that they can click on to view more information about the image. Creating the dashboard for this I wanted to make it really easy for the author to add tags to the image so I opted for a visual approach.

The author is shown the image in full screen and drag an drops a square over the section they want to tag. The idea is solid but needed some enhancements

  • It was confusing to see what part of the image is selected.

  • What if the author wanted to edit a previous tag?

The next version used blurring to call out the tagged section. This made is so much clearer to see what was being tagged. To edit previous tags I added faded indicators that the author could click on to edit.

Having all this content the author needed a place to track all their analytics. I designed an easy to use analytics dashboard that shows the author the essential analytics information.

The analytics modules worked great but there was a few things missing

  • The title card didn't match the rest of the app, this lowers user trust when the overall theme isn't followed

  • This dashboard doesn't have important information like social or transactions.

  • Some information can be viewed by hovering but this isn't very clear.

In the next version above, I removed the inconsistent module and added a sub navigation so the author could view different analytics sections. To show context I added icons to navigation as well.

I also added a tooltip to the graph to show the author that they could see more information in a micro level by hovering the mouse.

USER DASHBOARD

A BLISSFUL USER EXPERIENCE

Before getting into any detailed mockups I wanted to nail down the information that was important for the user dashboard. The content being the most important part of the app was a clear choice. The basic premise is 1. search 2. recommended articles 3. features posts.

I wanted the user content page to be beautiful and eye catching, while softly pushing the user to explore new content. I added an featured background image that changes periodically to inspire the user.

The recommended articles follow a three column grid on tablet, then shrink down to smaller on mobile devices. After looking over the design I noticed that there was something missing.

  • The header is large and bulky and takes away from the content.

  • What if the user want narrow down the categories so they can find more relevant content? This feature is missing completely.

  • There's not ability for the user to purchase prints, that's a huge monetization that is lacking

I shrunk the header so the content is the first thing that the user sees when they look at that page. Having the header so dominant was confusing and irrelevant to this experience.

I played around with this idea of a sidebar that was dark so the content still stood out but also housed some vital links for the user to share shots and buy prints. I added the ability to filter the subjects by pressing on the category the user can find relevant content.

The mobile experience is just as important as the desktop/ tablet experience so I made sure to create layouts that were just as easy to use. I start by creating wireframes in sketch. This was I can make sure my design patterns are consistent.

This layout is for when users are searching through their social feed on the app. The footer navigation hides until the user scrolls up so that the content is more visible and less distracted. When the user clicks on an image they are given options to share or favorite the content.

Social interaction is main point I wanted to focus on when designing this app. The psychology behind social proof is too big of a subject to get into here but basically when your friends use an app you are more likely to use it as well. That's why I spent a lot of time working on the messaging aspect.

A key feature of messaging is the ability to send and receive photos. These can be personal shots or ones that have been favorited from an author.

The user profile page shows recently liked articles so the user can revisit anything they liked again. This is also a great hub for users that are researching articles for reports because they can like articles and gorup them together for quick access.

The profile page also showcases a featured image that the user can switch out to add some personality. A few quick information tags show the user how many posts they liked, shared and commented on.

On mobile the reading experience needed to be seamless. Since the articles contain lots of images and text I made the stories so that the user can read a snippet with a featured image related to the article before they download the whole thing.

Once the user decides if this is the right content for them they can click the "read story" button to view the rest of the article.

USER ONBOARDING

MORE PEOPLE LOVING THE APP

Getting more users to use the app is a primary goal and something that I focused on when thinking about the overall experience. I followed successful design patterns from other successful apps and tweaked them to fit into the National Geographic brand.

The best apps offer users the ability to sign up within moments so they can enjoy the content. National Geographic is no different. I defined the home screen by narrowing down the options to login / sign up. To build more hype around getting inside the app, video backgrounds were incorporated using high resolution videos.

The video background change depending on the month or featured animal. These videos are optimized for mobile and load extremely fast so the user doesn't have to wait.

Users can either signup with their email or connect with facebook for a really fast experience. Tests show that most users go the facebook route because it's easier and requires less steps if they are already logged into facebook.

Once signing up the user can easily add friends from their Facebook or search by name, alternatively they can search for users nearby and request them to be friends. This is important because users want to share their content with their peers and making the process part of the overall signup makes it feel more native to the app.

Of course after the signup process the user lands on a discover page where they can find articles and images that strike their interest. Here the backend will determine what types of content the user enjoys and show them similar content on their discover page. We subtly push the user to signup with facebook because that will recommend the most relevant content depending on the content of their facebook page.

RETROSPECTIVE

IN CONCLUSION

Even with a tight deadlines and everything the app was finished in time and came out beautifully. A key success metric for this project was the revision process. Without that process the app would not be nearly as user friendly. A takeaway that I'm taking from this is to get more user feedback in the early stages during wire-framing so I'm not editing high fidelity mockups.

Thanks for viewing! Be sure to check out my other casestudies!

BACK TO WORK