You only need to read the last few posts on this blog to get an immediate sense of the frustration I’ve felt in moving so slowly with Yakk. But while it has been a great source of frustration, it makes for an interesting look back at how the app has grown over time.
In this post, I’ll take you on a history lesson of how Yakk begun, and how it gradually improved.
Let’s start right at the beginning with this gem.
A few weeks after conceiving the idea of a conversation-based language learning app, I got to work and came up with this. It was the first prototype of the very rough ideas in my head.
There’s an aspect of the learning-language (the German flag in the top right corner), and I remember that the first two tabs referred to words learned and conversations practised, respectively.
The first prototype was built as hybrid app. That means it was a packaged web app in disguise, pretending to be native, and seeking to constantly disappoint. As time went on, I wasted a lot of it trying to bend and shape the app into behaving like a native app.
Looking back at the prototype, it’s clear I didn’t really know what I was building. To say “Yakk is an app to help you learn languages” was too easy – what did it actually do?
Eventually I gave up trying to fumble my way through converting the prototype into the great learning experience I wanted, and two lessons fell out:
I needed to learn better tools if I wanted to make a great app.
I needed to work out what replaced the
<div>START</div>from the prototype. In other words, I needed to work out exactly what the hell I wanted to build.
Tackling the first problem, I decided to take some time out and learn how to build iOS apps properly. That meant ignoring the burning sensation and learning Objective-C (Swift wasn’t released yet), as well as working out how to architect and build an iOS app. A great user experience has always been an important goal with Yakk, so a lot of my time was spent learning how to make things pleasing to humans, rather than just merely functional.
To solve the second problem, I figured I needed to buy an expensive notebook. What would follow, surely, were many more sketches and ideas, and ultimately fame.
Soon afterwards, I discovered that writing things down doesn’t make them inherently good or useful. Who knew. Those life-hacking-growth-hustle-habits-of-the-successful-ninja blog posts were misleading, to say the least.
But as it turned out, forcing myself to sketch out what I thought the app would look like was actually a great idea. Not because my first attempt was perfect, and not because sketching it out meant the hard work was already done. Almost none of the original sketches were how the feature looked when I finished it. But by forcing myself to draw something, I forced my mind to imagine the feature and address the series of questions surrounding it:
- What does it actually do?
- How will it do it?
- How does it fit into the rest of the app?
- Do I actually need it?
This process was useful. It was exactly what I was missing the first time. Instead of jumping right in and coding up and incoherent mess, I was finally trying to design something.
Another helpful consequence was that it converted the series of electrical impulses in that squishy thing in my skull into something much more tangible. Once I had explored the idea on paper, I could sit down with people and show them what it looked like. Suddenly their squishy thing started producing the electrical impulses necessary to talk productively about the idea, and generate new and better versions of it.
My original prototype wasn’t all bad. One of the things I was reasonably happy with was the landing screen. While it has undergone some small design changes, including a new logo, it remains mostly as it did in the prototype.
After the landing screen I set my focus on the user’s home/profile screen.
In the prototype I had the user’s name and image on the top navigation bar, but the whole thing didn’t feel right. I wanted the user to feel like they had a deeper presence in the app. That eventually led to the profile screen, which became the place to go to check progress, change the learning language, see achievements, etc.
To personalise the profile screen both in terms of the user and the language they were learning, I did the following:
I made the first thing you see on the screen your lovely face. Seeing your own faces makes it a whole lot more personal.
I used a prominent colour from the respective country’s flag as the primary header colour. In the image, I’m learning German, so the header is black. Blue is used for French, yellow for Spanish, green for Esperanto, etc.
Using a cut-out of the skyline for the city most associated with the target language, I created a paper-tear effect between the top section (containing your progress) and the bottom navigation section. In the image, you can just about make out the skyline of Berlin separating the two halves.
I added the flag of the target language to emphasise that this is your German/Spanish/French/etc profile. You can tap the flag to change the language you’re learning, which seems like a pretty logical thing to expect.
I’m happy with how the profile now feels. It’s minimal enough and stays out of the way, but with a quick thumb swipe you get an immediate sense of “I’m currently learning German”. Maybe future social features will find a home here too, but I’ll probably need another expensive notebook before I know for sure.
Once a user logs in, the first screen shown is the onboarding screen. Here, a user can choose to browse the store for interesting courses or select a beginner course to get started right away.
The screen exists to make the sign up → start learning flow a little smoother, but also to promote the idea that you can browse the store and find different learning material, depending on your learning goals.
The onboarding screen is a recent addition. I wanted to build it because it felt too harsh to throw a user into a default course and expect them not to feel a bit rushed. The design changed quite a bit from the original sketch, but the same two options are still there.
Once a user selects a course, the lessons screen is shown for the respective course.
This sketch isn’t so different from the final design, but there’s a bunch of hidden things going on in the app. To keep the experience fun and immersive, there’s subtle animations as things happen. For example, when you return to this screen having completed a lesson, the padlock tilts and falls down off the screen before unlocking the lesson below it.
I’m also pleased to report that the awful cog icon didn’t make the final cut. Instead, a user can change their course by selecting Store in the top right corner.
Speaking of the store.
The concept of a store came quite recently. Until then it was called courses and looked pretty terrible, plus I wanted to move away from that wording. I think store better emphasises the idea that you can buy language learning material within Yakk.
Due to the success of the App Store and Google Play Store, the word store does a good job of capturing the intent of the feature. I want users to look around, find a course that suits their goals, and potentially buy it (if it isn’t free – Yakk will have a healthy amount of free content too).
So, with a course selected, the user sees the series of lessons they must work through. Selecting a lesson takes you to the conversation screen, which shows how the lesson is structured in terms of the conversations it contains.
Like lessons, the idea is to work through the conversations one by one. Each conversation builds on the last, gradually bringing you closer and closer to a real-life conversation about the particular subject.
The sketch was actually one of the first I did, long before I got to building the functionality. I played with a few ideas for representing progress, but ultimately settled with the tri-state track-based design. Having gone back and forth a number of times, I’m glad it turned out as minimal as it did. It feels just right.
Selecting a conversation, unsurprisingly, takes you to the conversation practice screen. I had quite a few designs for this one. It’s easily the most complex and important part of Yakk.
The sketch on the left shows the intro document. When you begin a conversation in Yakk, a short document is displayed to prepare you for the conversation ahead.
The design stayed pretty much the same as the sketch here, except for the flag. I wanted to keep the screen as minimal as possible, and since the profile already shows the learning language, it wasn’t necessary to repeat it for each part of the conversation.
Once you’ve read the intro document, tapping the Let’s Go button auto-scrolls it out of the way and the conversation begins. You can pull it back down at any point during the conversation, in case you forget anything.
Taking the place of the flag is the speaker icon. When the conversation part first drops onto the screen, you hear it as well as see it. Tapping on the speaker icon repeats the audio.
While the conversation is in progress, you can tap any individual part to get help. You’ll be shown not just the answer, but also an explanation of why the answer is structured the way it is. This is Yakk’s Just In Time learning mechanism. It’s there to help you learn the things you need right now, in order to complete the conversation successfully.
There’s a bunch more I could talk about – the animations, the answer button interactions, the retry functionality, scoring, but there’s a serious risk I’ll crash your web browser with this much text, and I haven’t eaten in days.
Outside of the course → lesson → conversation flow, Yakk also has levels, day streaks and achievements. While some language learning apps rely far too heavily on gamification, I did want Yakk to have some secondary aspects of progress separate from progressing through the content itself.
Behind the scenes, there’s even more going on. From the API that powers the app’s behaviour to the content production system, and a wonderful hack for creating near-perfect audio content for Esperanto. But you probably need to sleep, and go see your family, so I’ll save those subjects for a future post.
I’m really pleased to finally have the main learning functionality in place. My focus is now shifting into content production. The initial Yakk release will feature only Esperanto content, but more languages will follow soon.