Issuu on Google+

KnowID

Visualizing the ID Methods December 14, 2009 Mehmet Cirakoglu Thomas McCue Elena O’Curry Mike Roy Owen Schoppe


Project Brief Visualize the ID Methods

Our goal for this project was to create a tool that uses visualizations to help users find, internalize and use frameworks within the context of their project. Design and innovation frequently use models and frameworks to make critical decisions, reframe problems, and discover relationships within complex sets of data. Unfortunately, using these models and frameworks—especially within a team setting—poses multiple challenges to designers and strategists who need to move quickly. While models and frameworks are essential to the process, they often create busy work that can slow the process as well. Innovators can waste precious billable time searching for the “right” model to use and struggling to understand unfamiliar frameworks.

DATA VISUALIZATION, FALL 2009

2


How We Got Here Research

Research Process We interviewed 10 users: 4 expert users 5 novice students 1 advanced student Our interviews were focused on understanding how people learn about frameworks and how they actually use them in real life. We also administered a survey to 17 student participants which focused on the range of frameworks most commonly used and the situations that prompt framework usage.

DATA VISUALIZATION, FALL 2009

3


How We Got Here Research

Key Findings Novice users have trouble choosing the right framework for a project and rely on instructors to introduce them to new methods because they find the ID Wiki incomprehensible. More advanced students have an established set of frameworks that they return to again and again. They use the ID Wiki as a reference to remind themselves of a particular method’s structure, but not to learn about new frameworks. Expert users rarely think about frameworks explicitly or refer to instructions. Frameworks become less of a tool and more of a point of view - just another way of thinking about a problem.

DATA VISUALIZATION, FALL 2009

4


How We Got Here Ideation

Workshop We used the design principles derived from our primary research to guide participants through an ideation workshop. We asked our subjects to imagine how different types of users might experience the processes of browsing, understanding and using frameworks and captured their feedback on worksheets and in group discussion. Group Prompts • Help a first-year MDes student understand a framework • Help an expert user find a framework • Help an advanced student use a framework

DATA VISUALIZATION, FALL 2009

5


Where We Are Design Principles

Overall: Text should be secondary to visualizations Browsing: Visualizations should reduce search time Visualization should clearly position role of framework Presentation should provide examples of framework in use Understanding: Visualization should expedite internalization Presentation should provide examples of framework in use Using: Tool should support team use Tool should provide varying levels of guidance

DATA VISUALIZATION, FALL 2009

6


What We Tried Concepts Explored

Browsing Magnet Fish Eggs Aggregate Paths Moving Though Constellations Road Maps / Flow Charts Tagging Bread crumbs Magic Cube Filter

DATA VISUALIZATION, FALL 2009

Understanding Visualizing Case Studies Illuminate Coverage for Personal Growth Process / Knowledge Tutorials Findings / Progress Tracker

Using Version Tracker Augmented Reality Work Spaces Magic Wand Productivity Tracker Projected Empty Frameworks Team / Role / Phase, Specific Tools Data Collection / Consolidation Tools

7


Our Plan Systemic Overview

Identifying the key moments of visualization As the primary focus of the course was that of data visualization, the team sought to clearly identify the moments that presented the most complex data, and would benefit from the application of the principals and methods reviewed and refined during the course.

PROVIDING AND UNDERSTANDING FOR...

UNDERSTANDING 1.0

BROWSING 0.0

USING 1.0 UNDERSTANDING 2.0

MUST SOLVE A PROBLEM

INNOVATION CASE STUDIES

SEARCHES...

TO SELECT A...

PROCESS

CAN REVEAL...

BY USING A...

FRAMEWORK

CREATES...

PROGRESS FRAMEWORK

DATA VISUALIZATION, FALL 2009

FRAMEWORKS

STUDENT TEAMS

MODELS

CAN REVIEW...

THAT CAN BE SHARED BY...

WHICH EXPLAINS USING....

CAN REVEAL...

WHICH FEEDS...

CASE STUDY

MANIPULATING DATA SETS

CASE STUDY DETAILS

WHICH CAN ALSO PROVIDE...

TO SELECT A...

WHICH FILTERS...

ANALYSIS FRAMEWORKS

USING 2.0 (EXTENDING)

PROJECT PROCESS

CAN TRACK...

VERSION PROGRESS

8


Concept Brief Road Map

Navigation A road map doesn’t just tell you where you are - it reminds you where you’ve been and lets you know where you’re going. KnowID is structured to help the user understand what frameworks best fit a project phase and where frameworks have lead in other projects. Maps of case studies reveal patterns and help the user plan for next steps. Changing Direction Of course, road maps are most often needed when the user has no idea where they are or how to get to their destination. KnowID helps novice students get back on the right path so they don’t need to worry that they’re headed in the wrong direction.

DATA VISUALIZATION, FALL 2009

9


Concept Brief Architecture

Interactive tools are frequently arranged as hierarchical layers with specific paths inherent in the structure. Building on the road map model discussed above, we choose to create KnowId on a single plane that we hope will facilitate rapid navigation and allow users to move back and forth within the process. As users become more comfortable with the tool, they can skip over intermediate steps and speed information retrieval.

DATA VISUALIZATION, FALL 2009

10


Concept Brief Breadcrumbs

To reinforce the single-level architecture and aid overall navigation, a small key in the upper right corner highlights the user’s location in the tool. This key maps on to the welcome screen to give KnowId users a sense of where they are in the overall process.

Welcome Bertrand, UNDERSTAND

DATA VISUALIZATION, FALL 2009

USE

Find a framework...

Examine a framework...

Use a framework...

Find a case study...

Examine a case study...

Track your project...

11


Concept Brief Meet Bertrand

Our prototype is designed around the experience of Bertrand, a second year MDes student who is working on a project for the grocery conglomerate Supervalu. He wants to better understand the relationship of certain behaviors he’s observed in his fieldwork, but he’s not sure where to start. All he has right now is a list of everything he’s observed compiled from his field log. We’ll follow Bertrand as he searches for a relevant framework, explores a case study and applies his chosen framework to his own research.

DATA VISUALIZATION, FALL 2009

12


Final System A review of the primary screens and data visualizations of KnowID.

DATA VISUALIZATION, FALL 2009

13


Welcome Screen

The welcome screen is both an entry point and a map of the tool itself. The six frames show the relative position of each section within the single plane architecture. The four frames on the right help the user find a framework or case study through a filtering process or go directly to a known framework or case study. The two frames on the left help the user track their own work in progress and use the tool as a template.

Welcome Bertrand, UNDERSTAND

DATA VISUALIZATION, FALL 2009

USE

Find a framework...

Examine a framework...

Use a framework...

Find a case study...

Examine a case study...

Track your project...

14


Getting Started

As Bertrand zooms in on “Find a framework”, that area resolves into the framework search area.

DATA VISUALIZATION, FALL 2009

15


Finding A Framework Step One

The initial screen displays the full array of frameworks sorted by relevance. The icon for each framework has colored stripes that indicate the project phase(s) that it’s best suited for. Because Bertrand has been tracking his project in KnowID, the tool offers him the option to refine his results by seeking the best successor to Semantic Differential, the framework he used earlier in his project. The key in the upper right corner reminds him where he is in the tool, and he can use it as a navigational aid if he doesn’t want to zoom out to the full view again.

knowID

Frameworks: ID Methods Database Filter Pane

SORT BY: Relevance

Keyword

Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

In my current project, I just used... Semantic Differential Input Format:

Content Type

DATA VISUALIZATION, FALL 2009

16


Finding A Framework Keeping Track

When Bertrand clicks once on a framework, it expands to give him the name of the framework and a brief description of that framework.

knowID

Frameworks: ID Methods Database Filter Pane

SORT BY: Relevance

Keyword

Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

In my current project, I just used... Semantic Differential Input Format:

Content Type

DATA VISUALIZATION, FALL 2009

SWIPES SWIPES is a disciplined method for directing and integrating secondary research that can systematically profile diffuse trends.

17


Finding A Framework Narrowing the Field

Bertrand selects analysis as a primary filter. The frameworks that meet his specifications migrate to the upper left corner of the frame. The green stripe in each icon echoes the green type used for “analysis� in the filter, confirming that all of the remaining frameworks are suitable for this phase in the project.

knowID

Frameworks: ID Methods Database Analysis Filter Pane

SORT BY: Relevance

Keyword

Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

In my current project, I just used... Semantic Differential Input Format:

Content Type

DATA VISUALIZATION, FALL 2009

18


Finding A Framework Narrowing the Field

Bertrand further refines his search by using a drop-down menu to qualify his content type as relational, and the number of frameworks is reduced again.

knowID

Frameworks: ID Methods Database Analysis Filter Pane

SORT BY: Relevance

Keyword

Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

In my current project, I just used... Semantic Differential Input Format:

Content Type Relational

DATA VISUALIZATION, FALL 2009

19


Finding A Framework Narrowing the Field

There are still more frameworks in the results frame than Bertrand wants to look at, so he adds another filter by selecting “list� as his input format - right now, all of his data is listed in an excel spreadsheet. Now there are only three frameworks for him to look at in depth much more reasonable than the hundreds he saw in the first screen.

knowID

Frameworks: ID Methods Database Analysis Filter Pane

SORT BY: Relevance

Keyword

Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

In my current project, I just used... Semantic Differential Input Format: List Content Type Relational

DATA VISUALIZATION, FALL 2009

20


Finding A Framework Taking a Closer Look

By hovering over each framework icon Bertrand can see the method’s name and a brief description. The Insight Matrix looks like it might be a match, so he double clicks on that icon.

knowID

Frameworks: ID Methods Database Analysis SORT BY: Relevance

Filter Pane Keyword Insight Matrix Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

A tool that compares a list of items against each other or another list to extract innovative insights from research data.

In my current project, I just used... Semantic Differential Input Format: List Content Type Relational

DATA VISUALIZATION, FALL 2009

21


Navigation Switching Sections

A lateral slide reminds him that he’s moving from “Find a framework” to “Examine a framework.”

DATA VISUALIZATION, FALL 2009

22


Examining A Framework First Look

The main screen for the Insight Matrix is a generic example - this thing looks complicated! Bertrand decides that he needs to take a look at the framework in action, so he clicks the button labeled “Find a case study�.

knowID

Insight Matrix: Generic Process Example Analysis Synthesis

How to use this process 1. Create a list (or lists) of items to compare and input the lists on the X and Y axis. 2. Input scores at each intersection of the matrix. Typically, the more likely the items at the intersection are related, the higher the score. 3. Sort the rows and columns of data to revel meaningful groupings of list items. 4. Name and define the clusters and patterns.

1 DATA VISUALIZATION, FALL 2009

2

3

FIND A CASE STUDY

23


Navigation

A diagonal slide brings Bertrand to the case study filter.

DATA VISUALIZATION, FALL 2009

24


Finding A Case Study First Look

Because Bertrand arrived at this section of the tool after he’d already selected a framework, the available case studies have already been filtered to include only those which include a successfully completed Insight Matrix. Each case study is represented by a bar with the description of the project and a timeline that indicates the relative amount of time spent on each project phase and where the relevant framework was used.

knowID

Case Studies Analysis Filter Pane Keyword Retail Definition - Research - Analysis - Synthesis - Realization

People

Offering Company Market

Find case studies using... Insight Matrix

Corner Store MISSION: To help a collective of independent corner store owners increase revenue by aligning with customer....

IMAGE

COMPLETION DATE: D

Rs

IMAGE

04/19/09

Rs

S

EXPAND

DURATION: 4 wks Team: 3 A

S

Kitchen Gardens An analysis of the indoor kitchen garden in urban spaces. The goal is to identify users, their methods, obstacles, and... A

EXPAND

Rz

Green Labeling MISSION: To help a collective of independent corner store owners increase revenue by aligning with customer.... Rs

Rs

Rz

DURATION: 4 wks Team: 3

A

COMPLETION DATE: O4/19/09 D

4 wks Team: 3 S

COMPLETION DATE: O4/19/09

IMAGE

EXPAND

City of Chicago: HHS MISSION: T o help a collective of independent corner store owners increase revenue by aligning with customer....

D

D

DURATION:

A

COMPLETION DATE: 04/19/09

IMAGE

DATA VISUALIZATION, FALL 2009

SORT BY: Relevance

CASE STUDY SEARCH: Analysis / Insight Matrix / Retail

Rz

EXPAND

DURATION: 4 wks Team: 4 S

Rz

25


Finding A Case Study Expanded View

Bertrand thinks the corner store case study might be a good example for his supermarket project, so he expands the bar for more details. Now he can see which frameworks were used in the analysis phase of this case, in which order they were used and whether or not they were completed successfully. The framework he’s using as a search criteria is highlighted for easier navigation.

knowID

Case Studies Analysis SORT BY: Relevance

CASE STUDY SEARCH: Analysis / Insight Matrix / Retail

Filter Pane Keyword

Corner Store

IMAGE

increase revenue by aligning with customer....

Retail

COMPLETION DATE:

Definition - Research - Analysis - Synthesis - Realization

D

Rs

04/19/09

DURATION:

4 wks Team: 3

A

Position Map

People

EXPAND

MISSION: To help a collective of independent corner store owners

Offering Company Market

S

0000 HRS

Semantic Differential Insight Matrix2

Find case studies using... Insight Matrix

0000 HRS

Position Map2

0000 HRS

Insights to Principles Mind Map

0000 HRS

0000 HRS

P TO

IMAGE

0000 HRS

City of Chicago: HHS MISSION: T o help a collective of independent corner store owners increase revenue by aligning with customer.... COMPLETION DATE: 04/19/09

D

DATA VISUALIZATION, FALL 2009

Rz

Rs

A

EXPAND

DURATION: 4 wks Team: 3 S

Rz

26


Navigation

After Bertrand chooses Insight Matrix as the example he wants to examine more closely, a diagonal slide returns him to the “Examine a framework” section.

DATA VISUALIZATION, FALL 2009

27


Examining A Framework Case Study

Instead of a generic framework, Bertrand now sees the results of the Insight Matrix from the convenience store study. He now has a better sense of what sort of results he can expect and confirms that this should be a god method for him to use. He still wants to know how the other team got to this point, so he starts the walkthrough by clicking the first tab in the bar at the bottom of the screen.

knowID

Insight Matrix: Result from Corner Store Analysis Synthesis foundation for loyalty reliability trust consistency of o ering

character neighborly services friendship proximity support local business obligation reciprocity

specialty o ering product expertise o ering-specific services uniqueness/quality of o ering treating yourself character ambience

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

28


Examining A Framework Case Study

The first step in the Insight Matrix example shows the empty matrix with the X and Y axes filled in.

knowID

Insight Matrix: Process from Corner Store

amiaience

character

treating yourself

quality of offering

uniqueness of offering

offering-specific services

product expertise

consistency of offering

trust

reliability

routine

3

reciprocity

support local business

2

obligation

proximity

friendship

characteristics of loyalty

neighborly services

Analysis Synthesis

neighborly services friendship proximity support local business obligation reciprocity routine reliability trust consistency of offering product expertise offering-specific services uniqueness of offering quality of offering treating yourself character amiaience Key 0 1

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

29


Examining A Framework Case Study

The second step shows the matrix filled in with the team’s ratings. knowID

Insight Matrix: Process from Corner Store Analysis Synthesis

characteristics of loyalty

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

30


Examining A Framework Case Study

In the third screen, Bertrand sees how the convenience store team was able to identify clusters by overlaying translucent squares over the areas with the highest scores.

knowID

Insight Matrix: Process from Corner Store Analysis Synthesis

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

31


Examining A Framework Case Study

The fourth step shows that the corner store team saw the two clusters in the corners as more significant and refined their highlighting to two overlapping circles, which they’ve labeled according to common characteristics.

knowID

Insight Matrix: Process from Corner Store Analysis Synthesis

character

foundation for loyalty

specialty o ering

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

32


Examining A Framework Case Study

In step five, Bertrand sees that the results he saw at first list the same items that were in the clusters from step four. He has a pretty good understanding now of how the Insight Matrix works, so he uses the navigation key in the upper right corner to move into his own project and start using it.

knowID

Insight Matrix: Process from Corner Store Analysis Synthesis foundation for loyalty reliability trust consistency of o ering

character neighborly services friendship proximity support local business obligation reciprocity

specialty o ering product expertise o ering-specific services uniqueness/quality of o ering treating yourself character ambience

1 DATA VISUALIZATION, FALL 2009

2

3

4

5

SHOW IN ROAD MAP

33


Navigation

A lateral slide lets Bertrand move into his own previously established project space.

DATA VISUALIZATION, FALL 2009

34


Using A Framework Working Within KnowID

knowID

Insight Matrix: Bertrand’s Project Analysis Synthesis

How to use this process

Key

1. Create a list (or lists) of items to compare and input the lists on the X and Y axis. 2. Input scores at each intersection of the matrix. Typically, the more likely the items at the intersection are related, the higher the score. 3. Sort the rows and columns of data to revel meaningful groupings of list items. 4. Name and define the clusters and patterns.

1 DATA VISUALIZATION, FALL 2009

2

0

1

2 3

List Description

Item 1

Now Bertrand sees an empty Insight Matrix with the instructions for filling it out within KnowID. The ellipses icon in the lower right corner indicates that this is a framework in use; if he completes the Insight Matrix successfully he can change this to a check mark in a green box.

Item 1

3

4

5

...

SHOW IN ROAD MAP

35


Using A Framework Working With A Team

By connecting his computer to a projector, Bertrand can move the empty matrix on to a whiteboard so he can fill it out with his team using colored post-its instead of numbers.

var iet y

selec tion

sp ecialt y

0

0

0

0

0

0

0

0

p r i ce

0

0

0

0

0

0

0

0

quality

0

0

0

0

0

0

0

f re s h n e s s

0

0

0

0

0

0

cleanliness

0

0

0

0

0

va r i e t y

0

0

0

0

selection

0

0

0

specialty

0

0

ex p e r i e n ce

0

c u s to m i z a b i l i t y

0

DATA VISUALIZATION, FALL 2009

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

exp er ience

consistenc y

cleanliness

s e n s e o f l oya l t y

Motivations for Store Visit

customizabi l i t y

freshness

2 3

qualit y

1

pr ice

0

sense of loya l t y

Key

36


Using A Framework

Bertrand saves the completed matrix to his project. knowID

Insight Matrix: Bertrand’s Project Analysis Synthesis

Key

qualit y

freshness

cleanliness

var i e t y

selec tion

specialt y

experience

customizabilit y

consistenc y

2 3

p r i ce

1

sense of loyalt y

0

s e n s e o f l oy a l t y

0

0

0

0

0

0

0

0

0

0

0

p r i ce

0

0

0

0

0

0

0

0

0

0

0

quality

0

0

0

0

0

0

0

0

0

0

0

f re s h n e s s

0

0

0

0

0

0

0

0

0

0

0

cleanliness

0

0

0

0

0

0

0

0

0

0

0

va r i e t y

0

0

0

0

0

0

0

0

0

0

0

selection

0

0

0

0

0

0

0

0

0

0

0

specialty

0

0

0

0

0

0

0

0

0

0

0

e x p e r i e n ce

0

0

0

0

0

0

0

0

0

0

0

c u s to m i z a b i l i t y

0

0

0

0

0

0

0

0

0

0

0

Motivations for Store Visit

1 DATA VISUALIZATION, FALL 2009

2

3

4

5 ...

SHOW IN ROAD MAP

37


Navigation

Bertrand wants to look at his overall project process, so he uses the navigation key to slide vertically into his project page.

DATA VISUALIZATION, FALL 2009

38


Tracking A Project

Now that he’s finished using the Insight Matrix he can change the ellipses to a check mark. knowID

Road Map: Bertrand’s Project S O RT B Y: TIME

3 . 0 A N A LYS I S 05.16.05

2.0 RESEARCH

1

2

DATA VISUALIZATION, FALL 2009

AEIOU

0000 HRS

Position Map

2

3

Semantic Differential3

4

4

5

5

6

6

7

7

8

8

9

9

10

10

11

11

0000 HRS

Insight Matrix

0000 HRS

39


Tracking A Project

Bertrand’s road map now shows all of his completed frameworks; when he’s done with the project it will become a case study for other students to use and learn from.

knowID

Road Map: Bertrand’s Project S O RT B Y: TIME

3 . 0 A N A LYS I S 05.16.05

2.0 RESEARCH

1

2

DATA VISUALIZATION, FALL 2009

AEIOU

0000 HRS

Position Map

2

3

Semantic Differential3

4

4

5

5

6

6

7

7

8

8

9

9

10

10

11

11

0000 HRS

Insight Matrix

0000 HRS

40


Navigation

Bertrand moves laterally to the corner store road map.

DATA VISUALIZATION, FALL 2009

41


Examining A Case Study

By reviewing the corner store road map Bertrand can see where that team moved after using the insight matrix and identify next steps for his own project.

knowID

Road Map:

1.0 DEFINITION

2.0 RESEARCH

3 . 0 A N A LYS I S

1

2

DATA VISUALIZATION, FALL 2009

Insight matrix

0000 HRS

05.16.05

03. 22.05

S O RT B Y: TIME

ID Corner Store Case Study

1

1

2 Position Map

0000 HRS

Semantic Differential

2

3

3

4

4

4

Insight Matrix2

0000 HRS

5

5

5

Position Map2

0000 HRS

6

6

7

7

8

8

9

9

9

10

10

10

11

11

11

Insights to Principles

3

0000 HRS

6

Mind7 Map PTO

0000 HRS

0000 HRS 8

Concept Matrix

0000 HRS

Concept Evaluation ... Concept S...

42


Navigation

Bertrand zooms back out to compare his project to the corner store project.

DATA VISUALIZATION, FALL 2009

43


Examining A Case Study Side By Side Comparison

Bertrand can look at his project alongside the corner store case study to compare his project to that of the other team.

DATA VISUALIZATION, FALL 2009

44


Navigation

Bertrand zooms out to close his project.

DATA VISUALIZATION, FALL 2009

45


Home Screen

The home screen now has the added detail of Bertrand’s most recently viewed and used frameworks and projects.

Welcome Bertrand, UNDERSTAND

Find a framework...

USE Examine a framework... Insight Matrix

Find a case study...

Examine a case study... Corner Store Project

DATA VISUALIZATION, FALL 2009

Use a framework... Insight Matrix

Track your project... My Design Planning Project

46


KnowID Data Visualization / Fall 2009 / Vijay Kumar Data Visualization Team Mehmet Cirakoglu Thomas MCCUE Elena O’Curry Mike Roy Owen Schoppe


knowID