Design Process

My team members and I in this process were UX designers & prototyepers. Comming from academic background, my special comtribution was to look for literature support to validate our hypothese and strengthen the credibility of our final solutions. Overall, we completed the design proposal within 5 days from the research to the prototype design.

1. Background Research

To understand the context of the problem, the users' background, and the needs of the stakeholder, ACC, we conducted background research. Based on the findings, we summarized common user journey & user types in general, and prioritized the design problems.

Screenshot of the data collecting process on FigJam

The Stakeholder's Needs

Our stakeholder, ACC, a NPO that empowers and celebrates Asian talent by showcasing meaningful
stories and facilitating collaboration, had launched their digital product named "Acc Magic" to help organizations slove problems by online solutions. Thus, the needs from ACC were not only focusing on product improvement but also on helping Asian groups grow by all the possible methods. With this point of view, we believed fundraising activities were one of the most effective ways to help.

General Event Journey

To get deeper insights from the interviews, we explored the context by sketching the general user journey through blogs, Youtube, websites that had held online events, and academic literature.

Among the above resources, one academic paper, summarizing 56 interviews, categorized hybrid event process into three stages and a list of tasks in each stage. The process included "Pre-event Online Practices," "Connecting & Recruiting Practices," and "Reflecting & Relating Practices." The last stage inspired us to think more about how the users would reflect after the events.

Meanwhile, we also concluded the the most common process of offline events from a number of past offline events. More precisely, the event information we looked for was more about fundraising events than other kinds of events because the task of fundraising was the most reason why their clients host the events accrording to the information we learned in the previous studies. The process of offline fundraising events were as follows:

1. Reception (with Silent Auction lasting until the end)
2. Dining
3. Entertainment (music shows / social dance)
4. Live Auction (usually synchronizing with 3.)

The key insight we extracted from the research was that most virtual fundraising events only digitalized the process, meaning moving the entire process from offline to online, without optimizing the holistic experience and human connections. For example, hosting online presentations and distributing sponsor materials in digital formats only covered the top of the iceberg. There was a huge space of untouched areas and interactions to be optimized.

User Types

After exploring the context of virtual events, our next step was to figure out different user types and prioritize them with the impact they would make. The categories were listed in the belowing.

1. Host(s) that holds the event
2. Speaker(s) during the event that gives speeches
3. Individual participants that support the event or the host
4. Business sponsors with marketing strategies

Our Design Focus

Based on the findings above, we decided to dip into the experience during the event - especially for speeching giving part, for the reason that it was the most apparent distration moment for users due to the online enviroment based on the previous literature review. Our target users were the speakers and the participants since we would like to focus on the scenario during the event.

2. User Interview

Due to time limitation of the hackathon, we only interviewed two speakers within our team. We also did more background research on the participants' side to get boarder ideas on this issue.

On the speakers' view, the primary paintpoint was "insecurity of the speaker not knowing how the listeners perceives his/her messages." In one word, the speaker cannot receive instant feedback while speaking. For example, when giving the presentation with screen sharing, the screen of the speak were completely covered by the presentation that the speaker lost the messages from online chatroom and couldn't see the participants' screens.

On the participants' view, the lack of people connections made them hard to be fully concertrate on the whole event. This painpoint resulted from HCI issue - how to make the interaction between the computer and the user feel more natural.

We formulated two key HMWs based on all the data we learned from the research:

How might we make the speakers feel secure while giving the speech?

How might we give the participants immersive experience from the event?

3. Brainstorming

To get innovative ideas for solutions, we ran several rounds of brainstorming within the team. The process of this section was, firstly, brainstorming all the possible solutions and writing them down on the stickers, and secondly, categorizing them with the value, timeline, and technology requirements. In the end, we prioritized the solutions by feasibility and the extent of problem solving. Below were the three solutions we proposed.

Process of brainstorming on Miro

Solution 1 : Simulate Face-to-face Interactions

To make the interactions more like the offline ones, we proposed that using AI technology to create bi-directional eye-contact betweenthe speaker and the “Yes Audience.” The Yes Audience meant the audience who resonated the most to the speech.

To be more specific, AI would detect facial expressions and body-language to identify different reactions among the audiences, such as being curious, confused, excited and focused. For example, when an audience kept nodding his/her head and stared straight into the presenter’s eye, showing that he resonates a lot to the speeches, AI would automatically identify him/her as the “Yes Audience” and placed his/her screen on the "eye-area" of the speaker’s screen with facial highlights, giving the speaker an instant and positive feedback.  

Solution 2 : Elevate Sponsorship Experience

To improve sponsorship experience and also make this section more effective, we came out the ideas with the insights to "the art of appreciation" and "relation between commercial compaigns and the participants."

For the individuals,we designed the donor spotlight session to show instant appreciation, with the donation progress bar to visualize achievements and encourage every participant to donate together towards a greater cause.

For the businesses, we designed interactive sponsor sessions. The solution was creating an game-like activity that the participants were passing around the balls with sponsor materials on it. This was actually inspired by the crowd wave sessions in concerts, where the audience move together to pass on an object. By involving participants in the fun and interactive games, the participants would feel that the campaign was more relevant to them thus raising engagements and developing a positive sponsorship experience.

Solution 3 : Create Immersive Social Gatherings

To make up for the lack of real-world human interactions, we created a dancing session in the virtual events, inspired by the concept from Soul Train culture which encouraged an upbeat, exciting, and vibrant vibe. By doing so, not only traditional events/galas had social dance sections, but also the virtual ones did.

4. Sketching Ideas

The next step was to visualize the three abstract ideas I mentioned above. Our sketching tools were a tablet and white papers. After we finshed the sketchings, we projected them on the wall so that we could make sure everyone was on the same page.

Photo of the discussion process

6. Wireframing & Prototyping

Then, we co-created the wireframes of the three solutions through Figma before jumping into UI design and the prototypes. The prototypes, which were shown on the beginning of this page, presented how our concept of solutions looked like.

Result

We received a lot of resonances and feedback from the listeners during our pitch - especially in the part of "eye contact." However, it was also the part that most listeners misunderstood. They thought "the way to make eye contact is to look directly at the camera lens" instead of our idea "switching the position of participant's screen to the area below the computer lens to simulate real-world eye contact."