Vivici

A scalable design system and a reference-based CMS architecture, with micro-interactions that lifted sales by 35%.

Role: Webflow expert
Type: Webflow site
Result: +35% sales and 20% less development time.

The problem

Some pages were already built and the client wanted to scale the project.

They needed a CMS architecture that could reference several collections, together or separately, for their products (for example a featured product), and a far more interactive UI than the static one they had.

How I solved it

Client-First class naming that is easy to maintain and scale, plus a design system that cut development time by 20%.

A reference-based CMS: authors can be attached to products, and the featured product updates itself whenever a new one is published. Blogs use multiple references to link products, authors and featured posts, and are built so a post can include custom code: custom buttons that go to forms, external pages or PDF downloads, to capture more leads.

Animations and micro-interactions placed at strategic points to increase leads.

What I learned

Interactions and micro-interactions help the conversion rate of product pages. Visitors who play with a site feel more drawn to it, and when they replay an animation to see what else is in that section they do not skip the copy, which is what drives the decision to buy.

Built with

Webflow
Client-First
GSAP
CMS references
Design system
Custom code
Interactions