thelegacy

Sugar Teddy

  • UX/UI
Клієнт

Sugar Teddy — український бренд батончиків без цукру з ведмедем-бунтарем на обличчі та гучним, зухвалим голосом.

Що ми зробили

UX/UI його онлайн-магазину для десктопа й телефона — від вайрфреймів до головної, каталогу, сторінки товару, кошика, оформлення замовлення, службових сторінок і 404 з ведмедем.

Онлайн-магазин із характером

Sugar Teddy робить батончики без цукру й говорить про це з усмішкою: перше правило Sugar Teddy — ніякого цукру, друге — ніякого цукру взагалі. Бренд говорить голосом ведмедя-бунтаря із зіркою на оці, і магазин мав звучати так само. Ми спроєктували його українською, у фірмовому помаранчевому з чорним і лаймовими кнопками, — від вайрфреймів до фінальних сторінок для десктопа й телефона. У футері написано, що його створили без глютену та цукру в thelegacy.

Головна відкривається міксом вибухових смаків і знижкою, далі біжить рядок переваг: без доданого цукру, без пальмової олії, рослинна основа, мінерали й вітаміни, заряд енергії. У кожній картці батончика є лічильник кількості й кнопка кошика, а шкала шаленості смаків підказує, наскільки далеко заходить смак — від улюбленої класики до надзвичайно дивного.

Home page: a mix of explosive flavours, the benefits ticker and the bars with the flavour craziness scale
Phone: home page
Phone: catalog of bars
Phone: product page
Phone: checkout

Від смаку до замовлення

Сторінка товару показує батончик на фото з білками, жирами, вуглеводами й калорійністю, упаковки по 4 або 12 штук і згортає склад і поживну цінність, опис, доставку й оплату в короткі розділи. Далі відгуки з кнопкою «написати відгук» та інші смаки, які варто спробувати. Кошик висувається збоку, а оформлення вміщується на одній сторінці: особисті дані, доставка Новою Поштою у відділення, поштомат чи за адресою, оплата Apple Pay або Google Pay, LiqPay чи при отриманні, коментар і промокод.

Решта магазину тримає той самий голос: каталог, контакти з формою для партнерів, доставка й оплата, повернення та політика конфіденційності, а ще сторінка 404, де ведмідь повідомляє, що сторінки не існує, і повертає до каталогу. Основні сторінки мають мобільні версії з повноекранним меню, соцмережами й перемикачем мови.

Product page: photos, nutrition, packs, reviews and other flavours, with the cart open
Catalog of Sugar Teddy bars
Checkout: details, Nova Poshta delivery, payment and the order
Phone: contacts
Phone: menu with socials and language
Phone: 404 page
404 page: the bear says the page does not exist

Спершу вайрфрейми

Перш ніж з’явився помаранчевий, сторінки зібрали сірими вайрфреймами: головну, каталог, сторінку товару, оформлення замовлення, контакти й сторінку про компанію. Фінальна головна закінчується знижкою за реєстрацію, запрошенням створювати бренд разом зі спільнотою і футером, який кличе до неї доєднатися.

Wireframe of the home page
Wireframe of the product page
End of the home page: first order discount, community and footer

Факти про проєкт

Клієнт
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 або при отриманні.

Готові
працювати разом ?

    Привіт! Мене звати . Мені потрібен Залюбки обговорю проєкт Хочу поспілкуватися
    електронною поштою