In the previous article, we talked about the first design concepts, landing page and logo for our Learzing project , in this we will talk about creating the first application.

After taking the Technology Enterpreneurship course from Stanford University (a little more about it is in the first article ), our English teacher was in our team. Why not make the first English learning app? It is also one of the most popular topics in online education.

In order to make a truly necessary application, you need to start not with your own ideas, but with the needs of users. That is, you can do something that will be interesting to users based on your opinion and the opinion of your team, or you can do something that will satisfy a specific need or solve a specific problem. Between the representations of developers and the needs of customers, as a rule, there is a gap. This is precisely the common cause of failure.

Knowing this, we decided to ask the teacher what the students needed when learning English. After going over several topics, we settled on the study of idioms and slang. Often, watching a movie, reading a book or listening to a song in English (not to mention English-speaking forums and blogs), we are faced not only with individual unknown words, but with whole expressions whose meanings we do not understand. Often these expressions are informal, so you may not encounter many of them in the classical study of English. At the same time, idioms and slang occupy a significant part of the language and their knowledge allows you to get closer to the English that is spoken in reality.

This is how we got the idea for the first application. How do idioms usually be studied? In the form of test questions. For instance:

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.

You need to choose the right answer in a situation in which an idiom is used. For those who played the English version of Duke Nukem 3D (or Duke Nukem Forever), choosing the right answer will not be difficult :) By the way, try to guess the correct answers to this and other questions below without using search engines, dictionaries and other things. At the end of the article are the correct answers, with Russian counterparts.

Usually educational methods are rather boring. What can be added to make it more interesting? Interactivity, gaming component and sociality - this is the recipe for an interesting application from our previous arguments .

One of the ideas with a game and social component from our English teacher is a game technique for test questions, which is used in the classroom. Students have game chips, each puts a chip on the correct answer, in his opinion. A student who has guessed the correct option takes the chips of those who have not guessed. If you shift this mechanics to an online game, we get multiplayer, which makes the game even more interesting.

The 4-choice question is reminiscent of the game “Who Wants to Be a Millionaire?”, So we decided to do something similar to study idioms. And we got the following first concept for a mobile application:



Question, 4 possible answers, time limit for an answer and a panel with the results below. You can make it more interesting and add pictures to the text. If the idioms are also drawn, the user will be able to better remember the correct idiom. In addition to words, there will also be a visual association, plus pictures will increase the attractiveness of the application.

Illustrations for idioms

Unfortunately, at that time our team did not have an illustrator, we decided to use the Fiverr service ($ 5 service exchange) to try to find an illustrator and a suitable style for rendering idioms.

We got some illustrations. For example, this would look like a person always asking stupid questions:



This is an illustration for the fourth option to answer the question (by the way, this option 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 a father who never forgets to buy sweets for his children on holidays:



As you might guess, an illustrator from India :) Question itself:

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 favors a young woman financially in return for special attentions
3. is a person who suffers from diabetes
4. is anyone who has unhealthy eating habits and favors all kinds of pastry and sweets

And here 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 is a carpenter specializing in the manufacture of 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

First prototype

After experimenting with illustrations, we decided to participate in a hackathon, and the result of two days of work was a prototype application for studying idioms that fit into the concept of our platform.




The user during the study receives points, achievements and awards from partners.




Short video with the prototype:



A little more about the "kitchen" development at the hackathon from the point of view of our team members.

Hackathon Prototype Development: Programmer Experience

Hackathon development from scratch is a separate art. The result of the hackathon is a proven idea. The idea is tested both during the creation of the prototype and after, when testing it. As you work, you begin to better understand your idea, specify, make it closer to reality or abandon it. All you have to do at the hackathon is to see your idea in action, to understand it much better.

Since there is a high probability that the current version of the idea will be discarded, and the time for work is extremely limited (usually 36-48 hours), all kinds of hacks are used. Here are examples of hacks from our practice:

• A picture instead of a whole page of a site. The entire dynamic component of the page is represented by HTML elements placed in absolute coordinates over the background image.
  
  
• HTML pages auto-generated from Adobe Muse, from the code of which blood flows from the eyes :)
  
  
• The backend implemented on the front end. This is when we create a test "database" directly in the browser, use it and do not write server code.
  
  
• Instead of dividing visual objects into elementary reusable sprites, we sculpt objects with large, poorly reused sprites that consume a lot of memory.

As a result, almost all code made at the hackathon can be thrown away. Another feature of the prototype is that it is usually technically simple, and the team may not have enough technical (however, like many others) skills to realize the final product. But throwing away code is nothing wrong. As you know, writing code from scratch, having experience developing a similar solution and much more specific product requirements, is much simpler.

Here we are faced with the classic problem. People see your prototype from the hackathon and think that here, a little more to finish and it will be possible to release a release. And if you continue to develop a product based on the prototype, then ... well, you probably know for yourself;) So we threw away the code of our first application. From it there were only commits in the repository.

Hackathon Prototype Development: Designer's Illustrator Tips

I came to the hackathon with the prepared material: with basic interface elements, a set of icons, and with flowcharts of my own application in Adobe Muse.

For 30 hours under stress it is very difficult to see the flaws. Therefore, always design a prototype application in a vector editor. Curves can always be further developed and applied to the final version. Always use an easy-to-understand solution - this means that you do not need to invent a bicycle in the user experience, leave this work for later. Take on solutions that obviously show the full functionality of your prototype.

Use the ready-made icon set: http://fortawesome.github.io/Font-Awesome/icons/. During the design process, it is recommended to use the classic six-column layout for arranging interface objects - this will help to structure the elements of the web application in a structured way. For such purposes, the Bootstrap framework is best suited . If you don’t have time to deal with Bootstrap, create a prototype using one of the most convenient tools - Adobe Muse .

Pivot

After the hackathon, we would probably continue to work in this direction, but this approach still seemed to us not interesting enough. It was still very similar to the usual teaching methods. And once we learned about the new (at that time) QuizUp application, in which a similar approach was perfectly implemented. Question, 4 possible answers, play against an online opponent - it was very similar to our idea.

QuizUp already has educational topics: mathematics, grammar, spelling, etc., including Finish the Saying, which can be considered learning common language, which is already very close to idioms.



Take a look at QuizUp’s fast-paced success story. The application was launched on November 7, 2013. In a couple of weeks, the application has gained 1.5 million usersand the development company Plain Vanilla Games received $ 2 million in investment. A month later, already 5 million users and another 22 million dollars of investment . After reaching the bar of 10 million users , an iPad version was launched on the iPhone, and after launching the Android version, the application gained 1 million users in just a week. Inspirational, right? And as often happens, the idea is quite simple.

A little later, the Idiom Stories application appeared in the App Store, which was not just similar to our idea, but almost completely implemented it, specifically for studying English idioms. But it would seem - not the most obvious idea. A screenshot from the application - a question and 3 answers.



Well, speaking in terms of lean startup (more about this technique in our second article ), we can assume that we tested our idea, and based on the data we received, decided to move in another direction. The buzzword is pivot , a common situation for a startup. Well, if simpler and in Russian, then the first pancake is lumpy (also an idiom, by the way).

In which direction did we decide to move further with our application? Read in our next article.

Poll

We invite all hawkers to help us create an application for learning English idioms - spend a few minutes and fill out a short survey that will affect our development.

As we mentioned above, we would like to first of all build on the wishes and needs of users (that is, you), and only then on our own ideas. Everyone who completed the survey will receive early access to our application.

Right 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.
   The Russian analogue is simpler than simple, it’s simpler like a steamed turnip, like two fingers on asphalt :)
   
   
2. An eager beaver is someone who works hard, busily and with enthusiasm.
   The Russian counterpart is a workaholic, hard worker, enthusiast. Another option is to "work like Papa Carlo."
   
   
3. A sugar daddy is a rich, elderly man who favors a young woman financially in return for special attentions.
   The Russian counterpart is Papic.
   
   
4. An awkward customer is an unpleasant, difficult or dangerous person to deal with.
   Difficult or dangerous person (also: complex, unpleasant, absurd, nasty).
   
   
5. An armchair expert is a person who offers advice on something he knows little about.
   The Russian counterpart is a couch analyst / theoretician.
   
   
6. Idiom from the screenshot of the prototype: Most of my colleagues go for a drink after work on Fridays but I don't normally go. Going on a pub crawl is not my cup of tea .
   “Not my cup of tea” in Russian is not mine, it is not for me, not in my taste.
   
   
7. Saying from the screenshot QuizUp: It is the first step that is difficult .
   In Russian, you can say: the first step is the most difficult.
   
   
8. Idiom from the screenshot Idiom Stories: He's feeling better but it was " touch and go " for awhile because he was unsure if he would ever get better.
   Touch and go - critical / dangerous situation.

All articles in the series

1. Startup step by step: the future of online education
2. Startup step by step: team and mentors
3. Startup step by step: the first business model
4. How we did the educational platform: first design, landing page and logo
5. How we did the educational platform: first application
6. Making an HTML5 Quest: Using the MVC Pattern in Construct 2
7. Making an HTML5 quest: creating a character and basic animation