О компании: Medpharma.by — магазин, продающий косметику. Главным образом он специализируется на продукции для красоты и здоровья кожи, также у них представлена аптечная косметика.
Основные цели: Создать сайт интернет-магазина, разработать индивидуальный дизайн, обеспечить максимальную адаптивность сайта под все виды устройств и подключить оплату интернет-эквайринга и возможность выбора типа доставки.
Обращение заказчика:
Компания Medpharma.by обратилась к нам для создания сайта интернет-магазина. На момент обращения к нам у них уже был действующий проект интернет-магазина. В целом, особых нареканий его работа не вызывала, а вот дизайн, возможность seo-оптимизации и технические возможности были совершенно неподходящими.
| Краткий бриф на разработку сайта | |
| Наименование компании | ИП Цветкова Кристина Михайловна |
| Сфера деятельности | Продажа косметической продукции |
| Страна, на которую рассчитан сайт | Республика Беларусь |
| Основные товары и услуги | Косметическая продукция |
| Домен сайта | medpharma.by |
| Целевая аудитория | Женщины всех возрастов |
| Задачи сайта | Продажа товаров, Информационная |
| Тип сайта | Интернет-магазин |
| CMS | WordPress |
| Хостинг | Hoster.by |
| Пожелания заказчика | Создать сайт интернет-магазина с уникальным дизайном и техническим наполнением. Сайт должен быть адаптирован для всех видов устройств и иметь удобный каталог и корзину заказов. |
Разработка дизайна и технические элементы интернет-магазина:
Для отрисовки страниц наши специалисты использовали FIGMA – онлайн-сервис для разработки интерфейсов и прототипирования. В процессе разработки были проведены 5 этапов правок и согласований для достижения наилучшего конечного результата. Изначально в качестве вдохновения использовались приложение и веб-сайт маркетплейса OZON, а также наработки компании SILVERWEB. При разработке важно было сохранить индивидуальность сайта относительно проектов схожей тематики, но при этом внедрить продающие механики, общие для всех сайтов.
На сайте есть очень много незаметных решений, которые качественно дополняют его и выделяют среди конкурентов. Например, меню. Для данного сайта была применена наша специальная идея. По сути это всё то же меню, в котором есть товары и категории. Однако в то же время там есть функционал, позволяющий видеть бренды, товары которых представлены в каждой конкретной категории. К тому же, всегда можно нажать на иконку с логотипом бренда, и пользователь сразу перейдёт на страницу каталога, с фильтром относительно выбранного бренда и категории.
Для отрисовки страниц наши специалисты использовали FIGMA – онлайн-сервис для разработки интерфейсов и прототипирования. В процессе разработки были проведены 5 этапов правок и согласований для достижения наилучшего конечного результата. Изначально в качестве вдохновения использовались приложение и веб-сайт маркетплейса OZON, а также наработки компании SILVERWEB. При разработке важно было сохранить индивидуальность сайта относительно проектов схожей тематики, но при этом внедрить продающие механики, общие для всех сайтов.
На сайте есть очень много незаметных решений, которые качественно дополняют его и выделяют среди конкурентов. Например, меню. Для данного сайта была применена наша специальная идея. По сути это всё то же меню, в котором есть товары и категории. Однако в то же время там есть функционал, позволяющий видеть бренды, товары которых представлены в каждой конкретной категории. К тому же, всегда можно нажать на иконку с логотипом бренда, и пользователь сразу перейдёт на страницу каталога, с фильтром относительно выбранного бренда и категории.
Сайт используют не только на компьютерах: большая часть заказов идёт с мобильных телефонов, а это значит, что нужно проработать то, как дизайн для десктопных устройств адаптируется под мобильный формат. И в первую очередь это касается всё того же меню. Для мобильных устройств меню было переработано и потеряло часть своего функционала: в нём исчезла функция подбора по производителям, о которой говорилось выше. Всё же экран смартфона намного меньше, чем любой монитор и уместить весь функционал просто невозможно. Однако мобильные устройства не всегда проигрывают стационарным, в данном случае дизайн мобильного меню намного выразительнее десктопного. Вместо скучных надписей было сделано стильное плиточное меню, а остальной функционал был помещён в навигационную панель внизу экрана.
Если говорить об комфорте, то пальцем не всегда удобно нажимать на маленькую надпись в углу экрана, а большие кнопки с понятными границами заметно улучшает опыт взаимодействия с сайтом. Продолжая тему адаптации десктопного дизайна под мобильные устройства, основная часть меню, используемая для покупок, была вынесена на отдельную навигационную панель. Такой способ расположения важных элементов часто используется в мобильных приложениях, например, в маркетплейсе от OZON. Данный дизайн делает сайт солиднее в глазах покупателей, а значит доверять ему будет больше, что положительно скажется на продажах.
Сайт используют не только на компьютерах: большая часть заказов идёт с мобильных телефонов, а это значит, что нужно проработать то, как дизайн для десктопных устройств адаптируется под мобильный формат. И в первую очередь это касается всё того же меню. Для мобильных устройств меню было переработано и потеряло часть своего функционала: в нём исчезла функция подбора по производителям, о которой говорилось выше. Всё же экран смартфона намного меньше, чем любой монитор и уместить весь функционал просто невозможно. Однако мобильные устройства не всегда проигрывают стационарным, в данном случае дизайн мобильного меню намного выразительнее десктопного. Вместо скучных надписей было сделано стильное плиточное меню, а остальной функционал был помещён в навигационную панель внизу экрана.
На главной странице, если пролистать почти в самый низ, можно найти блок с популярными категориями. В нём примечательно расположение элементов, такой дизайн встречается крайне редко, но выглядит очень интересно. К тому же, он позволяет показать большое количество товаров, не занимая много места.
Последнее о чём стоит упомянуть – это указатель со скидкой возле цены товара. Выглядит это как небольшой прямоугольник с процентами возле основной цены. Покупатели привыкли к такому обозначению, потому что часто наблюдают похожий дизайн в гипермаркетах, а вот в интернете такой приём используется нечасто.
Если говорить об комфорте, то пальцем не всегда удобно нажимать на маленькую надпись в углу экрана, а большие кнопки с понятными границами заметно улучшает опыт взаимодействия с сайтом. Продолжая тему адаптации десктопного дизайна под мобильные устройства, основная часть меню, используемая для покупок, была вынесена на отдельную навигационную панель. Такой способ расположения важных элементов часто используется в мобильных приложениях, например, в маркетплейсе от OZON. Данный дизайн делает сайт солиднее в глазах покупателей, а значит доверять ему будет больше, что положительно скажется на продажах.
На главной странице, если пролистать почти в самый низ, можно найти блок с популярными категориями. В нём примечательно расположение блоков, такой дизайн встречается крайне редко, но выглядит очень интересно. К тому же, он позволяет показать большое количество товаров, не занимая много места.
Говоря о товарах стоит упомянуть про указатель со скидкой возле цены. Выглядит это как небольшой прямоугольник с процентами возле основной цены. Покупатели привыкли к такому обозначению, потому что часто наблюдают похожий дизайн в гипермаркетах, а вот в интернете такой приём используется нечасто.
На главной странице, если пролистать почти в самый низ, можно найти блок с популярными категориями. В нём примечательно расположение элементов, такой дизайн встречается крайне редко, но выглядит очень интересно. К тому же, он позволяет показать большое количество товаров, не занимая много места.
Говоря о товарах стоит упомянуть про указатель со скидкой возле цены. Выглядит это как небольшой прямоугольник с процентами возле основной цены. Покупатели привыкли к такому обозначению, потому что часто наблюдают похожий дизайн в гипермаркетах, а вот в интернете такой приём используется нечасто.
Последнее о чём стоит упомянуть – это корзина покупок. По значимости она явно стоит выше, но покупатель доходит до неё только перед покупкой, а это уже самый последний этап взаимодействия с сайтом. Нажимая на иконку корзины, покупатель не переходит на новую страницу, вместо этого на сайте открывается небольшое окно, в котором демонстрируется список товаров, лежащих в корзине. И это является отличным решением, ведь теперь пользователю не придётся переходить со страницы на страницу, чтобы вспомнить, что он уже положил, а что ещё нет, сколько стоит каждый товар и какое количество он указал. А если ему всё же надо перейти в саму корзину, то ниже есть две кнопки для просмотра корзины и оформления заказа. Весь этот функционал делает перемещение по сайту намного приятнее. Вопросов к размеру окна не возникает, так как магазин узкоспециализированный и набрать такое количество товаров, чтобы было тяжело ориентироваться – сложно.
Последнее о чём стоит упомянуть – это корзина покупок. По значимости она явно стоит выше, но покупатель доходит до неё только перед покупкой, а это уже самый последний этап взаимодействия с сайтом. Нажимая на иконку корзины, покупатель не переходит на новую страницу, вместо этого на сайте открывается небольшое окно, в котором демонстрируется список товаров, лежащих в корзине.
И это является отличным решением, ведь теперь пользователю не придётся переходить со страницы на страницу, чтобы вспомнить, что он уже положил, а что ещё нет, сколько стоит каждый товар и какое количество он указал. А если ему всё же надо перейти в саму корзину, то ниже есть две кнопки для просмотра корзины и оформления заказа. Весь этот функционал делает перемещение по сайту намного приятнее. Вопросов к размеру окна не возникает, так как магазин узкоспециализированный и набрать такое количество товаров, чтобы было тяжело ориентироваться – сложно.
Страница корзины выглядит компактно и информативно. Блоки с товарами сгруппированы и изображения не занимают половину экрана. Справа от товаров есть блок с общей скидкой и суммой заказа, а под ними поле для применения купонов. Информация о скидке – полезная фишка данного блока, пользователю очень приятно видеть сколько он экономит. Также в самом низу есть рекомендуемые товары, но это чуть ли не обязательный блок для любой корзины в интернет-магазине, поэтому сказать о нём особо нечего.
Заполнить страницу оформления заказов – последнее, что должен сделать пользователь прежде чем товар станет его собственностью. Этот процесс должен быть максимально простым и приятным, чтобы не отпугнуть ни единого клиента. Поэтому, было решено добавить подробное описание и большие кнопки. Во-первых, это приятно выглядит. Большие круглые кнопки дополняют общий стиль, в котором превалируют округлые формы, а большое количество текста сделало сами блоки объёмными и в итоге страница не кажется пустой.
Результат
Итоговый результат понравился как заказчику, так и всей команде SILVERWEB. В процессе работы мы реализовали все высказанные пожелания, учли необходимость адаптивности, настроили работу сайта как торговой площадки.
