Как мы делали образовательную платформу: первое приложение
В предыдущей статье мы рассказали о первых дизайн-концептах, 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.
cup of tea. piece of cake. can of Coke. mug of beer. Нужно выбрать правильный вариант ответа в ситуации, в которой используется идиома. Для тех, кто играл в английскую версию Duke Nukem 3D (или Duke Nukem Forever), выбрать правильный ответ не составит труда :) Кстати, попробуйте угадать правильные ответы на этот и другие вопросы ниже без использования поисковых систем, словарей и прочего. В конце статьи — правильные ответы, с русскими аналогами.Обычно образовательные методики довольно скучные. Что можно добавить, чтобы сделать интереснее? Интерактив, игровую составляющую и социальность — таков рецепт интересного приложения из наших предыдущих рассуждений.
Одна из идей с игровой и социальной составляющей от нашей учительницы английского — игровая методика для тестовых вопросов, которая применяется в классе. У студентов есть игровые фишки, каждый ставит фишку на правильный, по его мнению, вариант ответа. Студент, угадавший правильный вариант, забирает фишки тех, кто не угадал. Если переложить эту механику на онлайн-игру, получаем мультиплеер, который делает игру еще интереснее.
Вопрос с 4 вариантами ответов напоминает игру «Кто хочет стать миллионером?», поэтому мы решили сделать нечто подобное для изучения идиом. И получили следующую первую концепцию для мобильного приложения:
Вопрос, 4 варианта ответа, ограничение времени на ответ и панель с результатами внизу. Можно сделать интереснее и добавить к тексту картинки. Если идиомы будут еще и нарисованы, пользователь сможет лучше запомнить правильную идиому. Помимо слов будет еще и визуальная ассоциация, плюс картинки повысят привлекательность приложения.
К сожалению, на тот момент в нашей команде не было иллюстратора, мы решили воспользоваться сервисом Fiverr (биржа услуг за $5), чтобы попробовать найти иллюстратора и подходящий стиль для отрисовки идиом.Мы получили несколько иллюстраций. Например, вот так бы мог выглядеть человек, всегда задающий глупые вопросы:
Это иллюстрация для четвертого варианта ответа на вопрос (кстати, этот вариант неправильный):
An eager beaver
is someone who is hungry
is someone who works hard, busily and with enthusiasm
is an animal with dark fur
is someone who is always asking stupid questions
А вот это отец, который никогда не забывает по праздникам купить конфет своим детям: 
Как можно догадаться, иллюстратор из Индии :) Сам вопрос:
A sugar daddy
is a father who never forgets to buy some sweets for his kids on red letter days
is a rich, elderly man who favours a young woman financially in return for special attentions
is a person who suffers from diabetes
is anyone who has unhealthy eating habits and favours all kinds of pastry and sweets
А вот так выглядит человек, который ненавидит шопинг: 
Вопрос:
An awkward customer
is someone who is always dropping things when he’s shopping
is a customer who fails to pay his bills on time
is an unpleasant, difficult or dangerous person to deal with
is a person who hates shopping
И последний пример — плотник, специализирующийся на изготовлении кресел: 
An armchair expert
is a person who offers advice on something he knows little about
works in a furniture shop
is a carpenter who specializes in making armchairs
is someone who knows a lot about armchairs
После экспериментов с иллюстрациями мы решили поучаствовать в хакатоне и результатом двухдневной работы стал прототип приложения для изучения идиом, который вписывался в концепцию нашей платформы.
Пользователь по ходу изучения получает очки, достижения и награды от партнеров.
Короткое видео с работой прототипа:
[embedded content]
Чуть подробнее о «кухне» разработки на хакатоне с точки зрения участников нашей команды.
Разработка на хакатоне с нуля — это отдельное искусство. Результатом хакатона является проверенная идея. Идея проверяется и во время создания прототипа, и после, при его тестировании. По мере работы вы начинаете лучше понимать свою идею, уточняете, делаете ее ближе к реальности или отказываетесь от нее. Все, что вам нужно сделать на хакатоне, — это увидеть вашу идею в действии, понять ее намного лучше.Так как есть высокая вероятность, что текущий вариант идеи будет отброшен, а время для работы крайне ограничено (как правило, 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 (подробнее об этой методике — в нашей второй статье), можно считать, что мы проверили нашу идею, и исходя из полученных данных, решили двигаться в другом направлении. Модное слово — пивот, обычная ситуация для стартапа. Ну, а если попроще и по-русски, то первый блин комом (тоже идиома, кстати).
В каком именно направлении мы решили дальше двигаться с нашим приложением? Читайте в нашей следующей статье.
Приглашаем всех хабражителей помочь нам в создании приложения для изучения английских идиом — потратить несколько минут и заполнить небольшой опрос, который повлияет на нашу разработку.Как мы упоминали выше, мы бы хотели прежде всего отталкиваться от пожеланий и потребностей пользователей (то есть вас), а уже потом от собственных идей. Все заполнившие опрос получат ранний доступ к нашему приложению.
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.Русский аналог — проще простого, проще пареной репы, как два пальца об асфальт :) An eager beaver is someone who works hard, busily and with enthusiasm.Русский аналог — трудоголик, работяга, энтузиаст. Еще вариант — «работать как папа Карло». A sugar daddy is a rich, elderly man who favours a young woman financially in return for special attentions.Русский аналог — «папик». An awkward customer is an unpleasant, difficult or dangerous person to deal with.Трудный или опасный человек (также: сложный, неприятный, вздорный, скверный). An armchair expert is a person who offers advice on something he knows little about.Русский аналог — диванный аналитик/теоретик. An awkward customer is an unpleasant, difficult or dangerous person to deal with.Трудный или опасный человек (также: сложный, неприятный, вздорный, скверный). Идиома со скриншота прототипа: 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» по-русски — это не моё, это не для меня, не в моем вкусе. Поговорка со скриншота QuizUp: It is the first step that is difficult.По-русски можно сказать: первый шаг — самый трудный. Идиома со скриншота 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 — критическая/опасная ситуация.
