WHAT IF: Designing Kurzgesagt Mobile App

Kurzgesagt mobile app screens (launch screen, register/login, home screen, shop, shopping cart, meetups and chat)
Kurzgesagt: ‘In a nutshell’ – Click on the image for a larger view.
  • “WHAT IF… I’m managing this restaurant? What will I do to improve the take-away service?”
  • “WHAT IF… I own this OTT channel? How can I improve the programming to attract college students?”
  • “WHAT IF… I’m asked to redesign the Yahoo! Weather App? What will I do differently?”

These are the type of questions that pop up in my head whenever I’m eating a Biryani or streaming a movie or using a mobile app! Recently when I visited Kurzgesagt website for inspiration to design a poster for Kochi meetup, I thought “WHAT IF… I could come up with a design direction for a new Kurzgesagt mobile app?”

This blog post is the result of that thought…

About Kurzgesagt

Kurzgesagt is a very popular science YouTube channel. Their unique style of illustrations, animations and story telling have a huge fan following. Kurzgesagt has some very interesting merchandise on sale and they have their own Skillshare course on animation. Kurzgesagt is also an animation studio that can be hired for creative works. Their Founder-CEO, Philipp Dettmer, has published an amazing book ‘Immune’ about human body’s defense mechanisms against pathogens. Fans can donate any amount of money for Kurzgesagt activities through their Patreon platform — you can start by donating just $1 every month!

DISCLAIMER— This is an unsolicited design attempt and is not an official commissioned work from Kurzgesagt. Like an ‘armchair detective,’ I’m trying to answer my own “what if” questions. There is absolutely no research to back the observations I have made here. No disrespect intended to the brilliant minds of Kurzgesagt. Peace!

In a Nutshell

  1. Does it make sense to design a mobile app that carries a duplicate copy of all videos from the YouTube channel?
    YouTube channels of creators like Corridor Crew and Drew Binsky were recently hacked and they had to move mountains to get their channels back with Google’s timely help.
    So yes! It makes complete sense to have a duplicate, secondary channel as a mobile app or website. Corridor Crew does this brilliantly by hosting their own website with additional content behind a paywall. A dedicated Kurzgesagt mobile app that can play longer, exclusive content is what we need.
  2. YouTube channel is just a ‘teaser,’ mobile app is the ‘full movie’!
    Ad revenue from YouTube is based on the number of interactions (like/dislike, comment, subscribe…) and other KPIs like average viewing time. There are other opportunities to monetize the channel by partnering with other brands for ‘in-video-product-placements’ as well. But the dependency on ads for revenue might dilute Kurzgesagt brand value.
    Ideally, YouTube channel should be a means of attracting new paying customers to the Kurzgesagt app offering premium (longer and exclusive) content.
  3. Attracting new users and converting them to loyal brand ambassadors.
    To further grow the fanbase, Kurzgesagt has actively started bringing people together for meetups across the cities in the world. Right now, these are being officially organized on Reddit. People in each city are using their own means of communication like WhatsApp or Telegram, unsupervised by Kurzgesagt, to plan and come together for meetups.
    All these activities like chats and meetups can be brought to the mobile app. Drew Binsky’s JUST GO app is the perfect example of doing this for meetups in city groups.
  4. E-commerce Revenue
    A sizeable fanbase is important to get revenue by selling merchandise (posters, t-shirts), books, premium content and training sessions. These e-commerce activities can be unified on the Kurzgesagt mobile app. It also can handle donations from users just like the Patreon platform.
  5. Portfolio of Customer Projects
    Behind the scenes and the design process of Kurzgesagt Studio doing illustrations and animation films for paying customers will definitely be a business magnet. The best example out there is ‘The Studio’ YouTube channel of Marques Brownlee (MKBHD) showcasing what goes behind the videos and podcasts they produce. Let’s bring in an improved Portfolio section in the Kurzgesagt mobile app!

Kurzgesagt Mobile App

Here are some representative screens of a Kurzgesagt Mobile App aimed at their fans of the YouTube channel. Information architecture and navigation patterns are not thought out in detail in these screens. What are the features we can expect in the app?

Video Playback Mindful of Screen Time

Kurzgesagt mobile app home screen showing video playlist
Home screen

We should respect the time people spend on Kurzgesagt and we should never allow them to fall into the rabbit hole of ‘auto playing’ videos one after the other. Here is a provision to let the app know how much leisure time a user has or how much time they are ready to spend on the app. The default setting is 30 minutes and the user can tap on ’30 minutes’ to edit it.

Users can order and filter the videos in the default playlist using the tags ‘New,’ and ‘Popular.’ For users who believe in ‘serendipity,’ there is a ‘Surprise Me!’ option to view the videos in random order. ‘Swipe Right’ gesture on a video card makes it available offline as a ‘Watch Later’ list.

Shopping Within a Budget

Kurzgesagt mobile app shopping page showing merchandise
Shop

Often when we shop online, we usually have a budget limit in our mind. This is very true when we are shopping something as a gift for someone. The ‘Shop’ section of Kurzgesagt app also feature a setting where an amount can be entered as the maximum limit. Based on that value, merchandise is displayed and further filtering — ‘New,’ ‘Popular’ and ‘Deals’ — can be also done.

In this screen, ‘swipe right’ gesture adds an item to the shopping cart for a checkout later.

Shopping Cart

Kurzgesagt mobile app shopping cart page showing merchandise purchased
Shopping Cart

The total shopping cart value is shown on top of the page, followed by horizontal scrollable cards showing all the purchased items. In this same screen, the app proposes donation amounts to the nearest $50 or $100 based on the total cart value. The benefits of the donations are highlighted in square cards aimed at nudging the users. ‘Checkout & Pay’ is the primary action button on this page.

Community Meetups

Kurzgesagt mobile app community page showing meetups.
Community Meetups

Meetups are conducted under a city name and the ‘Community’ page shows a list view of upcoming meetups. For easy comprehension, instead of showing — say, the exact “35 days to go” for an upcoming event, the app displays an approximated duration of “one month to go.” This feels more natural, right?

‘Swipe right’ gesture on any of these meetup cards is a short cut to mark “I’m attending.” There are options either to start a new meetup or look at “My Meetups” which we have already registered.

Kurzgesagt mobile app community page showing chats.
Meetup chats

When we click on a particular meetup card, we are greeted with the latest few live chat messages among the members. Details like meetup place, map showing venue location, time and date as well as the number of participants are visible here. We can right away join the meetup as an attendee; or there is a “Remind Me” option to come back later with a decision. Again, based on the number of days to the event, the app can remind us in one day, one week or even in one month.

App Launch Screen: The Cherry on the (Yet to be Cooked) Cake!

Kurzgesagt App Launch Screen Animation

Launch screens can be displayed upon an app’s launch from the home screen when an app loads, instead of displaying a blank screen. Displaying a launch screen can decrease the sense of a long load time, and has the potential to add delight to the user experience.
Branded launch screens express branding while an app loads, by displaying a logo or other elements that improve brand recognition. Avoid using text on this screen except your logo and, if applicable, a tagline.

Android Material Design Guidelines

The brilliant Kurzgesagt logo animation GIF of the rotating earth, showcased on their website header and on their Patreon page, is the inspiration behind the animation video shown above. We have our earth hurtling across the universe and then a heavenly body (is it moon? or, some other planet?) moves into the PoV — this morphs into the app background graphic on all the screens shown above.

Non-intrusive Registration/Login

Unlike what is implied in the above app launch screen animation video, the Kurzgesagt app can be used without any registration or login. Launching the app will take us to the home ‘Videos’ screen that mirrors all the “free for viewing” videos from the YouTube channel.

The prompts requesting the users to register will show up only when:

  • We add a video to ‘Watch Later’ list.
  • We are trying to watch any premium (longer and exclusive) video.
  • We are shopping, immediately after entering the shipping details, a message pops up asking “Shall we use your entered contact details to create a Kurzgesagt account?” ‘Yes/No’ choice is made available for us.
  • We join a Meetup chat thread.
Kurzgesagt mobile app Register/Login screen
Register/Login

Personally, I’m not a big fan of passwords or even SSO (Single Sign On) using social media credentials. So, here the idea is to help users to log in by clicking on a ‘magic link’ received on their E-Mail ID or by automatically detecting an OTP (One Time PIN) received to their mobile number.

So, that’s it for now. I might further work on the designs and update this. Let’s see.

Inspirations

Although most of the inspirations are attributed in the above article, here is a list with everything and some additional entries.

So, what do you think about this Kurzgesagt app? Do comment below.

Free resources used in this exploration