Make every speaker known at a virtual meeting between offices.
Category
Desktop, WebEx plugin, speaker recognition
Duration
Oct. 2019 - Nov. 2019, 8 weeks
Team
Shilue, Kai, Meg, Kramer
Tool
Pen+Paper, Sketch, Invision, Principle
My Role
-
Worked as an interviewer, note-taker during research and user testing phase.
-
Led storyboards, concept mockups, wireframes, and visual design iterations.
-
Delivered all the visual outputs, high-fi, animations and an interactive prototype individually.
"Gone are the days of
multi-conference room confusion and
team members untangling who said what after a conference call."
Design Problems
Although some meeting tools attempt to provide name information, none can truly handle the most complex situations. When people on one audio line or dialed in from a single room speak to others on a conference call, people are still unable to distinguish who the speaker is, especially for the host. In the remote meetings between offices, this problem becomes more serious.
Design Outcome
By utilizing voiceprint recognition technology, Identio is able to provide information about who is talking no matter the situation. In addition, by integrating with internal organizational charts, Identio can provide contextual information about the speaker such as their job title, contact information, and location.
​
01
Identify the current speaker
Current speaker is presented in the center of the screen. You can easily obtain who is speaking, what's the title of him, which office does he come from.
02
Integrate with organizational chart
Expand our plugin, you can obtain more context information about the speaker, such as title, contact, and location.
03
Save for later contact
People need a shortcut to save contact for later contact. Knowing name is only the first step. Building connection is their real needs.
04
Position of the current speaker
"As a new participant in the office, I want to talk to someone after the meeting in person. I need to know their position."
My challenge in this project
It was the first time for me to design a virtual meeting tool plugin. So desktop design skill is not enough. Cause non-intrusive way and saving space should always be took into consideration to avoid interfering meeting screen, which impacts my design decisions. The conflict of large amount of information and less space is my biggest challenge. Therefore I made many attempts and conducting rapid iterations.
This is how I solve the problem step by step
Process
·User Research
Initial prompt
With our initial idea -- helping people know who is talking to you. We made research plan hoping to understand what situations people need to know names, what they did if forgetting names, and why they need to know names.
Literature review-Understand interpersonal communication culture
I reviewed essays to investigate social and technology background for the ‘interpersonal communication’ culture.
# INSIGHTS
Echo could be used to set up voice recognition. And Alexa will then use that data to create a voice profile.
"Treat everyone with respect" is one of the ground rules in meeting culture.
Calling names makes people feel seen and important.
Reframe the problem
>Understand the context when people need to know names
Going into interviews, the scope was purposefully broad as we wanted to let the potential users influence which direction we would take. We interviewed about forgetting names, note-taking habits, and wearable use for both personal and business reasons.
>Survey: Verify user groups and key problems
After interviewing, we narrowed in on the problem of forgetting names or being unable to identify someone at meetings. There appeared to be a gap where a tool could aid people in achieving this goal.
So conducted a survey that was more focused on our business product direction to see what the gain insight on trends from a larger sample size. Our survey data proved promising for our name remembering and speaker identification tool. Check out my survey framework and main findings from 127 responses.
Understand people who always have meetings in depth
We feel unsure about what's the context of failing to know name at meetings, what's their pain points, and what's their needs. We conducted another 3 in-depth interviews to understand the professionals. (Key insights)
​
Main takeaways
Unable to know who is speaking at the other end and lose the chance to build connection
are key pains.
Define design challenges
Shown below is a summary of the important insights from former research and analysis. From our survey and interview data, we finalized 3 key user problems. Based on those, we defined the start point of the next stage: 3 key design challenges to solve.
·Ideation
The team spent a time-boxed 5 minutes thinking of all the features the product could entail individually before coming together to compare and contrast. Then we,
-
Ranked our solutions with priority.
-
Prioritized which part would make it into first version of the design.
-
Created sketches and storyboarding to conduct concept testing.
Brainstorming
Divergent
Designing a new feature within the Webex experience required us to brainstorm not only the design but how we would introduce this new flow to users. We brainstormed on a whiteboard to generate divergent ideas about necessary features and scenarios.
Concept consolidation
Convergent
Next, I created an impact/feasibility chart to evaluate each idea based on the scenarios. We took many aspects into consideration: development difficulty, impact brought to our product, relevance to our goal, user accessibility. For the convergent brainstorming session, we picked up ideas with high impact and feasibility, and prioritize which parts would make it into the first version of design.
We merged solutions into 2 phases according to user journey. But we are uncertain about how the tool could be set up to fit into people's current meeting process. We came up with 3 design directions for phase 1. We conducted concept testing with storyboards and initial wireframes to inquire about my target users' opinion on each concept.
Design directions for phase 1 - how to set up our tools
We came up with 3 design directions for phase 1. We conducted concept testing with storyboards and initial wireframes to inquire about my target users' opinion on this concept and general design.
CONCEPT 1: PRE-WORK
CONCEPT 2: PRIOR TO CONNECTION
CONCEPT 3: MANUAL ASSIGNMENT
Concept Feedback
In all, 6 concept tests were conducted. There were some trends: the prior to connection version was ranked first by participants 4 times, and the pre-work email was ranked lowest 4 times. Based on these results we decided on a hybrid approach where meeting attendees would identify their audio and video situation before joining the call as in the prior to connection scenario, but could also manually assign unknown speakers once in the call to make up for technical errors.
User Flow Diagrams
After finishing all the ideation of possible solutions, I created a user flow chart to guide me to finish the wireframes of interfaces.
·Design
Design for phase 1 - Identify attendees when setting up
Here I met with a problem. How many people are included in one page at a time when identifying themselves? Combined with our understanding of users through research, I took both of users' walk-in process and efficiency of setting up process into consideration. So I only keep one person to identify at a time to cater for the real meeting process and also make the page simple.
Finally, I used forward button to switch meeting attendees during identifying process because the number of attendees fluctuates considerably in different meetings. .
Design for phase 2 - Identify speakers during the meeting
>Design alternatives
I work out 4 layouts of the main page. Here I met a challenge: Every possibility seems like the potential solution, so how could we choose the right one to start with? I decided to involve participates into the discussion. I showed all the wireframes to them, and listened to what they thought about it.
#1 List view or gird view
From the conversations I found a valuable insight from people’s perception about the page: People would like to know detailed information about their interested attendees so our team abandoned the grid style layout and moved forward with the list style layout to show attendees information.
#2 One column or two column
We designed for Webex online meeting application so we should figure out how to fit into the current meeting process without too much disturbance. Two column could separate users in one office from other offices clearly but not friendly in space. We moved forward with one column layout to take up less space.
Information Priority
First prototype
With the decision from the wireframe phase, I came up with the initial mid-fidelity prototype. However, we are unsure about the information priority we presented to the users. Next, we did first round of user testing to decide priority and also gain more insights to make high-fidelity prototype.
User testing & Iterations
12 participants(who often have meetings) joined our 2 rounds user testing. We tested with high-fidelity prototype. Test plan is attached.
# Iteration1: Separating the current speaker and highlighting in the most striking position
Users would like to know who is speaking at first sight. So we changed the design to highlight the current speaker on the screen. User could still obtained who is the current speaker even though retracting the menu.
# Iteration 2: Simplifying the menu design to make it more intuitive to users
Users are easily lost in switching menu. Our menu is not intuitive enough to indicate what the page is about after clicking. But we are also confronted with the problem of not enough space to give each tab a label. So I adopted an arrow icon to expand or retract our tool instead of a menu, which saves space in the meantime. But users need to scan and scroll a lot. I improved the scrolling drawback in the following design.
# Iteration 3: Assigning unknown speaker in a one step
Users need to use the least time and effort to assign unknown speaker during the meeting. We adopted one step edition at last to assign unknowns. Unknowns are assigned to the right meeting room automatically according to which line they dialed in.
Prioritize the information
Perfecting the interaction
I did 3rd round of usability testing after solving the most problems. 5 participants contribute more possibilities in improving our identification tool. Test plan is attached.
#1 Making it more social
Users would like to check the profile of the speaker after being inspired. Therefore we provide a shortcut to get to profile information directly, which also solves the problem of scanning and scrolling too much.
User would like to check who they liked after meeting. Knowing the current speaker is not enough. Therefore, we provide corresponding feature "checking liked people" for future contact.
#2 Making it more intuitive
Many users did not notice room map and even did not open it at all. So I used a more intuitive color, the same color as each office, to show room map of each office.
Final Design
The following shows our final design after 3 rounds testing and iterating.
01. Set up the tool
Attendees themselves identify through speaker recognition before connection. Voice ID is utilized to login to the meeting.
02. Open tool to view profiles of people you are interested in.
Professionals have the need of organizational charts to understand the speaker better and build further connection. So we designed a dropdown that contains profile information, such as title, contact, office room. We also provide message feature to send a short message to the person you like.
Need & Solution
To avoid interrupting normal meeting, we make our tool easy to retract. Users could expand and retract the tool whenever they want. Retracting the tool does not impact the real-time update of current speakers.
The speaker box at the bottom provides real-time update of the current speaker, which solves the core problem of not knowing names.
03. View the room map to obtain the position of the current speaker.
New people are unfamiliar with several of the other people in the room and have the need of introducing themself after the meeting ends.
Need:
A room map is provided and user can label anyone's position so that they can talk to anyone after the meeting.
Solution:
04. Click on "like" when you are interested in any speakers and save it for later review.
Need:
Users need less scanning and scrolling.
Users do not have enough time to remember names during the meeting.
Solution:
Provide a shortcut of clicking the current speaker to know see the profile.
Give a like and our tool saves the information for you. Users can check the details after the meeting.
·Reflections
What is done well
The team was very flexible when research took us a different direction than our initial idea. Changing from a wearable based social interactions app to a professional meeting tool wasn’t a turn we foresaw, but the team took it in stride and was passionate about making sure we were really following the leads we were getting from our research efforts. The ability to results and individual interpretations to come to a shared direction was a key skill that helped us to succeed.
​
In addition, the product concept went over very well - as was discussed, it was received positively and closed a gap that people could identify with. The team did a great job of figuring out how to prototype and make such a technical, back-end product tangible so that it could be evaluated within the constraints of the project. The last main point to cover is that there was good teamwork throughout the project, with working sessions that proved extremely valuable led by different members of the team, and work divided up based on strengths and interests of the individuals.
​
What is still to do
While the product improved significantly over the three rounds of testing and was well received, there are more corrections and further steps that we would take if we were to continue pushing this concept into the real world. We realize that for an actual product, we would continue finessing, monitoring, and releasing new versions of the product throughout its life, so we have identified some of the next items that would be upcoming in the case that the project continued.
​
· Run tests in the context of a real meeting with multiple participants as attendees, to understand how the product may work in the actual end use environment and test use cases beyond the individual logged into their own laptop.
· Validate idea and concept as soon as possible. Fail fast and iterate faster.
· Define more comprehensive measurements for the goals.​ Explore future features that can be implemented to add value to the product, like additional integrations to other meeting systems, new platforms (mobile, wearable, etc.) and functionality such as transcribing meetings and logging interactions.