Sugar Teddy
Sugar Teddy — український бренд батончиків без цукру з ведмедем-бунтарем на обличчі та гучним, зухвалим голосом.
UX/UI його онлайн-магазину для десктопа й телефона — від вайрфреймів до головної, каталогу, сторінки товару, кошика, оформлення замовлення, службових сторінок і 404 з ведмедем.
Онлайн-магазин із характером
Sugar Teddy робить батончики без цукру й говорить про це з усмішкою: перше правило Sugar Teddy — ніякого цукру, друге — ніякого цукру взагалі. Бренд говорить голосом ведмедя-бунтаря із зіркою на оці, і магазин мав звучати так само. Ми спроєктували його українською, у фірмовому помаранчевому з чорним і лаймовими кнопками, — від вайрфреймів до фінальних сторінок для десктопа й телефона. У футері написано, що його створили без глютену та цукру в thelegacy.
Головна відкривається міксом вибухових смаків і знижкою, далі біжить рядок переваг: без доданого цукру, без пальмової олії, рослинна основа, мінерали й вітаміни, заряд енергії. У кожній картці батончика є лічильник кількості й кнопка кошика, а шкала шаленості смаків підказує, наскільки далеко заходить смак — від улюбленої класики до надзвичайно дивного.
Від смаку до замовлення
Сторінка товару показує батончик на фото з білками, жирами, вуглеводами й калорійністю, упаковки по 4 або 12 штук і згортає склад і поживну цінність, опис, доставку й оплату в короткі розділи. Далі відгуки з кнопкою «написати відгук» та інші смаки, які варто спробувати. Кошик висувається збоку, а оформлення вміщується на одній сторінці: особисті дані, доставка Новою Поштою у відділення, поштомат чи за адресою, оплата Apple Pay або Google Pay, LiqPay чи при отриманні, коментар і промокод.
Решта магазину тримає той самий голос: каталог, контакти з формою для партнерів, доставка й оплата, повернення та політика конфіденційності, а ще сторінка 404, де ведмідь повідомляє, що сторінки не існує, і повертає до каталогу. Основні сторінки мають мобільні версії з повноекранним меню, соцмережами й перемикачем мови.
Спершу вайрфрейми
Перш ніж з’явився помаранчевий, сторінки зібрали сірими вайрфреймами: головну, каталог, сторінку товару, оформлення замовлення, контакти й сторінку про компанію. Фінальна головна закінчується знижкою за реєстрацію, запрошенням створювати бренд разом зі спільнотою і футером, який кличе до неї доєднатися.
Факти про проєкт
- Клієнт
- Sugar Teddy, український бренд батончиків без цукру
- Галузь
- Їжа, корисні снеки, e-commerce
- Платформа
- Онлайн-магазин (десктоп і мобільна версія)
- Послуги
- UX/UI-дизайн сайту, вайрфрейми
- Що зроблено
- Вайрфрейми; головна; каталог; сторінка товару з поживною цінністю, упаковками й відгуками; кошик; оформлення замовлення з доставкою Новою Поштою й онлайн-оплатою; сторінки про компанію, контактів, доставки й оплати, повернення та конфіденційності; сторінка 404; мобільні версії з повноекранним меню
- Більше робіт у
- UX/UI та вебдизайн
- Схожі кейси
- KITCLOTHES, Cryptopinion, Growth Foundry
Питання про проєкт
Що таке Sugar Teddy?
Український бренд батончиків без доданого цукру й пальмової олії на рослинній основі, якого представляє ведмідь-бунтар і зухвалий тон голосу.
Що thelegacy розробила для Sugar Teddy?
Онлайн-магазин для десктопа й телефона: спершу вайрфрейми, потім головна, каталог, сторінка товару, кошик, оформлення замовлення, сторінки про компанію, контактів і політик та сторінка 404 з ведмедем.
Як працює замовлення в магазині?
Батончики додаються з картки або сторінки товару — упаковкою по 4 чи 12 штук, — замовлення перевіряється в бічному кошику, а оформлюється на одній сторінці з доставкою Новою Поштою й оплатою Apple Pay, Google Pay, LiqPay або при отриманні.
