360Winery
from vine to wine
A product website for winery management software. It has to make a system with many parts feel simple, and point every visitor at one action: request a demo.
Visit 360winery.com ↗- Client
- 360Winery: software that runs a winery end to end, from point of sale and wine club to warehouse, restaurant and e-commerce
- My role
- Website design, plus the motion, banners and social pieces around it
- Team
- Three designers, front-end and back-end developers, and a project lead
- When
- Early 2024 – end of 2024
- Tools
- Figma, Photoshop; After Effects for the animations, exported as Lottie
A full refresh
the starting point
The old site was in a dated design treatment, and the client wanted all of it redone. The product does a great deal, and the hard part with software like that is explaining it.
The people it is for would rather be in the vineyard than reading about modules.
One long scroll
the homepage in scenes
The homepage opens on a short film, then walks through the product one scene at a time: the modules, why wineries use it, its three modes (cloud, mobile and offline), integrations, the company’s history, clients and testimonials.
Purple from the logo carries the whole page, and the demo button never leaves the top corner.
Scroll inside the frame
Motion with a job
playing live
I made a branded loading animation and small animated icons for moments such as a form going through. They are exported as Lottie files, each under 25 KB, so they stay sharp at any size and cost almost nothing to load.
These are the real files, playing in your browser.
Page loader
Plays while the site loads. It loops, so it never looks stuck.
Form sent
Two glasses clink when a demo request goes through.
Toast
The same clink, for pop-up messages across the site.
Tap an animation to replay it
A banner library
for every page and post
Every page and every blog post needed a banner at fixed sizes for desktop and mobile. I chose, cropped and graded stock photography into one warm, sunlit set, so that dozens of banners read as a family.
01 / 08
Off the site
on social
The same purple, the same curved photo masks and the same bubbles from the site carry onto social. This carousel introduces the product’s services one slide at a time.
01 / 11