case study
A virtual event platform — product development
Roles: UX/UI Designer, Illustrator (demo)
Challenges: customizable B2B product, gamification, multiple user patterns, onboarding
Introduction
Nowadays, when more people
Our client provided a customizable virtual and hybrid event experience platform for team and corporate events of up to thousands of attendees.
They required a solution to keep users engaged before the start of the event.
They approached us with the idea of creating a gamified "lobby" where visitors could participate in simple activities, communicate with each other, and get to know their colleagues and partners.
Our client provided a customizable virtual and hybrid event experience platform for team and corporate events of up to thousands of attendees.
They required a solution to keep users engaged before the start of the event.
They approached us with the idea of creating a gamified "lobby" where visitors could participate in simple activities, communicate with each other, and get to know their colleagues and partners.
Our goal was to develop a platform where users could navigate via a map, visit different locations, and interact using mics and cameras. This involved developing user patterns and edge cases for developers while considering a wide range of personas and their technical requirements. Additionally, we had to ensure that the onboarding process was not overwhelming while still explaining what users could do on the platform.
User portrait
Mostly regular corporate wor
- Communication Problems: Virtual events often rely heavily on digital communication tools, which can sometimes lead to miscommunication or technical glitches. Poor audio or video quality, delays in message delivery, or difficulty in navigating virtual platforms may hinder effective communication among participants.
- Technical Difficulties: Technical issues such as poor internet connection, software compatibility issues, or device malfunctions can disrupt the attendee's ability to fully engage in the virtual event. This can lead to frustration and may result in missed opportunities to participate in important sessions or activities.
- Engagement and Interaction: Without face-to-face interaction, virtual events may struggle to foster the same level of engagement and interaction among participants as in-person events. Attendees may feel disconnected or disengaged, leading to decreased participation in discussions, networking sessions, or interactive activities.
- Distractions and Multitasking: Working from home or another remote location during the virtual event can expose attendees to various distractions, such as household chores, family members, or other work-related tasks. This can make it challenging for participants to stay focused and fully immerse themselves in the event proceedings.
- Lack of Networking Opportunities: Virtual events may lack the spontaneous networking opportunities that often arise during in-person gatherings. Attendees may find it challenging to initiate conversations with colleagues or industry peers, resulting in limited networking and knowledge-sharing opportunities.
Competitor analysis
Many of our competitors do not differentiate between small and large businesses, and their business applications offer combined functionality.
We conducted research on our competitors' choices in functionality and how they implement it.
We conducted research on our competitors' choices in functionality and how they implement it.
Screenshot from the competitor analysis board
User scenarios
and functionality
and functionality
We started by revealing 11 user scenarios and deconstructing them into 44 features. It took multiple iterations, including stakeholder interviews, scenario and feature development, and stakeholder validation.
The resulting scenarios and features were then divided into three priority groups: "green," "yellow," and "red." Next, we consulted with developers, and the vision for an MVP was nearly complete.
The resulting scenarios and features were then divided into three priority groups: "green," "yellow," and "red." Next, we consulted with developers, and the vision for an MVP was nearly complete.
Scenarios of the first touch
During the development process, we discovered that all user interactions with the application were overly formal. For example, clients had to fill out a form to connect to the mobile application, but the form was difficult to locate, and a bank employee had to activate the use of the mobile application.
We examined the current scenario, posed questions about it, and designed a target process to negotiate with the security service that initiated most of the formalities in the current process.
We examined the current scenario, posed questions about it, and designed a target process to negotiate with the security service that initiated most of the formalities in the current process.
A diagram that I have developed during the research
Search for the appearance and main screen’s composition
Displayed below are some attempts made to design the main screen.
Initially, "Search" and "Stories" features were included, but they were later removed since they were rarely used.
Ultimately, we decided to hide the account balance by default and only show it when the user clicks on it. This was to prevent nearby people from seeing the account status when the app is opened.
We also considered a bottom menu with a varying number of segments, but eventually settled on a menu with three elements that could be switched by swiping.
Initially, "Search" and "Stories" features were included, but they were later removed since they were rarely used.
Ultimately, we decided to hide the account balance by default and only show it when the user clicks on it. This was to prevent nearby people from seeing the account status when the app is opened.
We also considered a bottom menu with a varying number of segments, but eventually settled on a menu with three elements that could be switched by swiping.
Search for color schemes for graphs and diagrams
The color palettes used to display data must be easily readable, even for people with color blindness.
To ensure accessibility, we searched for different palettes, each designed to provide enough contrast.
To ensure accessibility, we searched for different palettes, each designed to provide enough contrast.
Different color palettes that were tried on
Design system
The mobile design system was derived from the desktop app’s system, which was simplified and enhanced. Certain components were designed specifically for mobile, while others were adapted from the desktop version.
Date picker started as a mobile component but later was updated to be a universal one
Transition to the development
Initially, we had to establish and assess the design system components. To achieve this, I created a table that listed all the components, allowing us to keep track of their development status for both Android and iOS. The table also served as a platform to gather ideas and tasks concerning the design system.
We presented the app in Figma, where both the target and MVP versions were illustrated. To support the app flows, we utilized navigation arrows and comments.
We presented the app in Figma, where both the target and MVP versions were illustrated. To support the app flows, we utilized navigation arrows and comments.
Results
In the end, the MVP included 7 user scenarios that allowed users to monitor their company’s financial information, including account balances, payment statuses, statements, and analytics for various time periods.
However, it was challenging to negotiate with the security service to ensure the confidentiality of users' sensitive information. Additionally, the backend had some legacy issues that slowed down request processing. To overcome these challenges, we simplified some of the flows during the MVP stage to release it quickly and gather feedback and data for further improvements.
However, it was challenging to negotiate with the security service to ensure the confidentiality of users' sensitive information. Additionally, the backend had some legacy issues that slowed down request processing. To overcome these challenges, we simplified some of the flows during the MVP stage to release it quickly and gather feedback and data for further improvements.
