Duolingo Tinycards by Jack Morgan

Tinycards by Duolingo

Tinycards by Duolingo

Tinycards by Duolingo

In February 2016, I moved from London, England to Pittsburgh, USA to join Duolingo – the world’s most popular education app and then fledgling ~45 person startup.

My first task at Duolingo: work on creating the name and brand identity for a new flashcard app concept – our first ever foray outside of language education.

Duolingo Tinycards Original DesignsCredit: Greg Hartman

When I started at Duolingo, the app now known as Tinycards was changing drastically every day, as we tried to figure out what this product should be, how it should feel and – for me at least – what we should call it.
 
At the time, Tinycards didn’t have a name. The whole company had collaborated on a Google doc to come up with over 100 names; but none of them felt right.
Duolingo Tinycards Flips Logo Sketches by Jack Morgan
I spent the next several weeks sitting with the team, buried under a giant spreadsheet full of names, the USPTO Trademark Registry and of course, a sketchbook and Adobe Illustrator. It took a while, but eventually we found a name we liked: Flips, inspired by the app’s unique and delightful card flipping and swiping gestures.
Duolingo Tinycards Flips Logo Exploration

After much iteration, we settled on a magical flipping card that, while in motion, formed an ‘F’.

Duolingo Tinycards Flips App Icon Exploration
Duolingo Tinycards Flips Branding Draft by Jack Morgan
The app continued to evolve and change, and the Flips metaphor became less relevant. Eventually, we made the difficult decision to kill the name Flips – and again began the search for the right look and feel.
 
Late one night, Duolingo’s Chief Design Officer Tyler Murphy emailed myself and the team with nothing but the subject line ‘Tiny Cards’. I said I’d look into it.
Duolingo Tinycards Naming
This gave me the idea of giving the cards personality; a face, and different facial expressions. This was the sense of playfulness and delight that the app had been missing. We began drafting initial branding ideas for the name.
 
The first decision I made was to drop the Title Case ‘Tiny Cards’ formatting and go for one word: Tinycards. A Portmanteau, just like Duolingo.
Duolingo Tinycards 1st Logo Draft
 
Duolingo Tinycards Facial Expressions
The next decision was to expand on the idea of personifying the cards, by further experimenting with facial expressions and most importantly; injecting them into Greg’s app designs to inform everything from empty-states to Tinycards’ most important mechanic: measuring ‘strength,’ or how how well you know a card.
Duolingo Tinycards Facial Expressions UI Mockups
We decided to combine this new ‘face’ approach with the existing strength meter: the stronger your cards, the happier they are. The weaker your cards, the more likelihood of them shattering and returning to faceless progress bars. Now, the branding was truly informing the app’s design and functionality and vice versa – this turned out to be the perfect storm for creating a truly original experience.
Duolingo Tinycards Facial Expression Progression Animation
 
Duolingo Tinycards App Icon Exploration by Jack Morgan
After experimenting with hundreds of face variations, we ended up with a happy stack of cards and a modified version of the original glyph outline and customized Duolingo-style wordmark.
Duolingo Tinycards App Icon Logo by Jack Morgan
As Greg – Tinycards’ Lead Designer – finalized the app design, he applied his illustration skills to everything we’d created so far to design what would become the final face of Tinycards.
 
We named him Tiny.
Duolingo Tinycards Logo Final
 

Duolingo Tinycards Design FinalCredit: Greg Hartman


Duolingo Tinycards The Next Web Press
 
Duolingo Tinycards ProductHunt App of the Year
Tinycards launched to rave reviews in the Tech press and hit the front page of ProductHunt, before going on to win ProductHunt’s Golden Kitty Award for Mobile App of the Year 2016, beating much-hyped apps like Prisma and Houseparty.
 
http://twitter.com/jckmgn/status/819580130725076993
Tinycards Product Hunt Golden Kitty Award App of the Year
Duolingo Tinycards Apple Feature
Tinycards also received a huge launch-week feature from Apple in the App Store, along with Apple’s glowing review and verdict: Tinycards are even better than Flashcards themselves.
 
Tinycards even went on to outrank Duolingo in the App Store for a while, reaching the top of the Education category. Apple later named Tinycards as one of the Top 10 Apps of 2016, and featured the Tinycards app icon in the center of their marketing materials alongside apps like Clash Royale and Instagram.
Duolingo Tinycards Featured by Apple
 
Duolingo Tinycards Apple Twitter Feature
Date: 2016
Company: Duolingo
Project: Tinycards
Role: Brand Identity Design, Naming, Trademarking, Design Advisor
Team:
Greg Hartman (Lead Designer)
David Klionsky (Lead Engineer)
Jack Morgan (Branding)
Tyler Murphy (Naming, Creative Direction)
Karin Tsai (Backend Engineer)
Luis Von Ahn (CEO)
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!