Design concept for Lango, a language-learning app for the Apple Watch

Can the Apple Watch help you learn a new language? I designed LANGO to find out.

And, how do you design for a device you don’t own?

Dana Larson

--

I love languages and linguistics, especially crazy rules like the proper order of English adjectives. But if English adjectives aren’t proof enough, learning a new language is hard. One of the most difficult challenges is memorizing enough vocabulary to converse on-the-spot. Rules only get you so far when situational context matters.

Thankfully, we have a way of providing situational context to people: Through smartphones and, more recently, smart watches. These devices can pick up location and activity cues from their users and turn these into relevant experiences. I wanted to see if the Apple Watch could utilize such experiences to help its users learn a new language, and designed an app I named Lango as a result.

This design was done as my capstone project during my course with Bloc, with mentoring provided by Mike Dekker.

The inspiration

The best way to learn a language is immersion, but having a partner helps

I’ve been taking French classes for close to a year now, once a week. We use a book as a guide but also practice conversation with one another. When class is over, we’re on our own to study and review everything we covered.

I have an advantage, however; My boyfriend, whom I’ve lived with for almost a year, is French (hence why I’m taking the classes). He lovingly helps me with my weekly homework, but we also practice French day-to-day. Perhaps the most useful way we’ve been practicing is through conversations based on where we are and what we’re doing. For example, If we’re waiting at the bus stop, he’ll teach me how to say “The next bus should arrive in 12 minutes.”

Learning a new language in relevant contexts not only makes it more enjoyable, but more memorable. It’s why immersion, living in a country that speaks a foreign language, is the most effective way to learn a new language. Having a partner around most of the time to teach you contextual things comes pretty close.

Mobile devices are good at picking up context, but can fall short in teaching languages

I have various apps on my Android phone that ping me throughout the day based on my location or activity. An activity tracker will alert me when I’m short of my daily walking goal. Google will let me know when a storm is expected at my location. My mobile is able to provide relevant information and prompts just by tagging along in my pocket all day.

The Apple Watch packs similar power. One of its key selling points is its use as a fitness tracker, but when paired with an iPhone, it can provide valuable information on other contextual cues like the ones I described above. Unlike a phone, however, it’s small enough to be on hand (ha…) at all times. You don’t need to wait to hear a ping or feel a buzz and then dig around in your pockets to check your phone; With an Apple Watch, a quick glance at your wrist lets you view and react to contextual information much more quickly.

Apple and Android both have a wealth of language-learning apps. They’re a great way to get started and practice, but the user must choose to open the app each time they want to learn. Using a phone app to learn a language is something that forces the user to pause, not something that responds to what the user is doing already.

Une boulangerie à Paris

The idea

I thought about my daily mini-lessons with my boyfriend. When we visited France last December, he was able to whisper tips to me as I attempted ordering coffee in the morning (Je voudrais un café au lait, s’il vous plaît). It gave me confidence and was the precise, and short, piece of information I needed to complete the task at hand, at the exact location I needed it.

We can use smart prompts to provide contextual language lessons, and a smartwatch screen to deliver them succinctly

What if a language-learning app could prompt the user to learn based on their current location or activity? What if lessons could be small enough to view just by glancing at your wrist?

User Research

Classroom instruction is effective, but frequent study makes all the difference

It’s important to validate user needs and experiences before diving into designing solutions, so as long as I had access to my weekly French class, I felt it was a great place to start my research. I asked my fellow French students how they were studied and how they felt about their success. I also asked if they used any mobile or web apps to learn French.

Our French instruction book — I often need to pull up Word Reference for help with conjugation.

Nearly everyone had used Duolingo. They felt it was a fun way to get started and to practice vocabulary, but felt frustrated by the dead ends they would hit after reaching certain levels. I asked them how often they used Duolingo to study, and most admitted that they’d use it less and less as time went on. The content was either irrelevant, or they kept forgetting about it.

Some students used flash cards to review vocabulary from our lessons. They felt this was more effective and relevant since they used material straight from the class, and we often deviated from the prescribed course to discuss how to say things more pertinent to our daily lives. But again, using the flash cards was only effective when students made the time for it. As most students in my class are working professionals, they found it difficult to set aside time devoted to study after work.

Setting aside time was a recurrent theme in these discussions. This already validated that a language-learning experience that was brief and responsive to your current situation could be much more effective than pausing to learn through traditional methods.

Language apps can become frustrating if you’re learning irrelevant vocabulary and not being reminded to practice

I didn’t want to let one classroom sway my opinion, so I reached out to the larger Internet via Twitter, Facebook and language-focused sub-reddits for more feedback. My survey received nearly 500 responses before I closed submissions; This was clearly an important topic to many people.

My survey asked some specific questions, such as which apps people used to learn languages, what they struggled with and what helped them in learning a new language. Many used Duolingo or Memrise for language-learning, and appreciated the game-like experience these apps offered. They primarily struggled with sentence structure, as well as remembering enough vocabulary. They chose immersion and frequent study as the best practices that would help them learn.

Perhaps the most telling information gathered from the survey came from the open response prompts. Many of the themes surfacing in my French class discussion were present with other language-learners:

“[Other language apps] do not help much with committing to memory.”

“[I don’t get] enough practice. I need a system to keep me devoted to my study of vocabulary and such.”

“[I dislike] how [other language apps] go off on wild tangents with words I will hardly use, [and] don’t give me contextual phrases.”

“[I] would appreciate more immersion in the language I was trying to learn.”

Much like the French students lamented not having enough time to study, survey respondents lamented not being prompted enough to practice and learn. And much like the French students found flash cards from class lessons useful, it was clear that survey respondents needed content that was more relevant to them. And for everyone trying to learn, attending a class once a week or pulling an app out on one’s phone now and then just wasn’t cutting it. More frequent immersion in the language was needed.

I categorized the people in my French class and the survey respondents into three groups based on their primary reason for learning a new language: Tourists, Students, and Casuals. I then drafted user stories and prioritized them based on feedback and frequency of certain responses.

Red is highest priority and yellow is lowest. Some stories are applicable to all user types. Many of these were scrapped in the final design.

I then took these user stories (and some of my own ideas) and drafted some possible features for my Apple Watch design.

In drafting features, I considered what users needed for language learning as well as what would make the app practical and enjoyable on a small watch screen.

I try not to limit myself in the early stages of design; It’s important to keep user needs and practicality in mind, but it’s just as important to let loose your creativity and consider solutions that may have not been initially obvious. That said, to keep a language-learning app as simplified and brief as the watch face it would later be used on, I drastically reduced the features I would ultimately design.

I focused on how the watch could prompt users to learn a brief language lesson when it detected them near a location or performing an activity. I would make certain settings available so the user could adjust the types of brief lessons that would appear and their frequency.

The next step was to design how such a solution would behave and what it would look like.

Concepts

Fussing over specs can slow you down; Design what you know is right and adjust to spec after

The problem with designing for the Apple Watch is not only are the devices fairly new, but they are pricey. While it’s immensely helpful to have a device on hand when planning a design for it, this time I’d have to do without.

To overcome this device handicap, I spent hours reading up on Apple Watch specs and guidelines, learning what sorts of cues the Watch could respond to, how much space was available on the screen, etc. YouTube ended up being an invaluable resource, as there’s plenty of people happy to show off their tech and how they use it.

I downloaded an Apple Watch UI kit for Sketch and set to work. My design was simple, so it’d be a matter of mixing and matching the elements in the kit to produce the app screens I needed for my prototype, right?

Wrong. Even though I simplified which user stories I would cater to, and had mapped out the flows my app would allow, I felt the need to continuously reference the official Apple Watch specs to ensure what I was designing would fit. Any time I added a bit of text here or moved a button there, I would open the Apple guidelines and make sure my design was “right.” My fear of the unknown and desire for accuracy was crippling me.

My mentor suggested I ignore the specs. I didn’t feel confident that my end product would be Apple-friendly if I ignored the specs from the get-go, but he encouraged me to design in a more simplified way and just focus on what I know to be right about user experience to get the basic UI in place.

Using Balsamiq to focus on UI elements, not the finer details of the official spec

I used Balsamiq to make lo-fi wires. I could still limit the screen size to mimic that of the Apple Watch, but now I could make some progress thinking about how to deliver mini language lessons and how users could respond.

Working in un-styled wires put the focus back into the experience and less on the spec. I actually uncovered a few issues with my initial plan, one of which was color-coding different words based on if they were nouns, verbs, or expressions. This was meant to help the user sort different words in their language log (vocabulary list) or understand a word’s purpose, but given that there wasn’t room to put a color guide and no other action a user could take concerning word types, this concept ended up just being confusing. I scrapped this and a few other ideas to further refine the idea into something appropriately small enough for a watch.

Branding

Mood boards are excellent tools for gathering all of your ideas before settling on the best ones

One key point in all that Apple Watch documentation is the importance of branding and logo design for watch apps. Given the size of the screen, having a primary brand color and an easily recognizable icon is critical.

A collection of Apple Watch app icons and other circular designs

I created a mood board via InvisionApp and gathered examples of logos and app icons from other language-learning apps and Apple Watch apps. They all focused on a strong brand color with a soft gradient, and a minimal logo for quick recognition.

After playing around with a color mixer, I found a vibrant and distinct purple that spoke to the fun of using an app, but the studiousness of learning a language.

My notes for name creation

I also used this mood board to jot down ideas for a name. Given my fondness of languages, this was a pretty enjoyable exercise. I jotted down themes like language, activity, location, and wrote down whatever related words came to mind.

The name “Lango” sprang up from “language” and “go,” but seemed too simple and obvious at first. I spent a while researching other app names and trying out different ideas before revisiting Lango. Sometimes (most times), simplicity really is the answer, even if it doesn’t look very creative on the surface.

Lango was fun to say and conveyed what the app does immediately. I added the tagline “Go find a new language” to further cement the idea.

Lango logo early concepts — Yes, some of these are pretty awful

For the logo, I used some basic grid paper and sketched several rough ideas. I used the notes from my mood board to go through my different themes and work out how to convey learning a language through an image. Browsing through language-learning apps and websites and even paying The Noun Project a visit didn’t give any conclusive answers.

Final Lango logo design on an Apple Watch notification screen

I sketched everything from speech bubbles to globes to birds, before reconsidering how Lango works: You wear your watch, walk around, and learn as you go. I focused on designing something around the classic map marker that all mobile users have become familiar with. The map marker and speech bubble are similar in shape, so I combined the two. I placed the speech bubble on a map to indicate speech by location. After reviewing my design with my mentor, we made a few tweaks to add a compass into the design, and the end result was perfect.

Prototyping

I had my wires, my app name, my brand color and my logo. I was ready to bring Lango to life.

Guide your users through empty states and errors, don’t block them

One key thing I focus on when designing experiences is empty states and errors. Many apps and websites use an onboarding tutorial as their first step, but I feel this can be more time-consuming than helpful. If a user has downloaded an app or visited a website, they’re already committed to accomplishing a goal; The best idea is to provide the shortest route there with the least instruction necessary. Throwing an error or blocking their path with a how-to should be a last resort.

If a new user clicks on “Language Log” from the home screen, they will be prompted to check their settings or get active instead of seeing an error or just…nothing.

Lango’s only onboarding is in choosing which language you would like to learn. A first-time user is guided into doing this by arriving at a “choose your language” screen no matter what action they take from the home screen. I felt the user should be allowed to choose any normal action when first launching the app, since this would get out of their way as they use and explore it, while also familiarizing them with the navigation straight from the start. The empty states they encounter along the way inform them of how the app works and provide a direct path to the next step to complete their setup and get started.

After a language is chosen, some basic default settings allow the user to start using the app immediately. The user can later adjust which verb tenses they would like to learn, which lesson triggers to use (learn by location, learn by activity, etc.), turn on “Do Not Disturb” mode, and even connect to Facebook to practice with friends.

Let your users keep exploring without getting lost

When a user is prompted to learn a new word in Lango, they have the option to view related words. These are displayed three at a time. This allows the user to keep learning without overwhelming them with too many options. Each time they click on a new word to learn it, it’s automatically added their language log to review later.

When the user visits a coffee shop and learns “un cafe au lait,” they can click on “More like this” to learn related words and phrases.

Apple Watch calls for simple navigation; an action forward should provide a path backward. This meant that continuously choosing to learn a related word could create a very deep black hole. To prevent the user from needing to hit ‘back’ several times to return home, new words all navigate back to the language log.

If the user clicks to learn a related word or phrase, their navigation path backwards sends them to the language log showing all the words they’ve learned.

When the user navigates ‘back,’ they will see the full list of all the words and phrases they’ve learned. This way, even if their intent is to go back to a particular word they were viewing previously, they still have a path to do so.

What the language log might look like for a user that’s been using Lango for some time.

Meet users where they want to be

Lango came about from the idea of learning language while going about one’s day. The same mentality of providing information when and where the user needs it is present in the app itself.

If users connect to Facebook, they can practice conversations with their friends. Each friend takes a turn choosing from three phrases to gradually build a conversation.

If the user hits “Reply,” they will be given three new phrases that are appropriate responses to the friend’s last prompt.

I decided it was okay if the user wasn’t completely sure what a response meant before selecting it. The goal was to keep the conversation going and show what sorts of responses were possible, in tune with learning through action and context. Each response has an information icon next to it that allows the user to see its translation.

Learn what a conversation prompt means and add it to your language log.

Much like the location prompt helps users learn through the context of where they are, learning words through conversation helps solidify their meaning and appropriate use.

Try Lango yourself

You don’t need an Apple Watch to try Lango. While not imitating the experience of location-based notifications, my prototype still shows Lango’s potential for learning language ‘on the go’.

Try the prototype on InvisionApp. As the prototype is built from Sketch screens, not everything will work. Click anywhere on the screen and see the blue hot spots appear to find which actions are possible. Icons courtesy of The Noun Project.

Thank you

Thank you for reading about Lango! Thanks as well to Bloc for the amazing curriculum and to Mike Dekker for the wonderful mentoring.

Feedback and questions are encouraged. Sharing is very appreciated.

If you liked this article, you’ll probably love my analysis of an adorable Japanese kitty game.

--

--

Dana Larson

Chicago native currently living and working in Wellington, NZ. Very interested in the environment, technology/web, coffee, weird music and even weirder art.