Categories
Case Studies Forms Mobile

UI/UX case study: Hybrid event platform for mobile.

View the original post

Detailed documentation of the process and approach that was taken to create this mobile application.

Background Story

A few months ago while attending an online event, I met some interesting people with similar interests. After the event ended, it appeared that I can no longer text them. The first thing that came to my mind was “why do I need to move to another platform to stay connected is it good for the app user base?” so naturally I started exploring other online events platforms after a while it was clear that there is almost no such platform exist that has chatting feature after the event has ended not only that I saw a lot of flaws in them, there exist almost no platform that provides hybrid events i.e the event one can attend online as well as offline, not only that there are only a few event apps that exist and only one that has hybrid events. After talking to other people who generally attend events I came across these problems.

What is Treffen?

Treffen is a hybrid event app that allows users to attain events offline and online simultaneously. The name translates meet up in german.

👀Problems

  • After doing research I found that people don’t visit event platforms, whatever event the users attend they get to know about it through social media ads or through suggestions which is the main reason why event platforms have a lower user base compared to other web apps.
  • Navigating inside the events on the web is easier but there are so many things inside an event it is comparatively tough to implement everything in a mobile app.
  • how do we quickly navigate from the inside of the event to the marketplace and quickly navigate between different events?

Deliverables

I have mostly focused on creating 2 different user journies.

1. Surfing through the event marketplace to booking an event.

Users can scroll through the list of events, sort and search them based on filter, connect with people, chat with them, see events created by the people they follow and create their own event.

2. Look and feel for the hybrid event.

Contains Reception which has event details and sponsors list, number of participants and their list, event speakers, booths, stages which have a mainstage where the main event is happening and backstage where different booths are live and users can interact one on one with each other or engage in a group meeting.

🔍Research

Before jumping directly into the design it was necessary to understand what other online event apps provide and how they work, few questions arise such as:

  1. what are the most important things in an online event?
  2. How do users generally get to know about events?
  3. Do users browse through the event marketplace?
  4. How can we interact with people present on-site while we are attending the event online?

To get the answer to these questions I contacted a few more people and asked what do they seek from an online event what is important to them and what is not, Showed them the journey of competitors and what they like in them and whatnot, after gathering some data through interviews it was time to get the data on graphs and make data-driven decisions.

Here are the results of the questions asked to a group of people:

After gathering data from the users it was not time to do some competitive analysis.

I went through 10 different online event platforms CMX Summit, Adobe events, Hopin, Eventbrite, Collison app, Evolve, Hubilo, GlSR, Smashup & Spotme.

Noted their patterns, data, and flow. A few of them have some really good features like group chats, Levels, and many more. I wanted to keep things simple for the first draft and decided to go with some limited but important features.

😀User Personas.

Based on the user interviews and research I have designed 3 personas who are the potential users of this app.

💡Information Architecture.

https://medium.com/media/93b34beeead6f01d9015494ade1acb65/href

🖊WireFraming.

Before getting on Figma I started with sketching and did a lot of iterations. Few of them were looking good on paper but were not practical in the long run. Designs were changed a lot in the end product.

📝Iterations.

I follow the atomic design system so I started with creating smaller components such as user detail cards, navigations, event cards, and so on.

📱Final Design

So without wasting much time here is the final prototype.

https://medium.com/media/91a486e3d5571b93bab158bcb8bd1851/href

Note for PC users: Press Z or select scale down to fit from the options menu on the top right corner

For Mobile users: Click on the prototype and use it on a new window for a better experience

This design does not contain all the screens and only follows the two main flows.

Hooks

To motivate the users to attend more events, I have introduced T-coins they work like a digital currency that you can only gain by buying more tickets. Not only that the users can even make their payments using them.

The main purpose of this app was user engagement, so to make the users keep visiting the app I have allowed in after-event messages they work similarly to any other messaging apps.

The users would get notified when an event is created by someone they follow.

👓Conclusion & Learnings

After completing the designs I’ve learned that reviews and iterations are really important even when you are done with all the prototyping getting designs tested getting reviews and improving the product is what makes the product successful.


UI/UX case study: Hybrid event platform for mobile. was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.