We got on a train going in the wrong direction. Our journey took 6 hours instead of 60 minutes but it was one of the best mistakes my wife and I made during our year of travelling because we had the pleasure of watching the magical wonderland of a Japanese autumn roll past our window. It was a pure visual joy of nature and colour from beginning to end.

Beyond the autumn wonderland, we fell in love with everything Japan had to offer, including the food, the people, the cities, the countryside, the culture and their language even though I couldn’t understand a word people were saying. I did learn a few words but I now want to at least start learning the basics for our next visit, so I searched for a good way to start and found a great app (web and mobile) called Memrise. I also discovered their website would make for a perfect Learn from Great Design case study.

Signing Up

Specifically, joining Memrise is a fantastic example of great design. As I’ve found out from using it, the app is great to use too but this case study is focused on an area you can learn from and use in any website requiring people to sign up.

First, have a look at the video I recorded of myself signing up to see it in action yourself so you don’t have to sign up. See if you can see what makes it so great:

As you can see, the process is very simple and only consists of entering a username, email address and password, then selecting a language to learn and the level you want to start at, beginner, intermediate or advanced. That’s it and you’re ready to start learning. The time between deciding you want to sign up and actually using the app is very short.

As someone who is eager to get started, I really appreciated it. Most people won’t even notice this because great design is invisible. You certainly don’t want to risk making people wait long until they can use what they are signing up for. Losing people at this stage would be pretty damning because just by starting the process, they have actively shown interest in joining.

Focus, Focus, Focus

The number one thing you want people to do at this stage is sign up to at least the free account and everything has to be designed with that in mind. If the product is truly great, it’s your obligation as a designer is to get people signed up.

The whole process is a series of full screen steps separated by smooth transitions, removing disruptive reloading of pages. As you can see in the screenshot above, the only choices to advance are the “Continue with a Free account” or “Go Premium” buttons. This is no accident. Reducing the number of actions on the page increases the likelihood of people completing the desired process, in this case, becoming a member. They can always navigate back to the Memrise homepage with their browser if they need to. This is a common (and successful) practice used by the likes of Amazon.

When working on a previous client project, we discovered that splitting a registration form into multiple steps improved the conversion rate because it’s easier for people to digest than showing everything on the screen at once and it allows them to focus on each section reducing the chance they will miss some information.

Premium Benefits

In the sign up process, Memrise briefly present the benefits of their premium account. Of course it makes sense for them to do that as that’s how they make money and stay in business but it also is useful for you to know because it will help you too. Like I said before, it’s your design obligation to use design to sell. Your clients and bosses will love you and as long as their service is great, their users will also be happy.

Even if you only join with a free account, you’re aware of the extra benefits the paid version will give you for future reference. This approach lets everyone know about it and thanks to the benefits of focus as described earlier, they can’t miss it.

People on the Memrise Premium account learn more than 5x the amount of words per week than those on the free plan. That’s a very compelling reason right there. You want to shout that from the rooftops because it shows just how well it works and you know just how much it will help people.

Animations

Thought bubbles containing quotes from a “Memonist” (one of the highest ranks you can achieve when learning but I had to search to find that) and the founder slide up into place. The animation serves to catch your attention because testimonials are a powerful way to demonstrate the quality of a product.

Animation can assist marketing efforts like Memrise have done but it’s also important to realise they aren’t intrusive. The thought bubbles slowly slide up like balloons as if they were thoughts appearing from their heads and they both last less than 3 seconds together. The simple animations elegantly do the job of catching your attention without being annoying.

The Visual Experience

Notice how much of a visual experience it is. The use of flags to choose a language, the three big sections to click on to select your level, the chart showing the benefit of paying for an account, the elegant use of animations as well as the great use of colour hierarchy.

The combination of this and the full-screen multi-step approach make it far more interesting to what is not exactly the most exciting task in the world.

Before Joining

Of course, there’s another step prior to signing up and that’s the homepage. Do Memrise do a good enough job of making people want to sign up at this stage?

“We make learning languages and vocab so full of joy and life, you’ll laugh out loud.”

This is actually true from my short experience of learning some basic Japanese with Memrise. It speaks to a pain many people have when learning a new language like good copywriting on a language service’s landing page should. It can be hard and frustrating to learn a new language but one of their core ingredients in their “recipe for effortless learning” is fun and I’m definitely enjoying it.

Simplicity

As we’ve seen, signing up is so simple so it would be a good idea for Memrise to let people know about this before they hit the sign up buttons. Simple text such as “It takes less than a minute!” underneath the button would certainly help.

Here’s a mockup of how that would look:

Tell me why!

I don’t know why they don’t make more noise about the science behind how Memrise helps you learn better. They have a page dedicated to the science but a link is buried in small text in the footer. There is some great content here that should be in key areas of the site. Only a tiny percent of visitors will read this page, so it would be smart to include some of this on the homepage with a link to to the science page to read more.

The science behind the way the Memrise team have designed their app provides concrete studies showing why people will learn better (as it says on their homepage). It would be more effective to demonstrate why people will learn better rather than just saying it.

The six icons under the “Memrise helps you learn better” headline are valid reasons why that is the case (with the possible exceptions of “Learn anything” and “Teachers love Memrise”) but there are only a few words about the science, which deserves it’s own section as it is a unique selling point.

Opportunity

As we see from what we’ve learnt from Memrise, the sign up process is an opportunity to inform visitors of the benefits of a product to reinforce their trust in something they haven’t used yet. It’s also an opportunity to get people to upgrade their account with compelling reasons that will really help them.

While Memrise could certainly do a better job of encouraging people to sign up, the sign up flow itself is a perfect example of great design.

Memrise are specialists in helping people remember things and I certainly won’t forget their great design.