Credit: NG Launch Reel by Gian M.
The National Geographic Magazine app for iOS and Android gets a fresh new look with the recent redesign. The app was redesigned with the users in mind. Taking the users through an immersive storytelling from streaming videos to browsing the latest issue on the go. The new app also provides users access to a curated set of magazine issues dating back to 1888.
One of the purpose of the redesign was to provide users with a better app that they would love to use. The original National Geographic app had low reviews on the iOS store (2.1 stars). After the relaunch of the app and with amazing news, the National Geographic app is sitting on a 4.8 stars on the iOS store and 4.4 stars on the Android Play store!
The National Geographic mobile app redesign was a huge initiative with collaboraton across product, design, and engineering.
The project was led by talented design leads and senior designers. The team consisted of 8 designers designing and focusing on different areas of the app.
The project duration was about 8 months in total.
My role on this project was split into two portions.
The first part was designing a couple of features for the mobile platform side.
The second part, which was a significant portion of my role, was contributing to the tablet version of the mobile app for both iOS and Android.
The goal was to translate all the mobile (smaller) breakpoints over to the tablet (larger) breakpoints.
I also took process on design qa for phone and tablet on multiple devices for iOS and Android.
I had to make sure that the tablet designs followed and adhere to the design systems set in place in our NG global stylesheet for this redesign.
DESIGNING FOR TABLET INTERFACE
Mobile to Tablet
When taking designs from mobile and translating over to tablet, it isn't just a 1:1 conversion. There were many technical and design constraints we had to be aware of. On tablet, we weren't just designing for portrait view, we had to make sure that the designs make sense when users were using the app in landscape view. Some constraints also come from the differences between the iOS and Android platforms.
Features that I contributed to and are shown below:
A feature that I contributed to on the mobile platform side was designing the modal for messaging within the app.
One use case of the modal is to notify users that they can stay up to date with NatGeo by allowing the app to provide users with alerts on new photos and stories.
By designing the symbols in the master library, we are then able to implement these designs in the rest of the app in a more efficient way.
We also identify design guidelines for each of our symbols/components that we created for this project. By doing so, engineers will have an easier time building the product and the process can be more streamlined.
We designed different variations of how the modals can be used to promote messaging to our users.
We first designed for mobile, light and dark mode. We tested a couple of different iterations of the skeleton notification concept and decided on these.
In the earlier versions of these modals, the skeleton concept were all monotoned and felt very bland.
I suggested that we can add in the National Geographic yellow to bring more brand familiarity to it. The yellow square is also very similar to the National Geographic icon which many users are familiar with.
Mobile (iOS) Light Mode
Mobile (iOS) Dark Mode
Following the iOS, Android, and Prism guidelines, I translated the mobile designs over to tablet. Making sure that grids, spacing, type ramps, and structure are correct for tablet.
I also made sure that the designs are responsive in both portrait and landscape view. Also responsive in the different breakpoints of the tablet devices.
I designed the light mode versions of iOS and android tablet first before designing the dark mode versions, which made things easier.
Tablet (iOS) Light mode: Portrait & Landscape mode
Tablet (Android) Dark mode: Portrait & Landscape mode
Translating the magazine page designs from mobile to tablet had some difficulties.
For example, the background image of the lead image is larger in size and therefore we had to make compromises where either the images will get cut off or faces will be blocked by content on larger screen size.
We had to decide how many magazine issues we want to display within the horizontal side scroll feature.
Mobile (iOS) Light Mode
Mobile (iOS) Dark Mode
Moving from mobile to tablet, the background image of the featured magazine may end up being cut off depending on the image.
This was a compromise that we had to decide on since National Geographic has many different types of amazing photos.
As for the recent issues section, users will notice that on mobile, they will only be able to see 1 and a half issues. While on tablet, 3 full issues will be displayed on portrait and 4 full issues can be seen on landscape view.
Tablet (iOS) Light Mode - Portrait & Landscape View
Tablet (iOS) Dark Mode - Portrait & Landscape View
Aside from just converting the designs from mobile to tablet, we also had to make sure the designs work on different breakpoints. This meant that we were designing for iPad, iPad 11, iPad 12 for iOS, standard tablet (equivalent to iPad) and Samsung tablet (equivalent to iPad 11) for Android. For iPad, we also had to make sure that the designs were working for multiflex - different breakpoints for when multi-apps are in use.
A few examples of iPad breakpoints
Dark mode and Android breakpoints not shown
iPad - Portrait view
iPad 11 - Portrait view
iPad 12 - Portrait view
PAYWALL & ONE ID
Converting the Paywall & One ID tablet designs from mobile was where I spent most of my time on the NatGeo project.
The user flow of these screens had to be accurate when passing on to engineering as it would affect how users sign in, interact with the subscriptions, and additional paywall access. The total design artboard collection for Paywall & One ID tablet is over 300 screens for each platform (iOS & Android).
Below is just a small sneakpeek of the Paywall and One ID experience:
Not shown: entire Paywall & One ID experience, breakpoints, multiflex, Android
iPad - New Subscriber - Light Mode
iPad - New Subscriber - Dark Mode
iPad - New Account - Light Mode
iPad - New Account - Dark Mode
iPad - Link Account - Light Mode
iPad - Link Account - Dark Mode
iPad - Guest - Light Mode
iPad - Guest - Dark Mode
SEARCH & BROWSE
The Search & Browse was designed to be a streamlined experience. Users are able to go to the browse tab of the app and be greeted with featured topics and categories curated by National Geographic. Featured topics would show many of the trending news that the company wants users to know about and read up on, while categories are important pillars of the National Geographic brand.
Once a user selects a tile they wish to view, users are taken to a collections page that only shows related contents. The contents are sorted into all, articles, photos, videos, and magazine.
Users can also search for a keyword and any related content will show up in the search results with the same sorting function.
Below is a small snippet of the Search & Browse feature for tablet:
Only a few experiences are shown here. Feel free to check out the National Geographic app for more content!
iPad - Browse - Light Mode
iPad - Browse - Dark Mode
iPad - Browse - Light Mode - Landscape
iPad - Browse - Dark Mode - Landscape
iPad - Search Results - Light Mode
iPad - Search Results - Dark Mode
iPad - Collections - Light Mode
iPad - Collections - Dark Mode
If you enjoyed this project, make sure to check out the National Geographic app!
MHCID Capstone ProjectCapstone Project
Effects of COVID-19 on Remote WorkSynthesis Paper
STEAM Redesign ConceptUI Design
National Geographic AppProduct Design
Interactive Election Map & MoreProduct Design
ABC News Election 2020Product Design
Article Transmission ProjectProduct Design
PlantrMobile App Design