

Connecting people is the heart of Hopin. All of their products bring people together around experiences. Thanks to us it is possible.
Extremely successful all-round virtual event platform to make people feel closer.


Reception
Our exploration began by introducing the idea of Reception – a virtual space not unlike an actual reception, where the user has access to information on an event’s speakers, its schedule and is free to chat away with any other onlookers in-between talks.Providing a neat summary of a meeting, the goal behind Reception was to be a self-explanatory, immediately intelligible run-through of a user’s day.


Stage
The name says it all -- the stage is where it’s at. Combining a user-friendly video stream of the speaker (or speakers) with a handy chatbox, Stage casts the spotlight on those doing the talking all the while keeping the product’s numerous features neatly on display. Our goal was a seamless experience between watching the talks, discussing them with others and exchanging views.
Whitelabel
With versatility at its core, one of Hopin’s most unprecedented features is the flexibility of its look. Designed in a manner of a whitelabel solution, the app’s visual appearance and its feel can be easily adjusted to accommodate the host’s own branding. It really is your meeting across the board.


Mobile
Seamless was what we aimed for throughout the Hopin experience. Each of the product’s features was being designed simultaneously to cater to both mobile and desktop users’ needs. Hop onto a meeting on your laptop and take it with you on the go – we promise you won’t notice any difference.






Design system
Providing intuitive building blocks for all future designers to come, we’ve created a collection of repeatable components and a set of standards that guide their usage. Our design system combines all the assets anyone working on the team will need to ensure seamless onboarding and coherent design throughout the client’s range of products.


Timeline
From kick-off to ready-made product, working on Hopin took us a mere couple of months. Not bad for a double unicorn is it? It was only 8 months post launch that the platform became the fastest-growing startup in history of Saas.
Discovery
Clocking in at just 5 days, we kicked off the initial stage – or Discovery – with a brainstorming session with Hopin’s founders. Next steps to tick off were market research and moodboard phase.
Design
This stage is a bit of a trial and error. Having attempted several UI designs internally, we arrived at our final direction for the product.
Support
Predominantly design system-led, this stage involved developing the product further and broadening its range of features.





Evidence

