Case Study – Product Design

Toki

Managing the Complexity of Modern Business Meetings

Introduction

Toki is the product of a self-defined graduate capstone project, consisting of 10 weeks of research and insight generation plus 9 weeks of ideation and design iteration, culminating in a high-fidelity prototype, UI specification, and a presentation to 300+ members of the design community at the Seattle Public Library.

My Role

I worked alongside my two teammates, Xinbei Hu and Can Zhao. I played a key role in user research, ideation, storyboarding, stlye & branding, and refining UI elements and design decisions.

Tools Used

Sketch
InVision
Flinto
Photoshop

The Challenge

How might we manage the complexity of modern business meetings by capturing important moments for multi-disciplinary attendees?

The Problem

After 10 weeks of research consisting of surveys, in-depth user interviews, and expert interviews, we identified three consistent problems across the various types of business meetings.

It is difficult to bridge knowledge gaps among attendees.

It is hard to keep track of conversations within the
meeting.

It is cumbersome to remember the context of discussions that occurred within the meeting.

Illustrations: Xinbei Hu

With these findings framing our potential solution, we strived to design a content neutral solution that could be applied to meetings in any business environment– we wanted to create something that people could use whether they have a team meeting at their tech company or a board meeting at a law firm.

The Solution

Toki is an automated documentation tool that manages the complexity and increases the value of business meetings. Toki uses existing voice recognition technology to listen to important moments in meeting conversation. Toki then translated these moments to personalized actionable items for attendees to access and interact with during and after the meeting.

How It Works

Toki uses speech-to-text technology to parse conversations during meetings. Toki marks important moments as decisions by listening for trigger words and phrases in conversations such as: "can you do…" "follow-up," “due date,” etc.

Toki is deployed on smart speaker systems such as the Amazon Echo family, Google Home, and Apple HomePod.

Toki During a Meeting

Mark Decisions or Actionable Items on the Timeline

Unlike rolling transcripts that are distracting and cumbersome to read, Toki encapsulates decisions or actionable items as “moments” on a timeline for attendees to view on the spot.

Augment Note-taking with Relevant Transcripts

When a meeting attendee takes a note during the meeting, Toki suggests relevant pieces of meeting conversation to attach to the note, enhancing the context of the note.

Public and Private Notes Options

Toki offers private and public notes options. Users have the ability to make a note visible to their eyes only or all meeting attendees. If a user wants to make a private note public, they simply drag the previously recorded note from the private section to the public section.

Toki After a Meeting

Provide Context of Decisions and Notes

Toki allows users to access meeting content after the meeting is over. Users can expand notes and moments to see relevant information such as people involved, due dates, and the conversation that occurred around the given note or moment.

Allow Users to Filter Moments

When accessing a meeting aft a later date, users have the ability to simplify the timeline by filtering content based on attendee.

Provide Screen Recordings of Attendees Asset Sharing

To increase access and efficiency, users are able to access screen recordings of presentations or assets that were presented during the meeting.

Accommodate Second Thoughts About Decisions

If someone wants to contest a desicion, they can simply "push back" by tagging a colleague and providing a reason why that moment may not be of importance.

The Process

Our initial approach consisted of understanding the scope of our design space - meetings in modern companies.  We explored this problem space through a variety of research methods– competitive assessments, surveys, secondary research, semi-structured expert and user interviews.

After research and synthesis, we moved on to ideation and prototyping. Once we tested and evaluated our concepts and prototypes, we refined the final design.

This section of the case study shows the methods and process we took in creating "Toki."

Research

Competitive Assessment

In order to better understand our problem area, we conducted a competitive analysis of 8 existing tools that either function within the working environment or focus on improving the meeting experience.

We analyzed Asana, SharePoint, Confluence, LessMeeting, Voicera, Quip, Meetin.gs, and Basecamp. These applications were examined for their features, information architecture, and user interface.

Surveys

The survey was distributed via e-mail and social networks to those who are currently working or have working experience in the United States. The survey also served as a screening to recruit users for interviews and testing.

What we wanted to understand

The survey was conducted to gain an understanding of people's perception of their own meeting experiences.

What we found

Our survey results (based on 200+ responses) showed that multidisciplinary meetings occupy at least 20% of all the meetings respondents attended last month. In response to the most common challenges of meetings, 43.3% chose “keeping meeting focused and on track” and 38.3% chose “coming to decisions”.

Expert and User Interviews

After synthesizing our survey results, we proceeded to engage in user interviews. Per the survey responses, we felt that there was much to be uncovered in the space of communication in meetings that involved people of varying levels of knowledge. We selected 12 survey respondents and reached out to a handful of experts in the fields of meeting design and organizational science in order to get more intimate, experiential knowledge into this problem area.

Experts

Our experts included employees from the Microsoft Evisioning Center and Kevin Hoffman, a leading expert on meeting design. The experts helped us identify problems with current approaches to meetings while sharing their personal experiences with meeting pain points.

Users

With our content neutral mentality, we intentionally selected participants with varying backgrounds and geographical location. Selection was based on open-ended responses in the survey. Our user interviews helped gain intimate knowledge into the pain points within meetings as well as an understanding of some of the consistent problems.

Synthesis

We created an affinity diagram to organize and synthesize the interview data.
The blue notes represent themes of findings; yellow notes represent evidence from users; red notes represent insights.

Synthetic Model

To represent our findings, we developed a synthetic model. The model illustrates the problem of fluctuating engagement levels within meetings that are a product of distraction and knowledge gaps. We developed three personas to illustrate this paradigm.

Diana
Facilitator

Diana's engagement level is relatively steady throughout the meeting.

Sean
Contributor

Sean's engagement level is high when he presents content and answers questions.

Keith
Uninformed

Keith is not familiar with Sean's content and contributes to divergent discussions after Sean's presentation.

Animation video credit: Can Zhao
Design Principles

After synthesizing our research and identifying our problem space, we formulated a set of design principles to take with us to ideation and prototyping.

01
Increase engagement during the meeting.

The solution should prevent attendess from multitasking during meetings.

The solution should find a way to encourage attendees’ individual input.

02
Bridge the knowldge gaps between attendees.

The solution should create a collective resource that everyone can refer to.

The solution should make sure everyone understands a little bit about each others’ discipline to make an informed decision.

03
Promote individual awareness of context

The solution should provide context during the meeting to help attendees to be aware whether they are off topics or not, and help them to stay on track.

The solution should inform the attendees the current state of the meeting.

04
Optimize individual expression.

The solution should help attendees testify disagreements through a concrete representation of each other’s understanding.

The solution should help attendees to express their opinions to be understood by other people.

05
Facilitate independent comprehension of the meeting’s content

The solution should make sure each attendees walk out with an actionable item.

The solution should document important moments for each attendee in order for them to reinforce attendees’ personal transient memories as trackable data.

The solution should provide resources for future reference.

Ideation and Evaluation

Concept Generation

We sketched out 108 concepts total. From the 108 initial concepts, we narrowed down to 5 concepts to move forward with prototyping.

Down Selection Criteria and Rationale

We narrowed down from 108 concepts to 5 concepts based on the principles of viability, desirability, and feasibility, and made paper prototypes for the 5 concepts.

After testing the paper prototypes with 4 designers and 1 engineer who work in tech companies, we reached three insights to drive our final design direction.

01
Self-documentation can distribute accountability to each individual and thus can be useful in the future.

02
While auto-transcription of meeting conversations can help attendees trace context, reading long transcripts is distracting during meetings.

03
Whiteboarding and other forms of assets sharing (rather than slides) are common especially at the early stage of a product cycle.

Prototyping

Based on the results of the low-fidelity prototype testing, we revised our concept to be an "interactive timeline," and used InVision to build our mid-fi prototype.  

We tested the prototype with 2 designers and 3 product managers (age 25~50).

What We Wanted to Understand

How our target users would interact with the prototype

Their insights on the concept of an interactive timeline

During Meeting Findings

Three out of five intended to type notes under “Notes” section and ignored the button "Mark Notes."

Three out of five thought it would be too much work to click, highlight, and make notes during meetings.

Four out of five participants and didn’t realize the differences between “Mark Moment” and “Mark Notes.

Three out of five participants did not notice the collapsing button when requested to collapse the timeline.

Post Meeting Findings

Three out of five had trouble returning to the timeline to click notes. They’d prefer to click the timeline and see notes and details of the moments on the same page.

Three out of five had concerns about overcrowded content on the timeline. They wanted to filter for specific person or certain time range.

Two participants thought the notes were others’ notes because they’re under different names.

Two participants found it acceptable to have access to complete transcriptions of meetings. Three participants had privacy concerns. Only seeing moments of transcriptions instead of the complete transcriptions in “moments” might reduce such concerns.

High Fidelity Prototyping

Through our medium fidelity prototype testing, we realized that we needed to:

Unify the experience of approaching sections (timeline, notes, and transcriptions.)

Improve the visual communication of UI elements.

Minimize the efforts to make personal notes and learn context during meetings.

Modify the flow of accessing a previous meeting.

Reduce privacy concerns of auto-transcription.

Findings

1. The timeline lacks clear visual cues for users to recognize “moments” and “public notes.”

2. Users cannot tell whether the avatar photo represents a task owner or an assigner of the task at a glance.

3. Users’ perceptions of color labeling vary across roles and companies.

Final Prototype

User Flows

To represent the product and showcase the main features, we developed a user flow.

User Flows created by Can Zhao
Visual Specs

Final Thoughts

Lorem Ipsum

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."