In the previous article we talked about the first design concepts, the landing page and the logo for our Learzing project, this one will tell you about the creation of the first application.

After completing the Technology Enterpreneurship course from Stanford University (a little more about it - in the first article ), our team was an English teacher. Why not make the first application to learn English? In addition, it is 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, and you can do something that will satisfy a specific need or solve a specific problem. As a rule, there is a gulf between the ideas of developers and the needs of clients. This is often the cause of failure.
')
Knowing this, we decided to ask the teacher about what students need when learning English. After going through a few topics, we stopped at 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 come across not just individual unknown words, but whole expressions, the meanings of which we don’t understand. Often these expressions are informal, so many of them cannot be encountered in classical 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 spoken in reality.

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

I went scuba diving for the first time last summer. I thought 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 correct answer in a situation in which the idiom is used. For those who played the English version of Duke Nukem 3D (or Duke Nukem Forever), choosing the correct answer is not difficult :) By the way, try to guess the correct answers to this and other questions below without using search engines, dictionaries and so on. At the end of the article - the correct answers, with Russian counterparts.

Usually, educational techniques are pretty boring. What can be added to make it more interesting? Interactive, game 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 teacher of English is a game technique for test questions, which is used in the classroom. Students have play pieces, each puts a piece on the correct, in his opinion, answer. A student who has guessed the correct option takes the chips of those who did not guess. If we shift this mechanics to an online game, we get multiplayer, which makes the game more interesting.

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



Question, 4 answer choices, time limit for the answer and the 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 can better remember the correct idiom. In addition to the words, there will also be a visual association, plus pictures will increase the attractiveness of the application.

Illustrations for idioms

Unfortunately, at that time there was no illustrator in our team, we decided to use Fiverr service ($ 5 service exchange) to try to find an illustrator and a suitable style for drawing idioms.

We received several illustrations. For example, this is how a person could always look like, always asking stupid questions:



This is an illustration for the fourth answer to the question (by the way, this option is incorrect):

An eager beaver

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

And this is the father who never forgets to buy sweets for his children on holidays:



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

A sugar daddy

1. for kids on red letter days
2. is a rich man
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 how a person who hates shopping looks like:



Question:

An awkward customer

1. he who is always dropping things when shopping shopping
2. is his customer 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 chairs:



An armchair expert

1. 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 the hackathon and the result of two days work was a prototype of an application for studying idioms that fit into the concept of our platform.




The user in the course of the study receives points, achievements and awards from partners.




Short video with the work of the prototype:



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

Development of a prototype on the hackathon: programmer's experience

Development on the hackathon from scratch is a separate art. The result of the hackathon is a proven idea. The idea is tested both during prototyping and after it is tested. As you work, you begin to better understand your idea, refine it, make it closer to reality or abandon it. All you need to do on 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 sorts of hacks are used. Here are examples of hacks from our practice:

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

As a result, almost all the code made on 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 (as well as many other) skills to implement the final product. But there's nothing wrong with throwing out code. As you know, writing code from scratch, having experience developing a similar solution and much more specific product requirements, is much easier.

Here we have a classic problem. People see your prototype from the hackathon and they think that there is a little more time to complete 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 yourself;) So we threw away the code of our first application. All that remains are commits in the repository.

Development of a prototype on the hackathon: tips from the illustrator

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.

Within 30 hours in a stressful state it is very difficult to see shortcomings. Therefore, always design a prototype of the application in a vector editor. Curves can always be further refined 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 user experience, leave this work for later. Take decisions that obviously show the full functionality of your prototype.

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

"Pivot"

After the hackathon, we probably would have continued 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 this approach was perfectly implemented. Question, 4 answer choices, playing against an online opponent - it was very similar to our idea.

QuizUp already has educational topics: mathematics, grammar, spelling, etc., including the Finish the Saying topic, which can be considered as teaching common expressions that are very close to idioms.



Look at the rapid success story of QuizUp. The application was launched on November 7, 2013. After a couple of weeks, the application scored 1.5 million users and the software company Plain Vanilla Games received $ 2 million in investments. A month later, already 5 million users and another $ 22 million investment . After reaching the bar of 10 million users, an iPad version was launched on the iPhone, and after the Android version was launched , the application gained 1 million users in just a week. Inspiring, 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 fully implemented it, specifically for studying English idioms. And it would seem - not the most obvious idea. Screenshot from the app - a question and 3 answer choices.



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

In exactly which direction we decided to continue to move with our application? Read in our next article.

Poll

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

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

Right answers

1. I went scuba diving for the first time last summer. It is a bit more difficult than I'd expected.
   Russian analog is easier than simple, simpler than steamed turnip, like two fingers on asphalt :)
   
   
2. An eager beaver is someone who works hard, busily and with enthusiasm.
   Russian equivalent - a workaholic, a hard worker, an enthusiast. Another option - "work like Carlo's dad."
   
   
3. He is a woman who has been a young woman.
   Russian analogue - "papik."
   
   
4. An awkward customer is an unpleasant, difficult or dangerous person to deal with.
   Difficult or dangerous person (also: difficult, 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 / theorist.
   
   
6. Prototype Screenshot Idiom: I don’t normally go. Going on a pub crawl
   "Not my cup of tea" in Russian is not mine, it is not for me, not to my taste.
   
   
7. A saying from QuizUp screenshot: It is difficult .
   In Russian, you can say: the first step is the most difficult.
   
   
8. Idiom Stories from the Screenshot: I’m Feeling More Awesome.
   Touch and go - critical / dangerous situation.

All articles of 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: first business model
4. How we made the educational platform: first design, landing page and logo
5. How we made the educational platform: the 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