iOS + Android App

July 2021

Levelling up the Hopin event app to allow attendees to better plan

Project overview

Hopin is an online events platform for virtual events that connects people all around the globe. Being founded only a few months before the COVID pandemic hit, Hopin quickly became incredibly valuable in a suddenly virtual world.

But once the world was getting ready to open up again, the company needed to change it’s strategy to create new value propositions for hybrid events with both virtual and onsite attendees.

Hopin scaled from 6 to 1000+ employees over 2 years and was valued at $7.75 billion reaching unicorn status.

My role

Product Design Lead


iOS & Android app

My team

2 Designers

2 Engineers

1 Product manager

1 Engineering manager

Video of the final UI

The opportunity

My team was specifically working on ways to make the app more useful for hybrid events and was focused on increasing engagement. To kick our team off I ran various product discovery workshops to understand the opportunity space and align our team to our central hypothesis:

“By giving users early access to the app and better planning tools, they will get more out of the event experience, and thus increase user engagement before and during the event.”

This was backed by widely available research from leading events companies in the world:
51% of attendees (hybrid and virtual) want to plan their day before the event starts and 69% want to plan during the event. Scheduling is in the top 5 most valuable components of a mobile events app.
* (2018 Cvent Edelman Study)

Product discovery process

User interviews

Ideation workshops

Job story mapping

User flows

UI exploration

Hi-fi designs


Usability testing


The challenges

Looking at the competition

One of the first things I did to get an understanding of the opportunity space was to look at the competition and understand how other best in class apps work. This gave me a good base understanding of what users might expect as pairing with research, we found that users tend to use various different event platforms when attending events.

Competitor research in Figma

Defining the opportunity space

The lack of research up front, meant that any work on personas would have been loaded with assumptions, so we focused on the jobs to be done instead.

I created and ran a workshop to map out all of the possible low-level jobs based on the overall job story:

“When an attendee is preparing for an event they want to build their own schedule before or during the event so that it fits their needs.”

JTBD workshop in Miro

Running this workshop with the product trio meant that we could include different points of view from each discipline right from the start. It was also incredibly useful to help us align and make sure we didn’t miss anything. Identifying constraints and questions early on meant that we could highlight any potential blockers and move forwards together.

We prioritised each job story using the MoSCoW method which resulted in 5 key opportunity areas that defined the scope of the MVP release. The product trio had never worked this way before but they really enjoyed how quickly we were able to flag questions and constraints and move forward together.

Ideation time

With a clear scope, we got the wider team involved in the ideation workshop. Making sure everyone is heard was vital to align the whole team around the same vision – and of course we generated so many more ideas!

To set context for the team I took them through the problem statement all the way through research, insights and the job stories board.

Ideation workshop in Miro

After the whole team had voted anonymously on the many ideas we mapped the top ones onto an effort vs impact scale. This gave us a better understanding of priority and helped inform the initial design.

Workshop outcomes

Both workshops helped to:

Mapping out the MVP

To help the team and myself get a better view of what the end-to-end experience might look like, I also created a user story map based on the top voted job stories. Understanding the work that was needed to deliver this end-to-end experience was key to planning and prioritising our roadmap.

This was a very useful exercise for the team and again, taking the team through key decisions was really important and allowed for some healthy inclusive discussions.

User story map in Miro

Design exploration and iteration

Now that we had a plan, all that was left was the trivial task of bringing it all to life. Myself and the other designer decided to sketch out several of the ideas from our workshop to quickly generate lots of different ideas and give us something tangible to reflect on, discuss, combine and refine.

I’m a big fan of pencil and paper as it’s both incredibly quick to do and very easy to throw away and start again. These early wireframes already gave us a sense of the structure and information architecture.

Early wireframes

Early wireframes

As we moved to higher fidelity designs we got a clearer picture of what we needed to validate first in terms of the structure – for example, should we lead with the date first or the tabs? What happens when the event is just one day vs multiple days?

Again, we worked on these design explorations separately first (all of the work below is my own) and then came together in regular crit sessions to discuss and refine our concepts.

Design iterations in Figma

Component design iterations in Figma

Documenting my chain of reasoning for transparency in Figma

Iterating on flows and edge cases in Figma

Throughout the process I shared my designs early and often with the whole team to allow for a more inclusive approach. Using Figma to collect feedback, collaborate and document decisions in context worked really well.

Prototypes and usability testing

While moderated testing with real customers is always ideal, it’s not always achievable in the available time. But that doesn’t mean we can’t find alternate ways.

We had an upcoming event where we’d arranged for the feature to be pilot tested, so with a looming deadline we focused on validating key hypotheses in the shortest possible time. We created 3 prototypes for the most contentious aspects of the feature and ran them as unmoderated tests on, getting results back in just hours. The three scenarios were:

Video of Viewing and adding to My Agenda

Video of Accepting, rejecting and changing a meeting invite

Video of Viewing information from “past” content

We sourced 7 participants from different backgrounds, the main qualifier was that they had all attended at least 1 event in the last 3 months.

The main challenge with running these tests asynchronously was writing clear prompts and questions. We wouldn’t be there to help users if they got stuck, or to probe them further if our questions were not specific enough. Myself and the other designer iterated several rounds on the script internally before going live with the test. The results that came back had a near 100% task completion rate and some very clear, actionable feedback which gave us enough confidence in moving forward into finalising the designs for development.

Implementation process

3 amigos



Design QA




After synthesising the findings and sharing them with the wider team, along with the other designer we moved into creating extensive spec documents in Figma to be implemented. In addition to defining the new UI, I built specific prototypes to show detailed interaction states.

I also helped foster a more iterative approach to the design handover process by introducing a new Design QA step in the process. This was used to not only make sure quality was always at the forefront but also to make sure there was a collaborative partnership between design and engineering.

Before: Original schedule

After: Redesigned schedule

Before the redesign, the schedule essentially just repeated some basic information and it only became available to users once the event started. This didn’t allow attendees to plan ahead, forcing them to figure it all out while the event was happening.

There was also no way to personalise it by building your own schedule. Networking and meetings were nonexistent in the schedule despite being one of the main reasons attendees go to events.

Finally, the schedule did not consider the onsite attendee, lacking vital information like the physical locations of sessions.

With the redesign we’re giving attendees the following benefits:


The feature is currently in build and we’re exploring what the next iterations might include whilst continually getting research and customer insight on our first release.

One iteration we’re currently exploring which aligns with our new hybrid strategy is giving attendees and organisers the ability to see how popular different sessions are.

Video of reserving a seat flow

Closing thoughts

Working at this unicorn startup had a lot of challenges in terms of speed of decision making, pivoting and communication but I feel that I did a great job to help our team stay focused on the task at hand and be an ambassador of a much more collaborative way of working.

Getting input from the product trio and wider team more quickly and more often was a key factor in keeping up the momentum and unblocking ourselves by chatting through design challenges in impromptu crit sessions throughout.