Worddio is an app for learning languages word by word. In its current form it's targeted towards people who travel often and want to pick up a few useful words in categories they choose. The team's future plans include going multi-platform and selling bulk licenses to foreign schools and other educational institutions.
The Worddio team had been working on their product for a while when they came to us. Actually, that's an understatement: the guys had a complete structure and an early version of the app which they showed to investors. The small team didn’t have any in-house designers and that was quite obvious, so we had to completely trash the old design and build something brand new.
We have always believed in structure. It might not be a popular opinion nowadays, but a flowchart is worth a thousand screens. We love eye candy and clever UI animations, but they really can't make up for poorly done UX. We appreciate having the chance to start from scratch, as we believe there's nothing more important than UX when designing an app. Unfortunately, we didn't have that luxury, so we had to work around it.
The Worddio team had a giant Excel flowchart filled with a huge amount of screens and features. Admittedly, we persuaded them to trim off some fat, but the core structure had to remain untouched.
In the end, we had to design an amazing UI based on a rather complicated flowchart. We took that as a challenge. Designing simple, obvious experiences is something we love, but crafting a user-friendly app out of a sub-par flowchart definitely got us out of our comfort zone.
Before we even started, the Worddio team gave us a heads-up: Worddio is not an app, neither a game, it's more of a hybrid. The visual style had to represent that quite clearly. We've done quite a few apps, but we've never worked on a game and designing interfaces for apps and games are two different tasks.
Worddio was planned as an iOS-only app, but we knew we didn't want to go with a native look. We had to design an app/game that feels native and intuitive, but has its own visual spirit which will, eventually, work on other platforms. There are a lot of amazing apps on the App Store, but a relatively large part of them lack originality.
Going with a native look is easy, safe and client-friendly, sure, but it's not an ultimate solution and it shouldn't be. We would've never seen unique experiences such as Clear, Mailbox or Deliveries if all designers blindly followed Apple's aesthetic.
To make Worddio shine, we used a combination of typography, color and illustration.
Learning a new language can be quite daunting, so we wanted to make it as fun as possible. The idea of using a mascot didn't come up until we started working on the icon. Sure, we could have had a nice white "W", but Worddio is also a game.
Our inspiration for the mascot is Washoe, the first non-human who was though sign languages. Chimpanzees are intelligent, curious and fun. We wanted to create a mascot who made users smile, even if they merely glanced over the icon on their homescreens.
Washoe lives well beyond Worddio's icon. She can be seen in the app’s daily facts and in some of the achievements. We wanted to find the fine line between getting sick of Washoe and not seeing him at all.
We mixed a few different brand colors, but ended up using a bright, almost neon shade of aquamarine. It's okay to call it green. The app changes color within different language courses, so we chose a hue that won't interfere with any flag.
Not using Helvetica Neue was a great exercise. Normally, we prefer keeping our interfaces native, but Worddio is also a game. Typography forms an essential part of a design's character and that's especially true in the case of a language-learning app, where the user is constantly interacting with text.
We can't emphasize enough how much we love Erik Spiekermann's work. Fira Sans, originally created for Mozilla, is a highly legible humanist sans-serif, but also works superb as a display font in larger sizes and heavier weights. The whole specimen is free, it's a great webfont, shall we go on? The Worddio guys had a very limited budget, so we decided not to make it even harder for them and use a free typeface. They really liked the results: Fira makes the app look smart, legible and fun in the same time.
Nobody likes long onboarding sequences, so we kept it as brief as possible. The app asks you about your native language and the first language you want to learn. That's it. Creating an account is an essential part of the Worddio experience, but enrolling in a single course does not require your personal information, the user's progress is saved locally. You're asked to create an account after you've opened the app a few times, but it's non-obtrusive and you could simply dismiss the dialogue. You are required to register only if you want to start a second course before finishing the first one.
The main screen is simple and straightforward. All languages are presented as color-coded cards you can swipe horizontally. The pie chart represents the user's progress by topic and tapping anywhere on the card transitions to a full-screen view. From this moment on, Worddio is completely color-coded according to the language's color.
Tapping and dragging around different topics expands their correlating slice. That works in the same manner if you tap and drag around the pie chart.
Each course features two modes: Learn and Test. You can learn new words or new phrases and test your pronunciation or vocabulary. Admittedly, it's a bit confusing, but that's a part of the core structure we weren't allowed to change. We made it a bit easier by allowing users to switch between modes after they've picked one without going back to the main screen.
Swipe left or right to cycle trough screens. Tap to see comments.
When we finished Worddio's MVP screens, the only game mode the guys were presenting was "Learn new words". Worddio allows users to learn new words anywhere, even if the device is locked inside their pockets. Having a chance to look at the screen allows for a richer experience. You can see a word's spelling in both languages. A single tap of the smaller button bellow Play gives control over the number of times a word is repeated.
We love apps with on-screen volume sliders, so we decided to add one. The playback controls are big and easy to tap, even if you're not looking at the screen, which is a part of Worddio's core user experience. Night Mode is completely automatic so you don’t have to think about turning it on or scroll through a long list of settings. This way you can keep learning after dark without any eyestrain or fatigue.
We're still considering a few different ways to embed prototypes. Stay tuned.
Working on Worddio was fun. I've always been a die-hard supporter of close-to-native interfaces. They provide a gentler learning curve and make users feel at home with the first launch. With Worddio, we wanted to preserve a sense of familiarity while bringing some character in terms of visuals. Most of the stuff we don't think about when going native had to be designed from the ground up.
We had to think in edge cases from the start. An app based around words has to accommodate buttons and labels with extremely variable length without breaking the visual rhythm. Prototyping helped a lot: we made a few simple dummies in Form and tried a huge amount of words. In the end, we managed to keep our baseline grid sanity while accommodating really long words.
We’d love to make something awesome with you too. Want to work with us?
