Задача
Продуктите Retap са дело на трима датски ентусиасти, които мечтаят да направят света по-добър, като помогнат на хората да намалят пластмасата в ежедневието си. През 2009 година те се обединяват и опитват да изобретят най-добрата до момента в света стъклена бутилка за вода - като материал, форма, технология, екология. Една година и много дизайни по-късно, през лятото на 2010 г., пускат Retap Bottle.
Тя прилича много на капка вода и заслужено е отличена с няколко световни награди за дизайн и екология - The Red Dot Design Award и Promotional Gift Award през 2011 г, както и Good Design Award през 2012 г. и ECO SKANDINAVIAN AWARD.
Вярваме, че със своята елегантност, изтънченост и иновативност, бутилката Retap заслужава подходящо онлайн представяне.
Процесът
Създадохме Landing страница, на която интерактивно и с помощта на 3D модели на продуктите, да можеш да разгледаш своята бутилка, да я персонализираш и поръчаш.
Направихме, така че потребителите да имат възможност в реално време да сменят цвета на своята избрана капачка или калъфче и да виждат как реално биха изглеждали те на бутилката. Разбира се, цветовете са ориентировъчни.
Оптимизирахме целия процес в няколко стъпки:
1. Избор на размер бутилка (0.300л, 0.500л, 0.800л)
2. Избор на цвят на безплатна капачка
3. Опция за добавяне на калъфче и избор на цвят
4. Преглед на поръчката
5. Завърши поръчка
По време на цялото преживяване по създаване на своята Retap бутилка, потребителите имат възможност да научат повече за продукта и неговите аксесоари, при преминаване с мишката през ховър полета.
На последната стъпка от конфигурирането на продукта, има възможност за разглеждане на бутилката в 360°.
След като си създал перфектната за теб бутилка, можеш да преминеш към бутона “Завърши поръчката”, който те отвежда директно в сайта на Retap, където можеш да си я купиш.
Предизвикателства, пред които сме се изправяли в процеса на работа
Едно от предизвикателствата, с което се сблъскахме, беше да направим 3D модела на бутилката достатъчно реалистичен, но и оптимизиран, за да не появлияе негативно на скоростта на сайта. Пробвахме доста варианти, докато постигнем баланса между бързина и реализъм, особено когато имаме в предвид, че сайтът трябва да работи перфектно на мобилни устройства, без затруднение.
Интересни факти
Анимациите на 3D модела се случват изцяло с GSAP и Scrolltrigger, което ни дава пълен контрол над това какво се случва на отделните резолюции.
Отраженията върху бутилката са постигнати с т.нар Cube map за Three.js. Това са 8 снимки подредени в кутия, които излъчват естествена светлина. По този начин се избягва използването на тежките изкуствени светлини, които Three.js предлага.
Цветовете на всяка капачка и калъфче винаги преливат от стария цвят до новия избран. Този подход придава много по-завършен вид при смяна на цвета.
