Class : Communication Workshop
Individual work
CONCEPT INTRO
Problem framing
Problem 1: People review an audio interview mainly by listening the audio from beginning to end or reading the transcript(A 30 minute interview could be more than 20 pages of text.). Both methods are time-consuming work.
How people access the information from an audio interview?
Problem 2: People use progress bar to locate the specific information in the interview based on memory, but it is hard to get the exact position.
Design Challenge
How Might We Understand A Complete Interview Without Reading or Listening to All of It?
How Might We Find The Information We Need In A More Efficient Way?
Design Intent
Provide an easy-to-digest overview of the whole story
Find the information we need in an efficient way
Facilitate visual exploration
Memorize information visually
Organize the information structurally
Solution
Audio Map is an audio visualization tool that divide the whole audio information to pieces with different hierarchy. Users can have an overview for the whole streamline, and then select any piece of information they are interested. It provides an efficient solution for users to focus on their interested topic and an efficient way to find specific information.
Take 37 minutes NPR interview video as an example to show how the tools work. The interview is between Terry Gross(NPR host) and Issacson Walter, Steven Jobs. All of the conversation is about Steven jobs.
The content of the talk can be separated into five parts: Role in Apple Products, Business Relationship, Personal Life, Impact on Book, Early days.
The question can be divided to four levels: root question, following question, clarification question and detail question. The data structure is as below.
Interactive Prototype
The Interactive Prototype is HERE.
The DataStructure file is HERE
How to use
Click each circle to expand to the next level until it is the end node. Double click the circle, and it will play the corresponding audio.
Scroll up and down to zoom in and out to view.
The code is based on D3 Library & miso project.
UI Overview
Design Process
