Making Educational Platform: First Application

In the previous article we talked about the first design concept, landing page and logo for our Learzing educational platform, this time we will talk about the creation of the first application.

After completing the course “Technology Enterpreneurship” from Stanford University (read more about it in the first article), we formed a team, and one of the members was an English teacher. We thought, “Why don’t we make the first application for learning English?” Besides, it is one of the most popular trends in online education.

To make an application which people need, we should not start with our own ideas, but with the needs of people. On the one hand, you can do something that you think will be interesting to people. On the other hand, you can do something that will satisfy a specific need or solve a specific problem. Mastering English is what people really need. There’s a huge gap between your own point of view about customers’ needs and real customers’ needs.

We decided to ask the English teacher from our team what students need when they learn English. She told us about several useful niche topics and we decided that we would start with idioms. Often, watching a movie, reading a book or listening to a song in English (as well as reading anything on the Internet in English) we’re facing unknown expressions. Traditional English courses and textbooks don’t focus on idioms. But it’s a big and important part of English language, using idioms is very common.

That’s how we got the idea for the first application. What’s the common way of learning idioms? It’s a quiz. For example, a common text might have a passage like this :

“I went scuba-diving for the first time last summer. I thought it was going to be a …, but I soon realized that it was a lot more difficult than I’d expected.

  1. Cup of tea.
  2. Piece of cake.
  3. Can of Coke.
  4. Mug of beer.

Students try to select the correct answer depending on the context. By the way, if you’re not a native speaker, try to guess the correct answers to that and other questions below without using a search engines, dictionaries or other aides. You can find the correct answers at the end of this article.

Traditional educational methods are quite boring. What can we add to make them more interesting? Interaction, game elements and socialization — it’s the recipe for an interesting educational application. Read more about these components in our first article.

One of the ideas which uses game and social components came from our English teacher — the technique for quizzes which teachers use in a classroom. Students have game pieces, they select an answer and bet a game piece on it. A student who guessed the right answer, takes all the game pieces. If we use this technique for an online game, it’ll involve multiple players which makes the game more interesting.

The interactive stimulation would mimic quiz mechanics similar to “Who Wants to Be a Millionaire?” game, so we decided to create something similar for learning idioms. Next we made the first concept for a mobile application:

Question, 4 answers, time limit and the results below. We can make it more interesting and add pictures for idioms. It’s a visual association which helps to memorize an idiom better, also pictures will increase attractiveness of the application.

Illustrations for idioms

Unfortunately, at the time we didn’t have an illustrator in our team, so we decided to use Fiverr (different services for $5) to find an illustrator and a good style for picturing idioms.

We got a few pictures. For example, this is a man who is always asking stupid questions:

This is an illustration for the fourth answer (this answer is incorrect):

An eager beaver

  1. is someone who is hungry;
  2. is someone who works hard, busily and with enthusiasm;
  3. is an animal with dark fur;
  4. is someone who is always asking stupid questions.

And here is the father who never forgets to buy some sweets for his kids on red letter days:

As you might guess, the illustrator is from of India :)

Question:

A sugar daddy

  1. is a father who never forgets to buy some sweets for his kids on red letter days;
  2. is a rich, elderly man who favours a young woman and in exchange for her companionship he give her money or gifts;
  3. is a person who suffers from diabetes;
  4. is anyone who has unhealthy eating habits and favours all kinds of pastry and sweets.

And this is a person who hates shopping:

Question:

An awkward customer

  1. is someone who is always dropping things when he’s shopping;
  2. is a customer who fails to pay his bills on time;
  3. is an unpleasant, difficult or dangerous person to deal with;
  4. is a person who hates shopping.

And the last example — a carpenter who specializes in making armchairs:

An armchair expert

  1. is a person who offers advice on something he knows little about;
  2. works in a furniture shop;
  3. is a carpenter who specializes in making armchairs;
  4. is someone who knows a lot about armchairs.

The first prototype

After experimenting with illustrations, we decided to participate in a hackathon. After two days of work we made a prototype application for learning idioms.

During the learning process the player gets points, achievements and awards from partners.

A short video with a prototype:

A little bit more information about prototype development at hackathon from our team members’ point of view.

Prototype development at hackathon: experience of our programmer

Development of a prototype from scratch at hackathon is a kind of art. The prototype is an implemented idea and a validation of this idea. You’re validating an idea during development and testing. As you begin to implement an idea you understand your idea better, you clarify it, you change it, and finally you either make it real or refuse it.

As time is limited (usually 36–48 hours) there’s a common practice to use different “hacks”, for example in our case we used following hacks:

  • One background image instead of proper HTML layout. All HTML elements are placed over this background picture using absolute coordinates.
  • HTML pages generated from Adobe Muse, source code of these pages is horrible :)
  • Backend implemented on frontend. We don’t write server code, we create a test “database” in a browser.
  • We create visual objects not from elementary reusable sprites, but from big non-reusable sprites which use a lot of memory.

As a result, the source code from the hackathon prototype is trash, we just threw it away. But people who see your prototype know nothing about source code, they think that your prototype is quite good and after a couple of days you can make the final product. But you can’t do it. You can’t make the final product based on a hackathon prototype because the code is very bad, full of hacks and temporary things which you would never use for a real product. You need to rewrite the code from scratch. But it’s much easier when you already know how to write it properly after a hackathon.

Prototype development at hackathon: tips from our designer/illustrator

I was prepared for the hackathon, I had basic interface elements, an icon set and flowcharts for my own application in Adobe Muse.

When you’re stressed for 30 hours at a hackathon it’s very hard to see the weaknesses in your work. So be prepared. Always design a prototype of your application in a vector graphics editor, it’s easier to adapt for the final version. Always use solutions for user experience which are easy to use and understand, there’s no need to invent something new now, you can do it later. Choose solutions which show full functionality of your prototype.

You can use this set of icons: http://fortawesome.github.io/Font-Awesome/icons/ . Here’s another tip: use classical six-column layout for interface elements, it will help to structure the elements of the web application. Use Bootstrap framework for this. If you do not have time to learn about Bootstrap, make your prototype with Adobe Muse.

“Pivot”

After the hackathon we probably would have continued to develop this application, but we still thought that this approach wasn’t interesting enough. It was still much similar to traditional learning methods. We then discovered QuizUp app, new at the time, where this approach was perfectly implemented. Question, 4 answers, playing against an online opponent — it was very similar to our idea.

There are educational topics in QuizUp: math, grammar, spelling, etc. There is a “Finish the saying” topic which is very close to idioms.

QuizUp has a quite simple idea and inspiring success story. The app was launched November 7, 2013. After a couple of weeks the app reached 1.5 million users and Plain Vanilla Games received $2 million investment. A month later it reached 5 million users and received a $22 million investment. After reaching 10 million users on iPhone, an iPad version was launched. The Android version of the app reached 1 million users within a week.

Later another company launched an app about idioms in App Store — Idiom Stories, which was not just similar to our idea, but it was built and released.

Well, if we think about it in terms of the lean startup approach (read more about this business method in our second article), we have validated our idea, collected data, and on the basis of this data we decided to move in another direction. Pivoting is a essential move for a startup.

Correct answers

  1. I went scuba-diving for the first time last summer. I thought it was going to be a piece of cake, but I soon realized that it was a lot more difficult than I’d expected.
  2. An eager beaver is someone who works hard, busily and with enthusiasm.
  3. A sugar daddy is a rich, elderly man who favours a young woman financially in return for special attentions.
  4. An awkward customer is an unpleasant, difficult or dangerous person to deal with.
  5. An armchair expert is a person who offers advice on something he knows little about.
  6. The idiom from the prototype screenshot: Most of my colleagues go for a drink after work on Fridays but I do not normally go. Going on a pub crawl is not my cup of tea.
  7. The saying from QuizUp app screenshot: It is the first step that is difficult.
  8. The idiom from Idiom Stories app screenshot: He’s feeling better but it was “touch and go” for awhile because he was unsure if he would ever get better.
This article was originally posted on Learzing blog on August 27, 2014