Мой год в IT-cтартапе.
Субъективное впечатление о работе в развивающемся стартапе с точки зрения дизайнера.
✦
Итак, прошёл год с тех пор как я начал заниматься разработкой дизайна для Typing School. Что такое Typing School? Это сервис по слепой печати, который наиболее пластично подходит к развитию навыка той самой слепой печати, без нудной бредятины вроде бессмысленных сочетаний букв и прочего. В целом, алгоритм у нас получше чем у большинства русскоязычных сервисов той же направленности. Это стоит признать, а если не верите, то зайдите на typing.school
Впрочем, это не мешает нам совершенствоваться, и это уже второй релиз, так называемый MVP 2.0, в котором я как UX/UI дизайнер — постарался рефрешнуть все что только можно, но это не касается только UI-составляющей дизайна, UX мы разработали почти с нуля, если сравнивать с результатом на Апрель 2020.
Как все началось?
Ещё осенью прошлого года у меня не было ни одного масштабного проекта для портфолио, я занимался лишь дизайном для сайтов, если честно, UX-ом там даже не пахло. Ближе к середине октября мне выдалась возможность поучаствовать в разработке зарождающегося стартапа из акселератора университета ИТМО.
Мне понравилась концепция сервиса, к тому времени я уже владел слепой печатью, но качеством отечественных сервисов я был не очень доволен. Изначально учился на klava.org, до этого попробовал много других продуктов, но этот сервис, в своё время, был лучшим для меня, то есть простым и не нагруженным. Но спустя три года что-то в нем изменилось и ux сервиса стал абсолютно отвратным, что я по сей день не могу разобраться как с ним работать.
— Итак, почему захотел рискнуть и начать дизайнить?
— Все просто, не нашёл альтернатив — сделай сам. Тем более у западных конкурентов нет поддержки русского языка, а ui интерфейса нацелен на обучение детей дошкольного/школьного возраста, что мне не очень нравится.
- Разрабатывая Typing School я стремился к простоте и минимализму, к этому современному тренду белых интерфейсов*, без капли серого и унылого. Поэтому я взял за основу наш фирменный синий и белый, смешав их, я получил приятную палитру и широкоформатный интерфейс, который легко адаптировать под все платформы. Постепенно, месяц за месяцем я старался шлифовать его, создавать дизайн-систему, в какой-то момент, я придумал для себя хобби — рисовать emoji в стиле apple, полностью в svg и в точной схожести с оригиналом. Так как в нашем сервисе эмодзи уделяется большое внимание. Они играют роль универсального языка общения, причём даже для разных поколений, этот формат вполне уместен.
Раскладки, системы и буква Ё.
Первой, несомненно, нестандартной задачей было понять, как нам разделять пользователей по типу клавиатуры. У нас было несколько критериев:
- Пользователь пользуется Mac/Windows & Linux?
- Какой тип раскладки используется ANSI или ISO?
- В чем отличия американской раскладки от европейской на Mac?
Изначально, мы решили сделать поддержку и мак юзеров сразу, потому что вся команда разрабатывала продукт на этой оси, как оказалось, в её разработке появилось множество нюансов.
Раскладки в современном мире можно разделить на два основных стандарта ANSI и ISO. Как правило, все Mac на территории Европы имеют тип раскладки ISO, но обычные клавиатуры для Windows/Linux имеют американский стандарт ANSI.
Их основные отличия:
- Enter: в ANSI вытянутый, в ISO — высокий, на два ряда.
- Shift: В ANSI оба шифта длинные, в ISO левый Shift короткий.
- Буква ё: иногда скачет на Mac, в зависимости от того какие настройки.
У буквы ё свой особенный путь на раскладках Mac, к примеру есть две распространённых раскладки: Русская и Русская ПК. Например, запятая и точка на раскладке «Русская» находятся сверху, на кнопках 6 и 7 соответственно. В «Русская ПК» более привычный случай, кнопка / около правого шифта, по дефолту ставит точку, а если зажать шифт, появится запятая.
Для меня предпочтительнее раскладка «Русская», потому что я привык к ней изначально. Сколько людей, столько и мнений.
Учтя все особенности раскладок мы потратили около месяца жизни, а я к тому же перерисовывал каждую отдельную клавиатуру для одной ОС и типа раскладки.
Это было весело ❖
Итого, у нас получилось создать один из самых понятных типов настройки раскладки клавиатуры. Мы постарались избежать всех сложностей, визуализировали выбор операционной системы, формата клавиатуры и их особенности без всяких сложностей. Это, как мне кажется, лучший способ сделать свой продукт приятным и запоминающимся.
Первые интерфейсы.
Первые интерфейсы я сделал уже спустя месяц. Изначально я отрисовал сам тренажёр, прототип клавиатуры, личный кабинет и страницу тех.поддержки. К сожалению, сохранилось немногое, но что-то у меня все-таки осталось.
Страница настроек была моим первым нестандартным интерфейсом, в ней сочетались гибридные поля и невнятные стили для них :)
Правда, сейчас, они выглядят довольно нереалистичными. Но основная концепция осталась и имеется на сайте!
И эти нестандартный формы для настроек перекочевали в поля для регистрации и входа. Мне кажется, это неплохой подход, по крайней мере довольно прогрессивный и не встречающийся на других сайтах.
Страница тренажёра — это моя гордость. В ней воплощены самые классные идеи, которые только у меня были. Основные фишки — это css клавиатура и крутейшие руки, которые помогают новичкам ориентироваться и не смотреть на свою клавиатуру. Кроме того, после релиза MVP 2.0 весь сервис был переписан с нуля на vue, теперь это веб-приложение.
UX и любовь к мелочам
Я очень люблю мелочи в дизайне. Мелочь, а приятно! Вот что заставляет меня пользоваться определёнными сервисами, согласитесь, что удобнее пользоваться тем, где тебе легче разобраться? Да, так и есть. Поэтому UX составляющей в этом релизе я уделил большое внимание.
Интерфейс: светлые тона и объёмные иллюстрации
Как мне кажется, современному дизайну не хватает объёма, интерфейсы научились дышать, но совсем утеряли детали. Поэтому я постарался совместить лёгкость современных интерфейсов и объём классического скевоморфизма, времён 2012.
Возрастные рамки:
Большинство сервисов схожей тематики стремятся охватить школьную аудиторию, это понятно, т.к. основные потребители такого контента — школы. Но, я считаю иначе: детей не стоит считать за отдельный вид, они такие же взрослые, такие же потребители контента. Не имеет смысла добавлять яркие и вырвиглазные цвета только чтобы дети заметили. Проще всего сделать сервис, которым будет интересно пользоваться и ребёнку и взрослому. Все зависит от механики обучения, а не от густоты красок и рисованных картинок!
А вот и пример:
Дизайн человека из 21 века
Да, не секрет, что разрабатывая интерфейс для typing school мне было всего 17 лет, сейчас уже 18, но это ничего не меняет. Одним из главных преимуществ нашего сервиса я считаю свежий взгляд на вещи.
Прочитайте любой материал на typing school и посмотрите сколько строчек он занимает! Это правда невероятно. Формулировка, объём и подача текста играют важную роль в образовательном процессе точно также как минималистичный дизайн.
Не буду обещать, просто посмотрите на тайпинге↖︎
Геймификация:
Пользователь должен быть удивлён и заинтригован тем, что происходит на сайте, поэтому в новом лендинге я сделал пару интерактивных разделов, где можно поиграть и повзаимодействовать с интерфейсом.
Алгоритмы:
Это не дизайнерская заслуга, но алгоритмы и методика освоения курса позволяют как можно быстрее перейти от глупых чередований букв к настоящим словам. А алгоритмы, считают подробную статистику, которая задизайнина уже мной.
Подводим итоги
Итак, как я провёл этот год в маленьком IT-стартапе? Наверное, это был самый классный год за последнее время, несмотря на то что происходило в мире, моя жизнь сильно изменилась. Без опыта, который я получил, работая в typing school, я был бы не настолько прокачен как сейчас. Каждая маленькая победа даёт мне силы и новые идеи.
Маленький список наших побед за этот год:
- Конкурс грантов Газпром-нефть. Победа в конкурсе грантов «Университет ИТМО Газпром нефть» в номинации Прототип.
- Demo day в преакселераторе университета ИТМО. Грант за 1 место в конкурсе demo day преакселератора университета ИТМО.
и многие другие ✦
Ваш, Грин.
Подписывайтесь на социальные сети ↘︎
Кейсы: https://dribbble.com/evergreene
TG-Канал: https://t.me/greenelers
Связь: theoneperson