Butter
Butter is a virtual platform designed to enhance online work sessions. It allows users to plan structured session with customisable agendas, run engaging and focused meetings without needing other tools, and quickly recap sessions to find, remember, and share outcomes. The platform offers features like AI-powered summarisation, interactive timelines, and a nuified workspace for team projects and rooms, among others. Visit website →
My role
I’v designed multiple features of the product such as Animated emojis, Grid and Views, Quick Tools, Waiting room, Rating & Feedback, Polls, Trouble shooting, Chat, Notes etc. Furthermore I’v build the Design System. I’v created the brand identity and visual communication AND incorporated motion design and microinteractions to enhance the overall user experience.
Credits
Kasper Andersen
Christoffer Holm Hansen
Butter Team
Product Show off 🎬
To spark curiosity and interest in the Butter product, we developed a general Product Explainer and a Recap Explainer. These vidoes were carefully designed to showcase the product's features and benefits in an engaging and accessible way. I took on full responsibility for the creative process, including crafting the storyboard, designing the visuals, and bringing the concept to life through animation. My goal was to ensure that every element worked together seamlessly to capture the audience's attention and convey the message effectively.
Product Explainer
Discover the magic in just 2 minutes! Dive into the highlights and explore the most exciting features our product has to offer. 🚀
Product features
Among the product features and UI elements I've designed at Butter, I've handpicked some of my favorites: Group photo, Spin the Wheel, Emoji Reaction, Rating & Feedback, End Credits, AI loader.
AI loader and buttons
Concept, Idea, Design and Animation
Recap Explainer
Focus on the Recap: What happens when the session ends? Get a clear idea with this 1-minute Recap Explainer video!
Quick Tools
A series of tools designed to continuously gather feedback during the session to align, adjust, and improve as it progresses. Additionally, they aim to engage users through interactive elements.
Concept, Idea, Design and Animation
Group photo
Celebrate togetherness, even from afar! Take a quick snap of yourself and watch it blend seamlessly into a group photo. Share the joy and connection with friends on social media—it’s that simple!"
Concept, Idea, Design and Animation
Reactions + Eester egg
When three or more participants use the same reaction within 3 seconds it trigger a bigger emoji.
When 5 or more participants use the same reaction within three seconds it trigger an even bigger emoji.
When 7 or more participants use the same reaction within three seconds it trigger an even bigger emoji.
Concept, Idea, Design and Animation
Session Rating and Feedback
A fun, playful and delightful gimmick allowing users to rate and give feedback after the session.
Concept, Idea, Design and Animation
End of session
How can we avoid an awkward end to a session?
End credit
Show data and highlight from session
Encourage people to say goodbye
Concept, Idea, Design and Animation
Design System
Together with the Butter Team I’v I have build the Butter Design System in Figma from schratch. By setting clear guidelines and documentation, everyone is on the same page and misunderstandings are reduced.
Website and social
With its vibrant colors, bold typography, and snappy animations, the website perfectly captures and communicates the soul of the Butter brand. Through visual elements, navigation and engaging motion, we have created an experience that seamlessly blends user-friendliness with creativity. I’v been responsible for the overall visible expression, modules and the nitty gritty microinteractions.
