Pull to refresh
0
Learzing
Просвещая, развлекай!

Как мы делали образовательную платформу: первое приложение

Reading time 8 min
Views 11K


В предыдущей статье мы рассказали о первых дизайн-концептах, landing page и логотипе для нашего проекта Learzing, в этой расскажем о создании первого приложения.

После прохождения курса Technology Enterpreneurship от Стэнфордского университета (чуть подробнее о нем — в первой статье) в нашей команде оказалась учительница английского языка. Почему бы не сделать первое приложение для изучения английского? К тому же это одна из самых популярных тем в онлайн-образовании.

Для того, чтобы сделать по-настоящему нужное приложение, начинать нужно не с собственных представлений, а с потребностей пользователей. То есть можно сделать то, что будет интересно пользователям, исходя из вашего мнения и мнения вашей команды, а можно сделать то, что удовлетворит конкретную потребность или решит конкретную проблему. Между представлениями разработчиков и потребностями клиентов, как правило, лежит пропасть. Именно это и является частой причиной неудач.

Зная это, мы решили спросить у учительницы о том, что нужно студентам при изучении английского языка. Перебрав несколько тем, мы остановились на изучении идиом и сленга. Часто, смотря фильм, читая книгу или слушая песню на английском (уже не говоря об англоязычных форумах и блогах), мы сталкиваемся не просто с отдельными неизвестными словами, а с целыми выражениями, значения которых не понимаем. Зачастую эти выражения неформальные, поэтому с многими из них при классическом изучении английского можно и не столкнуться. При этом идиомы и сленг занимают значительную часть языка и их знание позволяет приблизиться к тому английскому, на котором говорят в реальности.

Вот так мы получили идею для первого приложения. Как же обычно изучают идиомы? В виде тестовых вопросов. Например:

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.

Нужно выбрать правильный вариант ответа в ситуации, в которой используется идиома. Для тех, кто играл в английскую версию Duke Nukem 3D (или Duke Nukem Forever), выбрать правильный ответ не составит труда :) Кстати, попробуйте угадать правильные ответы на этот и другие вопросы ниже без использования поисковых систем, словарей и прочего. В конце статьи — правильные ответы, с русскими аналогами.

Обычно образовательные методики довольно скучные. Что можно добавить, чтобы сделать интереснее? Интерактив, игровую составляющую и социальность — таков рецепт интересного приложения из наших предыдущих рассуждений.

Одна из идей с игровой и социальной составляющей от нашей учительницы английского — игровая методика для тестовых вопросов, которая применяется в классе. У студентов есть игровые фишки, каждый ставит фишку на правильный, по его мнению, вариант ответа. Студент, угадавший правильный вариант, забирает фишки тех, кто не угадал. Если переложить эту механику на онлайн-игру, получаем мультиплеер, который делает игру еще интереснее.

Вопрос с 4 вариантами ответов напоминает игру «Кто хочет стать миллионером?», поэтому мы решили сделать нечто подобное для изучения идиом. И получили следующую первую концепцию для мобильного приложения:



Вопрос, 4 варианта ответа, ограничение времени на ответ и панель с результатами внизу. Можно сделать интереснее и добавить к тексту картинки. Если идиомы будут еще и нарисованы, пользователь сможет лучше запомнить правильную идиому. Помимо слов будет еще и визуальная ассоциация, плюс картинки повысят привлекательность приложения.

Иллюстрации для идиом

К сожалению, на тот момент в нашей команде не было иллюстратора, мы решили воспользоваться сервисом Fiverr (биржа услуг за $5), чтобы попробовать найти иллюстратора и подходящий стиль для отрисовки идиом.

Мы получили несколько иллюстраций. Например, вот так бы мог выглядеть человек, всегда задающий глупые вопросы:



Это иллюстрация для четвертого варианта ответа на вопрос (кстати, этот вариант неправильный):

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

А вот это отец, который никогда не забывает по праздникам купить конфет своим детям:



Как можно догадаться, иллюстратор из Индии :) Сам вопрос:

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

А вот так выглядит человек, который ненавидит шопинг:



Вопрос:

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

И последний пример — плотник, специализирующийся на изготовлении кресел:



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

Первый прототип

После экспериментов с иллюстрациями мы решили поучаствовать в хакатоне и результатом двухдневной работы стал прототип приложения для изучения идиом, который вписывался в концепцию нашей платформы.




Пользователь по ходу изучения получает очки, достижения и награды от партнеров.




Короткое видео с работой прототипа:



Чуть подробнее о «кухне» разработки на хакатоне с точки зрения участников нашей команды.

Разработка прототипа на хакатоне: опыт программиста

Разработка на хакатоне с нуля — это отдельное искусство. Результатом хакатона является проверенная идея. Идея проверяется и во время создания прототипа, и после, при его тестировании. По мере работы вы начинаете лучше понимать свою идею, уточняете, делаете ее ближе к реальности или отказываетесь от нее. Все, что вам нужно сделать на хакатоне, — это увидеть вашу идею в действии, понять ее намного лучше.

Так как есть высокая вероятность, что текущий вариант идеи будет отброшен, а время для работы крайне ограничено (как правило, 36-48 часов), то в ход идут всевозможные хаки. Вот примеры хаков из нашей практики:

  • Картинка вместо целой страницы сайта. Вся динамическая составляющая страницы представлена HTML-элементами, размещенными по абсолютным координатам поверх фона-картинки.

  • HTML-страницы, автосгенерированные из Adobe Muse, от кода которых течет кровь из глаз :)

  • Бэкенд, реализованный на фронтенде. Это когда мы создаем тестовую «базу данных» прямо в браузере, используем ее и не пишем серверный код.

  • Вместо разбиения визуальных объектов на элементарные переиспользуемые спрайты, лепим объекты большими, плохо переиспользуемыми спрайтами, сильно расходующими память.

В результате практически весь код, сделанный на хакатоне, можно выбрасывать. Еще одна особенность прототипа в том, что он обычно технически прост, и у команды может не хватить технических (впрочем, как и многих других) умений, чтобы реализовать окончательный продукт. Но в выбрасывании кода нет ничего плохого. Как известно, писать код с нуля, имея опыт разработки похожего решения и гораздо более конкретные требования к продукту, намного проще.

Здесь же нас подстерегает классическая проблема. Люди видят ваш протип с хакатона и думают, что вот, еще немного доделать и можно будет выпускать релиз. И если вы продолжаете разрабатывать продукт на базе прототипа, то… ну вы наверное сами знаете ;) Так мы и выбросили код нашего первого приложения. От него остались только коммиты в репозитории.

Разработка прототипа на хакатоне: советы дизайнера-иллюстратора

Я пришел на хакатон с подготовленным материалом: с базовыми элементами интерфейса, набором иконок и с блок-схемами собственного приложения в Adobe Muse.

В течение 30 часов в стрессовом состоянии очень трудно увидеть недостатки. Поэтому всегда проектируйте прототип приложения в векторном редакторе. Кривые можно всегда в дальнейшем дорабатывать и применить к финальной версии. Всегда используйте доступное для понимания решение — это означает, что не нужно придумывать велосипед в user experience, оставьте эту работу на потом. Беритесь за решения, которые очевидно показывают полный функционал вашего прототипа.

Воспользуйтесь готовым набором иконок: http://fortawesome.github.io/Font-Awesome/icons/. В процессе проектирования для расстановки объектов интерфейса рекомендуется использовать классическую шестиколонную верстку — это поможет структурированно распределять элементы веб-приложения. Для таких целей лучше всего подойдет фреймворк Bootstrap. Если нет времени разбираться с Bootstrap, создавайте прототип на одном из самых удобных инструментов — Adobe Muse.

«Пивот»

После хакатона мы бы, наверное, продолжили работать в этом направлении, но такой подход нам все еще казался недостаточно интересным. Это все еще было сильно похоже на обычные обучающие методики. А однажды мы узнали о новом (на тот момент) приложении QuizUp, в котором подобный подход был отлично реализован. Вопрос, 4 варианта ответа, играешь против онлайн-соперника — это было очень похоже на нашу идею.

Уже сейчас в QuizUp есть образовательные темы: математика, грамматика, орфография и т. д., в том числе уже сейчас есть тема Finish the Saying, которую можно считать обучением расхожим выражениям, что уже очень близко к идиомам.



Посмотрите на стремительную историю успеха QuizUp. Приложение было запущено 7 ноября 2013 года. Уже через пару недель приложение набрало 1,5 миллиона пользователей и компания-разработчик Plain Vanilla Games получила 2 миллиона долларов инвестиций. Через месяц уже 5 миллионов пользователей и еще 22 миллиона долларов инвестиций. После достижения планки в 10 миллионов пользователей на iPhone была запущена версия под iPad, а после запуска версии под Android приложение набрало 1 миллион пользователей всего за неделю. Вдохновляюще, правда? И как часто бывает, идея совсем несложная.

Чуть позже в App Store появилось приложение Idiom Stories, которое было не просто похоже на нашу задумку, а почти полностью ее реализовывало, именно для изучения английских идиом. А казалось бы — не самая очевидная идея. Скриншот из приложения — вопрос и 3 варианта ответа.



Что ж, если говорить в терминах lean startup (подробнее об этой методике — в нашей второй статье), можно считать, что мы проверили нашу идею, и исходя из полученных данных, решили двигаться в другом направлении. Модное слово — пивот, обычная ситуация для стартапа. Ну а если попроще и по-русски, то первый блин комом (тоже идиома, кстати).

В каком именно направлении мы решили дальше двигаться с нашим приложением? Читайте в нашей следующей статье.

Опрос

Приглашаем всех хабражителей помочь нам в создании приложения для изучения английских идиом — потратить несколько минут и заполнить небольшой опрос, который повлияет на нашу разработку.

Как мы упоминали выше, мы бы хотели прежде всего отталкиваться от пожеланий и потребностей пользователей (то есть вас), а уже потом от собственных идей. Все заполнившие опрос получат ранний доступ к нашему приложению.

Правильные ответы

  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. Идиома со скриншота прототипа: 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» по-русски — это не моё, это не для меня, не в моем вкусе.

  7. Поговорка со скриншота QuizUp: It is the first step that is difficult.
    По-русски можно сказать: первый шаг — самый трудный.

  8. Идиома со скриншота 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 — критическая/опасная ситуация.

Все статьи серии

  1. Стартап шаг за шагом: будущее онлайн-образования
  2. Стартап шаг за шагом: команда и менторы
  3. Стартап шаг за шагом: первая бизнес-модель
  4. Как мы делали образовательную платформу: первый дизайн, landing page и логотип
  5. Как мы делали образовательную платформу: первое приложение
  6. Делаем HTML5-квест: применяем паттерн MVC в Construct 2
  7. Делаем HTML5-квест: создаём персонажа и базовую анимацию
Tags:
Hubs:
+15
Comments 6
Comments Comments 6

Articles

Information

Website
learzing.com
Registered
Founded
Employees
2–10 employees
Location
Россия