Платформа для вдумчивого поиска онлайн-курсов

Главное о кейсе

• The website makes the search process comfortable, because it was designed with the goal to streamline the work with large amounts of monotonous data as much as possible.
• The logical and intuitive filtering and sorting UI has users spend time actually looking for what they need. The simplicity of search is further facilitated by the optimized performance.
• All the necessary data on courses is always readily available, making it less likely for users to leave the website to search for extra information on the web. The average session is longer than on similar aggregators, with a higher conversion rate.
• Easy integration of new online schools and courses into the website due to the pragmatically minimalist design.

(RU)
• Сайт делает процесс поиска максимально комфортным, потому что при дизайне мы ориентировались на облегчение работы с большими объёмами однообразных данных.
• Логичный и интуитивный интерфейс фильтрации и сортировки позволяет пользователям проводить время за поиском того, что им действительное нужно. Удобству поиска также способствует оптимизированная производительность.
• Вся важная информация о курсах доступна прямо на сайте, избавляя пользователей от необходимости покидать сайт, чтобы поискать что-то в интернете. Средняя сессия дольше, чем у подобных агрегаторов, а конверсия — выше.
• Органичная интеграция новых школ и курсов достигнута благодаря практичному и минималистичному дизайну.

Как проект изменил жизнь пользователей

The Kursy-online.ru platform has made it much easier for users to find and select courses. They can now easily find suitable courses, compare them, read the reviews of other users, and choose the most suitable option.
Users have also been able to study anytime, anywhere, which has helped them learn new skills and upgrade their skills. They can choose courses that match their interests and professional needs.
The platform has also become a useful tool for educators to offer courses and attract new students. «Kursy-online» helps them expand their audiences and gain a new source of income.


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

Бизнес-задача и ее решение

The Problem
In 2022, we were hired to design a website for an aggregator of online courses. Contrary to the popular trend, the customer didn’t want an Uber for online education platforms.

The customer feels that modern online services often focus on rushing the user through the flow funnel, without letting them to take time to actually choose and compare things, which can result in abandoned flows, as users would feel pressured to make a decision based on something they don’t see or understand. The issue is especially pronounced in the field of online education, where users may be on the verge of making a potentially life-changing decision (and spending a lot of money), and they want to feel absolutely confident about what they’re doing.

The customer needed a really powerful and intuitive tool for users to mess around with and choose the absolutely right option without feeling rushed or pressured into choosing something without sufficient explanation of why it’s exactly what they need.
 
The Solution
We set out to make a website with an exhaustive and well-structured database, lots of attributes, filters, sorting options, ratings and reviews that would enable users to be absolutely aware of the steps they take on their journey to what they’re looking for and feel the website’s responses.

A simple on the surface, the website is equipped with a powerful filtering and sorting engine that includes many parameters: price, discounts, course length, closest start dates, availability of trial period, refund, guaranteed employment or internship, entry barrier, presence of homework, whether the school is authorized to issue a certificate, whether the graduate will be able to build a portfolio during the education, etc. Users have access to different indicators to choose between schools: reviews and ratings, and lots of other structured data based on which users can make their own impression—how long they’ve been in business, how many teachers they have, how many students.

We decided on a minimalist visual style to balance out the exhaustively detailed database and filtering interface, so as not to overwhelm the user’s perception and help them focus on the important and useful elements. Feeling of vagueness and uncertainty often resulting from cluttered interfaces can scare users away from the flow, while we need them to understand exactly where they are, what they are clicking on. As a bonus, this approach allows for a better optimization—and performance issues can be a major cause of annoyance, especially on a website that invited users to operate loads of structured data.

The Story
We worked closely with the customer to ensure the final result is exactly what they envisioned for their business. We’d like to thank the team for their patience, responsiveness and genuine interest even in the most minute and boring aspects of our work.

• We researched websites of competitors and identified problems that we wanted to avoid:
- missing or unnecessary filters and sorting options are a major factor of frustration and may cause users to give up the search;
- navigation and search UI elements in counter-intuitive places that make the search process unnecessarily long;
- pages cluttered with unnecessary elements that disorient the user;
- unhelpful categorization elements with unclear difference between them (e. g. “users’ choice” and “best rating”);
- multiple performance issues;
- the user is whether overwhelmed with many options right away, or is offered very little to go on.
• The prototyping stage started with the development of user scenarios. We used data on similar websites and aggregators in other fields, at this point we requested lots of data on the target audience from the customer’s team.
• We focused on the UX design early on. Dozens of early versions had been tested and thrown back and forth between the customer and our team before we decided on the working concept;
• Almost at the same time we were figuring out the visual style for the website, including the color palette, that would be able to consistently incorporate lots of text, tables, and very different brand logos of online schools.
• When the rough concept evolved into a robust design that satisfied everyone and no major changes were anticipated, our web developers started work on ensuring that that the website would perform better than the most similar aggregators—the extensive use of svg images was among the things that contributed to the result.
• The design was finalized, and we focused on the polishing of all UI elements and the visual style. Meanwhile, the developers were proceeding with the main chunk of work.
• Minor tweaks in both design and code were still being made later on—when we felt sure that the website is ready take on large amounts of data from different sources and allow users mess around with it, we run a final round of tests;
• The optimization was done on the almost fully-functional website.
• The launch day, getting early stats from the customer.

(RU)
Проблема
В 2022 мы получили заказ на сайт — агрегатор онлайн-курсов. Вопреки популярному тренду, заказчик не требовал «новый Убер» для образовательных платформ.

По мнению заказчика, современные онлайн-сервисы зачастую так спешат провести пользователя через воронку, что почти не оставляют времени на выбор и сравнение продуктов, — а это может привести к потере интереса и выходу из флоу, так как пользователь почувствует, что его подталкивают к решению, не объясняя, на чём оно основано. Вопрос особенно актуален в сфере онлайн-образования, где пользователи могут находиться на грани потенциально переломного в жизни решения (связанного с немалыми инвестициями), и они хотят быть на 100% уверены в своих действиях.

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

Решение
Мы решили сделать сайт с исчерпывающей и логично структурированной базой данных, множеством характеристик, фильтров, опций сортировки, рейтингами и отзывами — чтобы пользователь мог делать осознанные шаги на пути к цели и хорошо чувствовать то, как сайт на них реагирует.
Сайт прост на поверхности, но оснащён мощным инструментарием для фильтрации и сортировки данных с множеством параметров: цена, скидки, длина курса, ближайшие даты, наличие пробного периода, возможность возврата средств, гарантированного трудоустройства или стажировки, уровень подготовки, наличие домашних заданий, выдаёт ли курс сертификаты, можно ли составить портфолио по итогам обучения и т. д. Пользователи имеют доступ к множеству показателей, которые помогают сделать выбор: обзоры и рейтинги, а также другие данные, с помощью которых пользователь может составить собственное впечатление — возраст школы, количество преподавателей и студентов.

Мы остановились на минималистичном визуальном стиле, чтобы компенсировать высокий уровень детализации данных в интерфейсе выбора курсов, — важно не перенапрячь восприятие пользователя и сосредоточить его внимание на действительно важных элементах. Чувство неопределённости, которое может возникнуть из-за перегруженности интерфейса, сломает флоу пользователя, а нам нужно, что он точно понимал, где он и на что он кликает. К тому же, такой подход располагает к лучшей оптимизации — а проблемы с производительностью могут сильно раздражать, особенно на сайте, который предлагает пользователю работать с большим количеством структурированных данных.

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

• Мы проанализировали сайты конкурентов и определили ряд проблем, которых мы хотели избежать:
- Лишние или недостающие фильтры и опции сортировки вызывают фрустрацию и могут заставить пользователя прекратить поиск нужного курса;
- Элементы поиска и навигации, расположенные в неочевидных местах, значительно увеличивают время поиска;
- Страницы, перегруженные ненужными элементами, которые только рассеивают внимание;
- Бесполезная категоризация, которая может только запутать (например, «Выбор пользователей» и «Лучший рейтинг» — в чём разница?);
- Низкая производительность сайта;
- Пользователь или сразу перегружен огромным объёмом информации, или не получает никакого намёка, с чего ему начать.
• Прототипирование началось с разработки пользовательских сценариев. Мы учитывали опыт аналогичных сайтов и агрегаторов в других сферах, запрашивали много данных о целевой аудитории у заказчика.
• На самых ранних этапах мы уделили много времени UX-дизайну. Мы перекидывались с командой заказчика сырыми версиями, пока не остановились на рабочей концепции.
• Примерно в это же время мы определялись с визуальным стилем сайта, включая цветовую гамму, которые могли бы безболезненно интегрировать много текста, таблиц и самые разные логотипы онлайн-школ.
• Когда сырая концепция превратилась в рабочий дизайн, который удовлетворял всем потребностям, и мы не планировали больших изменений, веб-разработчики начали разработку сайта, учитывая пожелания по оптимизации. Целью было добиться лучшей производительности, чем у большинства агрегаторов, а в числе повлиявших на результат решений было широкое использование изображений в формате SVG.
• Финальный дизайн был готов, мы сосредоточились на проработке элементов интерфейса и визуальном стиле. Тем временем, разработчики уже приступили к основной части работы.
• Мелкие доработки в дизайне и коде продолжались ещё какое-то время. Когда мы поняли, что сайт готов принять большие объёмы данных из разных источников и дать пользователям оперировать ими, мы провели финальные тесты перед запуском.
• Оптимизация проводилась на сайте, функционирующем практически в полную силу.
• День запуска, сбор первой статистики от заказчика.

Крафт (мастерство), реализация, технические детали

To create the platform «Kursy-online.ru» was chosen the popular content management system - WordPress. It made it easy to create and customize a site for finding online courses with the ability to update content without the cost of developing a cms from scratch, spending a few million to do so.
One of the key elements was setting up a user-friendly interface, wp allowed us to quickly pull layout over functionality. Elementor and Advanced Custom Fields plugins were used to manage the functionality of the site.
To ensure the security of the site the Wordfence plugin was used, which protected against hacking and DDoS attacks. WP Rocket and Autoptimize plugins were used to speed up content loading.

To ensure the safety of users, an SSL certificate was installed, which provides a secure connection between the server and the client, as well as to increase user confidence in the site.
For content management, the Yoast SEO plugin was installed to optimize the site content for search engines and increase its visibility in search results.
Various optimization techniques, such as minification of CSS and JavaScript files, image compression, caching and other optimization methods were used to ensure that the site loads quickly. Content Delivery Network (CDN) and Varnish Cache were also used to speed up content loading.
The SearchWP plugin was installed to provide easy course searches, which created an efficient search across all of the site's content. In addition, plugins were used to create and display user feedback on courses.

Для создания платформы "Курсы Онлайн" была выбрана популярная система управления контентом - WordPress. Она позволила легко создать и настроить сайт для поиска онлайн-курсов с возможностью обновления контента без затрат на разработку cms с нуля, потратив на это несколько миллионов.
Одним из ключевых элементов была настройка удобного интерфейса для пользователей, wp позволил нам быстро натянуть верстку на функциональность. Для управления функциональностью сайта были использованы плагины Elementor и Advanced Custom Fields.
Для обеспечения безопасности сайта использовался плагин Wordfence, который защищал от взлома и DDoS-атак. Для ускорения загрузки контента использовались плагины WP Rocket и Autoptimize.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

We worked closely with the customer to ensure the final result is exactly what they envisioned for their business. We’d like to thank the team for their patience, responsiveness and genuine interest even in the most minute and boring aspects of our work.

• We researched websites of competitors and identified problems that we wanted to avoid:
- missing or unnecessary filters and sorting options are a major factor of frustration and may cause users to give up the search;
- navigation and search UI elements in counter-intuitive places that make the search process unnecessarily long;
- pages cluttered with unnecessary elements that disorient the user;
- unhelpful categorization elements with unclear difference between them (e. g. “users’ choice” and “best rating”);
- multiple performance issues;
- the user is whether overwhelmed with many options right away, or is offered very little to go on.
• The prototyping stage started with the development of user scenarios. We used data on similar websites and aggregators in other fields, at this point we requested lots of data on the target audience from the customer’s team.
• We focused on the UX design early on. Dozens of early versions had been tested and thrown back and forth between the customer and our team before we decided on the working concept;
• Almost at the same time we were figuring out the visual style for the website, including the color palette, that would be able to consistently incorporate lots of text, tables, and very different brand logos of online schools.
• When the rough concept evolved into a robust design that satisfied everyone and no major changes were anticipated, our web developers started work on ensuring that that the website would perform better than the most similar aggregators—the extensive use of svg images was among the things that contributed to the result.
• The design was finalized, and we focused on the polishing of all UI elements and the visual style. Meanwhile, the developers were proceeding with the main chunk of work.
• Minor tweaks in both design and code were still being made later on—when we felt sure that the website is ready take on large amounts of data from different sources and allow users mess around with it, we run a final round of tests;
• The optimization was done on the almost fully-functional website.
• The launch day, getting early stats from the customer.

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

• Мы проанализировали сайты конкурентов и определили ряд проблем, которых мы хотели избежать:
- Лишние или недостающие фильтры и опции сортировки вызывают фрустрацию и могут заставить пользователя прекратить поиск нужного курса;
- Элементы поиска и навигации, расположенные в неочевидных местах, значительно увеличивают время поиска;
- Страницы, перегруженные ненужными элементами, которые только рассеивают внимание;
- Бесполезная категоризация, которая может только запутать (например, «Выбор пользователей» и «Лучший рейтинг» — в чём разница?);
- Низкая производительность сайта;
- Пользователь или сразу перегружен огромным объёмом информации, или не получает никакого намёка, с чего ему начать.
• Прототипирование началось с разработки пользовательских сценариев. Мы учитывали опыт аналогичных сайтов и агрегаторов в других сферах, запрашивали много данных о целевой аудитории у заказчика.
• На самых ранних этапах мы уделили много времени UX-дизайну. Мы перекидывались с командой заказчика сырыми версиями, пока не остановились на рабочей концепции.
• Примерно в это же время мы определялись с визуальным стилем сайта, включая цветовую гамму, которые могли бы безболезненно интегрировать много текста, таблиц и самые разные логотипы онлайн-школ.
• Когда сырая концепция превратилась в рабочий дизайн, который удовлетворял всем потребностям, и мы не планировали больших изменений, веб-разработчики начали разработку сайта, учитывая пожелания по оптимизации. Целью было добиться лучшей производительности, чем у большинства агрегаторов, а в числе повлиявших на результат решений было широкое использование изображений в формате SVG.
• Финальный дизайн был готов, мы сосредоточились на проработке элементов интерфейса и визуальном стиле. Тем временем, разработчики уже приступили к основной части работы.
• Мелкие доработки в дизайне и коде продолжались ещё какое-то время. Когда мы поняли, что сайт готов принять большие объёмы данных из разных источников и дать пользователям оперировать ими, мы провели финальные тесты перед запуском.
• Оптимизация проводилась на сайте, функционирующем практически в полную силу.
• День запуска, сбор первой статистики от заказчика.

Прочая информация о кейсе

Unlike many modern online services that match you with the best-suited result using a bunch of under-the-hood algorithms, the online course aggregator Kursy Online empowers you to make your own informed choice by providing a powerful and intuitive toolset for finding the right online course.

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

Скриншоты

Комментарий заказчика

The end result perfectly satisfies the requirements that we had in mind when we were ordering this website. We’re really proud that we now have a tool that is—even if not unique—very effective and rewarding to use, based on the practices of existing aggregator that we analyzed and perfected together with the design team.

(RU)
Конечный результат полностью удовлетворяет запросы, с которыми мы пришли к ребятам. Очень круто, что у нас есть что-то—пусть не инновационное—но мощное и эффективное. Этого нам удалось добиться, изучив и усовершенствовав практики других агрегаторов.