An encouraging onboarding system for finance app that keep the users engaged

My Role

Design Lead
Researcher

Timeframe

08/2022 -
09/2022

Tools

Figma
FigJam

Team

Hongke Zhao
Xue Ai
Judy Dong

My Contribution

Research
User Interview
Ideation
Prototype

OVERVIEW

                    

Problem

After the pandemic, people have become accustomed to working from home. However, many people feel isolated during the process, leading to fatigue,  social disconnection, and reduced work efficiency.

Design Response

We designed Zoom Space, a new feature in Zoom that creates digital spaces for the distributed team to make virtual interactions more human, providing chances to build connections and work efficiently.

More immersive virtual meetings experience

Moving freely in the Zoom space, walking in and out of conversations feels natural and seamless. Say goodbye to meeting fatigue and hello to an energized team.

Online events to build connections with peers

A variety of online events provide a chance and create a sense of belonging.

Collaborate beyond the video grid

Build a connected and productive team with interactive objects like an improved whiteboard function.

RESEARCH

                    

Why Redesigning Zoom?

As a student, I have been using Zoom a lot in the past three years, which provides a lot of convenience for connecting people in different spaces. But at the same time, I clearly feel that the online meetings have also increased the distance between people mentally.

Zoom has launched an immersive view to deal with this demand, but it is more like an enhanced virtual background function, and and it is only suitable for situations with few people.

This gave me my initial idea: what if we incorporate the concept of the metaverse into Zoom and create people a different work experience?

Secondary Research

Competitive Analysis

I first looked into the market, trying to find inspirations and gaps among existing products:

INSIGHTS:

All the platforms aim to create a virtual workspace with more immersive and human meeting experience. However, only Topia and Gather enable users to explore the spaces freely. Most of the platforms still limit user activities within the given space similar to Zoom. Can we increase engagement and participation of the online meeting?

Primary Research

To quickly understand whether this is a problem worth solving, we decided to conduct semi-structured interviews with people around us about their experience using Zoom, and invited them to try the other virtual meeting platforms and offer feedback.

To better draw insight from our interview, we divide the meeting into three stages: before the meeting, during the meeting and after the meeting, and summarize the pain points and opportunity area of each stage.

User Needs

We summarized the research and defined the user needs to guide the design process.

Design Goal

Based on the user needs and the gaps in existing products, I summarized the higher level goals I hope to achieve with the redesign.

More immersive virtual meetings experience

Online events to build connections with peers

Collaborate beyond the video grid

Create a virtual space for users to move freely and interact with others both in and out of a meeting

Host various events in a virtual space as an alternative of offline events and provide networking opportunities

Build in improved functions such as the whiteboard to make the team more connected and productive

DESIGN

             

This gave me my initial idea: what if we incorporate the concept of the metaverse into Zoom and create people a different work experience?

#1 More immersive virtual meetings experience

Having understood the design goals, we started brainstorming and developing ideas that can help me achieve these goals. Eventually, we decided three variations:

Three Initial Variation

I first looked into the market, trying to find inspirations and gaps among existing products:

Users can move horizontally in one scene, switch among different scenes through the map, and click the icon to interact with functions

The virtual avatar can walk around in digital spaces customized by users, which simulate the different spaces of the real office scene

The virtual avatar can move quickly on the plane and joins  meetings at any time. The interaction is simple and comprehensible

Lo-Fi & Tests Iterations

We did three variations of the low-fidelity prototypes for the usability tests in order to scope the potential of the variations and prepare for the refinement design later.

INSIGHTS:

The perspective is more comprehensible
× When moving horizontally, there will be conflicts with the function icon and human interaction

Simulating office environment is interesting
× some people find the customization features cumbersome. × The top view is a little incomprehensible

The movable avatar is more interesting compared with current one
× they hope to have a more interesting scene and more interaction with other people

Refined Design

Based on the feedback from the low-fidelity prototype, we decided to continue with the concept of simulating the offline office environment. We changed the planar scene into an axial form, making the space look more interesting and easier to understand. We also removed the function of customization to make it more convenient to use.

We decided to put the entrance of the Zoom Space function on the home page, which is convenient for people to enter, while keeping the traditional meeting mode for users to choose.

#2 Online events to build connections with peers

We divided the functions into basic functions and meeting functions, and the meeting functions can only be displayed in the meeting.

Outside the meeting

Inside the meeting

Then we focused on the Event function. The initial concept is to place both Meeting and Event under the Calendar function. Users can view or join both the meeting and the event they are signed in the form of calendar, they can also click on the blank time slot on the to add a new meeting or event.

We quickly completed the following prototype for user feedback.

User Feedback

Through the user test, we found that putting Meeting and Event under the same function complicates the use process. Because when people create a new meeting, they often use the default information to start meeting quickly, but for events, more detailed descriptions and banners are needed to attract participants. Based on this, we separated the conference and event functions.

At the same time, most users said that the form of the calendar is a bit too much information, and it looks different from other functions we designed, so we unified the form into a right column that is consistent with other functions.

Refined Design

According to user feedback, we have iterated the event function as follows. Users can browse signed events, explore more event, and create new events.

#3 Collaborate beyond the video grid

First of all, let’s review the feedback on Zoom’s existing functions obtained in semi-structured interviews. Most of their negative comments were related with the whiteboard function, as following:

Pain Points Before Use

· It is not easy to find the the whiteboard function when first use

Pain Points In Use

· Users can only sketch simple things, which doesn’t meet the needs of sharing various forms of files in meetings
· Unable to find who is drawing what on the huge board, especially when there are many participants

Pain Points After Use

· Annotation and whiteboards disappear when screen sharing ends
· The contents can only be saved in forms that can’s be edited again(png, pdf)
· Saved images can be difficult to find

Prototype

In response to the above pain points, we designed the prototype. The whiteboard is embedded into the zoom space function and has the following features:

#1 The created files will be stored and displayed on the whiteboard page  for subsequent use and editing

#2 Other files can be embedded easily into the whiteboard to facilitate discussion and annotation during meetings

#3 Make it easy to locate where others are working on, therefore assisting communication and  cooperation

User Feedback

After completing the initial prototyping, we conducted user test. In general, and users were satisfied with three features of the new whiteboard function, and offered the main feedback:

Most users said that the whiteboard window space is too small, so we changed it to full screen display. Users click on the whiteboard in the conference room to interact and come to the full-screen interface, as if they were actually in front of the whiteboard for discussion.

At the same time, we changed the menu bar to the right side to be consistent with the rest of the functions.

Refined Design

Based on the feedback from the user testing, we iterated and modified some details, such as the types of files that can be embedded, etc., and got the final design.

Whiteboard Home Page

Embedded Slides In Whiteboard

Add Files Into Whiteboard

Following Other User

FINAL DESIGN

                          

Onboarding

Meeting

Chat

Breakout Room

Participant

REFLECTION

                       

Takeaways

Maintain Consistency Between the Old And New Function
This is my first time redesigning an existing product with a large user base and adding a new feature to it. It made me think deeply about how new features can provide a new experience without causing a sense of separation from other functions. Because even if Zoom Space is really put into use, the current meeting mode will still be used for a long time. In this case, keeping some functions consistent can make users feel familiar, and it also encourages users to try and accept new functions.

Next Step

Design More Virtual Spaces For Users
Due to limited time, we only provide users with one virtual space in the existing final design. In the early interviews, we got some negative comments from users on customization, saying that too many options sometimes makes people feel burdened. If having more time, I would like to design more interesting spaces for users to choose, or think about ways to make customization more convenient.