Hopin is an online events platform where you can host virtual events that connect people around the globe. Being founded some months before the COVID pandemic hit and forced the world to go virtual, Hopin found itself with a head-start in a suddenly very competitive market. Together with a bunch of super talented designers and engineers, I helped to scale up their native mobile team and deliver quality at speed.

Hopin is an online events platform where you can host virtual events that connect people around the globe. Being founded some months before the COVID pandemic hit and forced the world to go virtual, Hopin found itself with a head-start in a suddenly very competitive market. Together with a bunch of super talented designers and engineers, I helped to scale up their native mobile team and deliver quality at speed.

YEAR: 2021-2022
AGENCY: NOVODA
ROLE: PRODUCT DESIGNER

YEAR: 2021-2022
AGENCY: NOVODA
ROLE: PRODUCT DESIGNER

After auditing the MVP experience and finding a number of inconsistencies between Android, iOS, and web, I started building out the design system to help designers and engineers move quicker. 

After auditing the MVP experience and finding a number of inconsistencies between Android, iOS, and web, I started building out the design system to help designers and engineers move quicker. 

Hopin design system and component library

Hopin design system and component library

Working through the entire app we cleaned up the UI, fixed errors, and slowly but surely improved the look and feel. We documented the shared styles and components in the debug version of the app as a live repository of up-to-date design.

Working through the entire app we cleaned up the UI, fixed errors, and slowly but surely improved the look and feel. We documented the shared styles and components in the debug version of the app as a live repository of up-to-date design. 

Auditing the current UI with suggested improvements

Auditing the current UI with suggested improvements

Ensuring the designs were built to scale was a big improvement from the MVP. It lets us be more inclusive and better prepared to keep rolling out to new markets – regardless of language, reading direction, screen size, text scaling, or other use of assistive technology.

Ensuring the designs were built to scale was a big improvement from the MVP. It lets us be more inclusive and better prepared to keep rolling out to new markets – regardless of language, reading direction, screen size, text scaling, or other use of assistive technology.

Scaled text example with longer translations on a small viewport

Scaled text with longer translations on a small screen

We also developed a robust colour system to let organisers theme their events with minimum effort. For the organiser, we simplified the theme down to two colours: A background and accent colour. Behind the scenes, things are slightly more complicated though. We calculate the relative lightness and colour contrast for the given colours to automatically generate a dynamic colour palette for each event that looks good and importantly, is accessible. 

We also developed a robust colour system to let organisers theme their events with minimum effort. For the organiser, we simplified the theme down to two colours: A background and accent colour. Behind the scenes, things are slightly more complicated though. We calculate the relative lightness and colour contrast for the given colours to automatically generate a dynamic colour palette for each event that looks good and importantly, is accessible. 

Custom-themed events using auto-generated palette

Custom-themed events using auto-generated palette

Lead Retrieval

Lead Retrieval

As the world was slowly starting to open up in certain markets, we started to gear up our onsite offering. One important attendee type for the business is booth hosts – professionals who pay big money to have a stand at the venue.

As the world was slowly starting to open up in certain markets, we started to gear up our onsite offering. One important attendee type for the business is booth hosts – professionals who pay big money to have a stand at the venue.

To give these booth hosts a more efficient way to collect leads and follow up with them after the event ends, we developed the Lead Retrieval feature – a QR code scanner that negates the need for long forms or manual capturing of details by reading the encrypted data of the attendee’s ticket or badge. This means the booth host can focus on the personal connection with the attendee. 

Try the prototype

To give these booth hosts a more efficient way to collect leads and follow up with them after the event ends, we developed the Lead Retrieval feature – a QR code scanner that negates the need for long forms or manual capturing of details by reading the encrypted data of the attendee’s ticket or badge. This means the booth host can focus on the personal connection with the attendee. 

Try the prototype

I worked closely with product and engineering all the way from the initial discovery and concept through prototyping and iterating to ship an MVP version of the feature.

I worked closely with product and engineering all the way from the initial discovery and concept through prototyping and iterating to ship an MVP version of the feature.

Wayfinding

Wayfinding

To help people find their way around an unfamiliar event space, we explored a wide range of ideas for in-app wayfinding.

To help people find their way around an unfamiliar event space, we explored a wide range of ideas for in-app wayfinding.

Many organisers already create floor plans, but the only way to show these in the attendee app was by adding an external link, driving users away from the app.

By supporting file upload in the organiser dashboard we were able to quickly add value and display floor plans in a dedicated section in the app, which lets you check the schedule and floor plans side-by-side.

And by adding a link to the venue location we let the user easily plan the journey in their maps app of choice.

Try the prototype

Many organisers already create floor plans, but the only way to show these in the attendee app was by adding an external link, driving users away from the app.

By supporting file upload in the organiser dashboard we were able to quickly add value and display floor plans in a dedicated section in the app, which lets you check the schedule and floor plans side-by-side.

And by adding a link to the venue location we let the user easily plan the journey in their maps app of choice.

Try the prototype

Schedule with linked floorplans

Schedule with linked floorplans

Moving from MVP to MLP we looked at ways to turn simple floor plan images into interactive maps that can surface contextual information like room information and schedule for stages.

Moving from MVP to MLP we looked at ways to turn simple floor plan images into interactive maps that can surface contextual information like room information and schedule for stages.

Beyond locating the stages and breakout rooms we wanted to try to understand and address some of the less obvious user needs.

They are most likely going to a new and unfamiliar space; possibly in a different country. Maybe they feel a little extra nervous going to a big, crowded event for the first time after the pandemic. Or maybe they have a disability which means they have to plan ahead more than other attendees?

Setting the scene and making you familiar with the venue before you even get there could be a really powerful way to create a safer, more enjoyable event experience. One where you can relax and be your best self to learn, network and engage.

Beyond locating the stages and breakout rooms we wanted to try to understand and address some of the less obvious user needs.

They are most likely going to a new and unfamiliar space; possibly in a different country. Maybe they feel a little extra nervous going to a big, crowded event for the first time after the pandemic. Or maybe they have a disability which means they have to plan ahead more than other attendees?

Setting the scene and making you familiar with the venue before you even get there could be a really powerful way to create a safer, more enjoyable event experience. One where you can relax and be your best self to learn, network and engage.