THESIS DOCUMENTATION BY SALLY CHAN INDUSTRIAL DESIGN 2013 OCAD UNIVERSITY 1
2
Plans are worthless, but planning is EVERYTHING. — Dwight D. Eisenhower
3
4
Primer
In September of 2008, the very beginning of my Industrial Design undergraduate degree at OCAD, I was already wondering what I would pursue for my thesis project. Being the naive and ambitious eighteen year old that I was, I thought I was going to change the world. Little did I know, the next five years introduced me to the ever changing and exciting multidisciplined world of design. And most importantly, I learned that it’s not about changing the world. The most difficult challenge that I faced leading up to my thesis year was narrowing down on a topic that I was really passionate about and couwld invest eight months worth of energy towards. Sometime in August before thesis began, I worked up a tornado of a mess in my room with sticky notes, books and paper. I ended up with multiple possible directions, for example, investigating how the lack of digital literacy and competency affect micro-coordination within the family and looking for ways to bridge the knowledge gap; or, looking at
opportunities for brands to design their digital and retail spaces simultaneously to create an enriched and cohesive customer experience. But being the indecisive person that I am, I couldn’t decide. Panic! At this point, friends and mentors suggested that I simply choose something that I’m really passionate about. Here is a summary of the advice I received: •
Do what you love
•
The process is more important
•
You don’t have to solve a problem, you just need to find an opportunity
•
Believe in your idea and sell the shit out of it
•
Be ready to defend your thesis when someone questions it, the research will do the speaking for you
•
Don’t worry if you’re unclear about the opportunity or direction right now, the research will change and evolve it anyway
•
Don’t get caught up in research, you have to know when to stop
•
Don’t stress, have fun
With this in mind, I took a step back and really looked at what all my ideas had in common. It was clear that I wanted to explore the emerging opportunities at the intersection of digital and physical space. And this is where all the stars aligned. Having studied Industrial Design for four years with a minor in Graphic Design, and work experience in both Interaction Design and Design Research, pursuing a thesis topic that could merge all my skills and experiences seemed like the ideal choice. I started reading about Tangible User Interfaces (TUI), physical computing and the Internet of Things and decided that this was exactly what I was passionate about. I wanted to explore the potential of making digital information graspable, and inversely making physical objects connected to digital information. The contents of this book will highlight my eight month journey on a topic that I believe to be the right direction for my graduation project.
5
CONTENTS
5 Primer 8 Design Process 10 Discovery 13 Project Context 18 Digital vs. Physical Task Management 19 Problem Statement 20 Goals & Objectives 22 Research 24 Product Research 26 User Research 35 Synthesis
40 Development 42 Co-creation Session 44 Project Directions 46 Value Propositions 47 Project Criteria 48 Product Development 58 Product Prototype 66 App Development 76 Branding 84 Finalization 86 Application 88 Product Photos 92 Next Steps 94 References 95 Credit & Thank Yous 96 About Me
6
7
Intro
/DESIGN PROCESS
Trends Analysis Literature Review Market Analysis Design Proposal Research Plan Stakeholder Analysis
Insights Translation Experience Scenarios Systems Map Personas Requirements Spec Value Proposition Prototype
REFINE
RESEARCH
SYNTHESIS
CONCEPT DEV.
Ideation Conduct Ethnography Study (Interviews, Observation, Photo)
8
Prototype
Iterate
Prototype Test
VALIDATION
Working Prototype Process Book
VALIDATION
REFINE
BUSINESS
EXECUTION
Business Pitch Branding Packaging
9
DISCOVERY
10
DISCOVERY
11
S CE UR S EN
LS
PA C
E
TO K
RE SO
SE R
S CE VI
A
LS
PA C
E
PH
IC YS
D
12
I IG
TA
/PROJECT CONTEXT
Definition
Internet of Things A term coined by the British technologist Kevin Ashton in 1999, “Today computers—and, therefore, the Internet— are almost wholly dependent on human beings for information. Nearly all of the roughly 50 petabytes (a petabyte is 1,024 terabytes) of data available on the Internet were first captured and created by human beings—by typing, pressing a record button, taking a digital picture or scanning a bar code. Conventional diagrams of the Internet include servers and routers and so on, but they leave out the most numerous and important routers of all: people. The problem is, people have limited time, attention and accuracy—all of which means they are not very good at capturing data about things in the real world. And that’s a big deal. We’re physical, and so is our environment. Our economy, society and survival aren’t based on ideas or information—they’re based on things.
You can’t eat bits, burn them to stay warm or put them in your gas tank. Ideas and information are important, but things matter much more. Yet today’s information technology is so dependent on data originated by people that our computers know more about ideas than things. If we had computers that knew everything there was to know about things—using data they gathered without any help from us—we would be able to track and count everything, and greatly reduce waste, loss and cost. We would know when things needed replacing, repairing or recalling, and whether they were fresh or past their best.
We’re physical, and so is our environment. Our economy, society and survival aren’t based on ideas or information — they’re based on things.
We need to empower computers with their own means of gathering information, so they can see, hear and smell the world for themselves, in all its random glory. RFID and sensor technology enable computers to observe, identify and understand the world— without the limitations of human-entered data. “
Direct quote from That ‘Internet of Things’ Thing, Kevin Ashton
13
/PROJECT CONTEXT
Definition
“A tangible user interface (TUI) is a type of user interface that uses physical form and physical attributes as a way to help people understand how to access, grasp and manipulate intangible digital information. Tangible interfaces provide physical handles to digital information by building on people’s intuitive understanding and expectations of how physical objects operate in the real world.” Beyond the Desktop, ciid.dk
14
“Generally graspable and tangible interfaces are systems relating to the use of physical artifacts as representations and controls for digital information.” Ullmer, Brygg, and Ishii, Hiroshi. “Emerging Frameworks for Tangible User Interfaces.” Human-Computer Interaction in the New Millenium. Ed. John M. Carroll. Addison-Wesley, August 2001, 579-601.
“The cognitive and social implications of the TUI are that users can project their own systems of meaning onto both the desktop environment and the social exchanges of around tokens, which represent the things of personal and collective value in the current work context.” Tangible User Interfaces for Peripheral Interaction, Darren Edge, University of Cambridge, December 2008.
15
/PROJECT CONTEXT
Definition
Why the Internet of Things? Why now? In short, the Internet of Things (IoT) consist of physical devices with a digital presence. These objects have sensors and actuators that provide feedback and visualization to the user; they may be networked or cloud-enabled for data storage and computing. In this book, I will be using IoT and Tangible User Interfaces (TUI) interchangeably.
Physical devices that have a digital presence. They are dynamic, and maybe networked or cloud-enabled.
The cost of microcontrollers like the Arduino and the Rasperry Pi has significantly lowered in recent years, allowing for designers and hobbyists to affordably prototype their ideas. And as these technologies become more widespread, accessible and inexpensive, we can expect that they will be part of our everyday objects in the near future. These powerful devices enable us to know more about ourselves, others and our environments. More and more products are starting to enable the quantified-self, that is people wanting to know
more about themselves, especially in the context of healthcare. Knowledge is powerful for people wanting to learn more about training, self-control, mindfulness, behaviour change and identity. There is no doubt that there are increasing opportunities for the Internet of Things in lifestyle, healthcare, finance and automotive industries. But the thing that I’m most excited about is it’s ability create new human interactions and behaviours that live outside of screen-based devices. With the proliferation of computers, we have virtualized so much of our real world into our screens that we are building new social constructs of how to behave. If so many of our daily activities and interactions live online, what would it be like to live ten or twenty years from now? How might we return to natural behaviours and environments with the added capabilities of powerful computers and sensors?
Making Meaning in an Internet of Things, Carla Diana @IxD13
16
The direction of this thesis project was largely inspired by Durrell Bishop’s Marble Answering Machine. Messages left on the answering machine are represented by marbles that gather in a tray, which playback when placed on the dimple.
Durrell Bishop’s Marble Answerming Machine, Berg London Blog
17
/DIGITAL VS. PHYSICAL: TASK MANAGEMENT
Definition
In the past couple years, we’ve seen many smart and networked products, especially in applications of healthcare, personal well-being, home and entertainment. There are little to none examples of Tangible User Interface products for work-related activities. With a particular interest in work productivity and project planning, I decided to dive into an area which is seemingly saturated with digital applications and software. Therefore, the opportunity for innovation and change was evident in this product category. There are plenty of productivity applications and task management software available for individuals and teams — some simpler than others, some robust and some complex. However, a lot of people still use any combination of analog solutions like
agendas, whiteboards, corkboards, or post-it notes; usually for the reason that everything becomes more visual and easily accessible at a glance. So what is better? Neither. An analogy can be made by comparing digital and film photography. What it comes down to is a matter of personal preference. There is no singular method for managing projects, tasks or to-do items. Most likely people are mixing methods and techniques to come up with a regimen that works for them. The process of finding a method that works, either for freelance or for small-teams, can be extremely difficult. It’s easy to feel overwhelmed by the wide variety and complexity of some methods and tools.
The online world has developed a responsive model of interaction. Content responds to user commands and constraints; everything is automated and synchronized — or simply, smarter. Content is more accessible from the cloud, requiring no physical footprint in our immediate environment. How might we organize ourselves in the same way with physical objects? Can we apply software thinking to our physical environments? I’m not arguing for businesses to rid their current project management software solutions. Rather, it’s time to re-imagine how might project management be accessible to more people.
Complex · Unapproachable · Disengaging 18
PROBLEM STATEMENT Many productivity applications and project management software can be too complex and feature-heavy for freelance professionals and small creative teams. When coupled with the use of physical products, such as notebooks, whiteboards and sticky notes, it’s easy for users to feel overwhelmed by switching between multiple mediums, and therefore reducing work productivity and causing stress.
VS.
19
/GOALS & OBJECTIVES
Definition
TO
BY
SO THAT
Create a simple, engaging and dynamic way to track, organize and present complex tasks for freelancers/small-teams who juggle multiple work and life commitments.
Uncovering task management behaviours, routines and habits and assessing the advantages and disadvantages of digital and analog tools and methodologies.
Users can experience a frictionless and streamlined task managing system that will allow them to be better organized, be more informed and achieve more goals.
20
DESIGN BRIEF How might digital productivity tools and analog task management methods be streamlined to create a simple, engaging and efficient experience?
21
RESEARCH
22
RESEARCH
23
Product Research
/ANALOGUES
CONCEPTUAL
The C60 concept was created to bring tangibility to the digital music experience. A card represents a song or a collection of songs. Placement of a card on the C60 table causes the music represented by the card to be played. Multiple cards placed on the table form a clockwise ordered playlist.
24
GM and WellStar created a concept 3D visualization system using LEGOs to track step-by-step progress on everything from vehicle repairs to patient care. LEGOs in various colors denote the area of the vehicle, and the block size denotes the severity of the problem.
Skål is a media player designed for the home that acts as the interface between physical objects and related digital media on a television. A bowl sits on the living room table and a range of physical objects are used to trigger various kinds of media.
Oksu is a digital data printer concept makes it possible to instantly “print” a tangible copy of a song, article, link or file that can be physically shared between individuals. NFC chip technology makes it possible to open the contents of the printed card simply by placing it on the device the user wishes to load it on.
ON MARKET
Swinx is a physical RFID-based game console with RFID wristbands for children. The console includes versions of tag, quiz games, hide and seek and charades. The base-station connects to the internet for uploading scores and downloading content. Active, adventurous and educational games.
Evernote x Moleskine collaborate to create Smart Notebooks that allow you to take notes and then capture them into Evernote where it is archived.
Action Method by Behance is a productivity method and a series of products (notebooks and a task management application) that aims to increase productivity and push ideas forward by emphasizing on action.
Kanban is a scalable visualization method to prioritize and control the amount of work and to prioritize work that needs to be done. The basic headings are: backlog, doing (maximum 3 items) and done. It visualizes and tracks people, tasks, responsibilities, deadlines and ‘off’ time.
25
User Research
/TARGET AUDIENCE
Knowledge workers who, by definition, think for a living or contribute knowledge capital to a company. And because that is wildly broad, I’ve scaled down to focus on Creative Professionals, where the definition of knowledge is mainly creative work, where something of value is created or manipulated. The target audience includes both teams and individuals in the creative profession ranging from 20-40 years old, either working from home, in an office or in a shared work place.
SMALL ENTERPRISE CLIENTS
PROJECT
PRO
RO
JECT LEA D
P
TIVE & OPERA S T RA TIO INI NA M L AD
JECT
JECT
PRO
PROJECT
26
PROJECT
FREELANCE NIS MI AD
CLIENTS
VE & O P E R TRATI ATI
CR
PROJEC
ON
AL
EATIVES
T
T
PROJEC
BOOTSTRAP/STARTUP NIS MI AD
C L IE N T S
VE & O P E R TRATI ATI
ON
AL
PROJECT
PROJEC
T
T
PROJEC
C
T R E A IV ES
Many companies have very small teams and an even smaller budget, especially with start-ups. More than likely these companies do not have a trained project manager. They can’t even afford one. This often means that all members of a team take turns wearing the project manager hat. This can be stressful and detrimental to work and company productivity.
27
User Research
28
/PRIMARY RESEARCH
Physical organization of chapters of her book @ Kate Hartman’s Social Body Lab
29
User Research
30
/PRIMARY RESEARCH
31
User Research
/SOCIAL TRENDS
WORK-RELATED STRESS
SELF-EMPLOYMENT ECONOMY
CULTURE OF FORGETTING
1 in 4 Canadian workers described their day-to-day lives as highly stressful, causing reduced work output and affecting work performance. The economic costs of stress and stress-related illnesses are high.
In a competitive job market, many people are either working as freelancers or are looking to entrepreneurship. This leads to alternative work places, like at home or at a co-work space. Severe cases of work-related stress due to the lack of work and life balance is also not uncommon.
Excessive use and dependency of the Internet and other technologies has caused us to be impatient, impulsive and forgetful. People are relying on devices that act as external memory to their brains.
Crompton, Susan. What’s stressing the stressed? Main sources of stress among workers. Statistics Canada. October 13, 2011
Immen, Wallace. Co-work spaces bring the like-minded together. Globe and Mail. August. 24 2012
32
Parker-Pope, Tara. An Ugly Toll of Technology: Impatience and Forgetfulness. The New York Times. June 6, 2010.
WORK-RELATED STRESS
SELF-EMPLOYMENT ECONOMY
FORGET-CULTURE
33
34
Synthesis
/COMPARING THE MEDIUMS
ANALOG
DIGITAL
Visually dynamic
Synchronization across platforms
Engaging experiences
Searchable data
Freedom of appropriation
Secure access
Tangible and sensorial
Automation
Intuitive and easy to use
Real time notifications
Invites social interactions
Accessible anywhere
PROS CONS Limited mediums
Overwhelming complexity
Restricted to location
Many extraneous functionality
Prone to damage
Linear & schematic
Physical storage
Deprived of human interactions
Short life cycle
Steep learning curve
Difficult to transport
Out of sight, out of mind
35
Synthesis
/RECURRING THEMES
Synthesizing literature review and primary user data into various categories, including key quotes, behaviours, painpoints, and tools. These were then further grouped into high level themes.
36
37
Synthesis
/USER INSIGHTS
HYPER-ORGANIZATION
IMPERSONAL FRAMEWORKS
Using too many systems, tools and methods to organize can be incredibly difficult, leading to work paralysis and inefficiency. The challenge for the individual is to use the solution that is best suited for them and maximize it’s functional potential.
Tools that record and track project plans and time sheets are almost always inaccurate measures of how long things take. These tools are often created by computer programmers/engineers who are naturally inclined to think sequentially; since not everyone is wired to think this way, this leaves employees feeling confused and stressed about misunderstood project goals and milestones.
“I don’t know, there’s just so many different systems... it’s kind of insane.” — KH, Designer, Faculty
“I don’t know what [these codes] mean!” — ME, Junior Art Director
“Paper is healthy to write on...but I only want to be carrying things that I need...getting rid of my notebooks was liberating” — CF, Bridgeable
“I want to be able to use [productivity software], but I just don’t have the time to learn it, they’re so complicated.” — CG, Designer
Consolidate mediums Synchronize content Accommodate different working styles
38
Enable natural work rhythms Easy to learn and use Intuitive and accessible
OUT OF SIGHT, OUT OF MIND
IMPERFECT ESTIMATIONS
Just because something exists, it doesn’t mean it has presence. As with software and applications, when things become hard to find, they are useless. That has a tremendous impact on productivity, execution and morale. For that reason, many people write things down and keep important notes and reminders always in sight.
People and organizations have a tendency to take on more than they can handle. There is a disconnection between industry demand and human capacity. Project plans are often imperfect models of ambitions. Planning is essential but plans should just be guidelines and nothing more.
“I lose track of what I need to do if there isn’t a strong visual focus” — AW, UX Designer
“Realistically, my responsibilities are more than the time I have.” — KH, Designer, Faculty
“The act of writing things down helps me see what I have to do, it’s physically in front of my face.” — ME, Junior Art Director
“There is no definitive measure of how much time is needed to be creative” - LN, Designer, Faculty
Strong physical presence Peace of mind: reassure, reaffirm, trustworthy Clear visual cues
Estimate optimistically Work realistically Plan for contingency Responsive to change
39
DEVELOPMENT
40
DEVELOPMENT
41
Opportunity
42
/CO-CREATION SESSION
DESIGN REQUIREMENTS • Enhance the feeling of responsibility and ownership • Use personalized or unique team member identifiers • Have iconic visual references to project status • Use strong indicators to communicate project progress • Be fun but stay professional
I prepared and facilitated an informal co-creation session with several users. Research insights were presented and then we played with several different design activities and games to generate ideas. Using scenario cards, two teams generated various ideas based on the tasks and events listed. We then voted on the top features, combined them and prototyped the ideas using Legos, toys and craft supplies. The overall result was positive and generated interesting ideas. The activities also uncovered additional user insights. Most importantly, it was a fun experience that allowed users to play a key role in the design process.
43
Opportunity
/PROJECT DIRECTIONS
COOPERATIVE VISUAL MANAGEMENT
Give small teams the tools to collaboratively plan and track the status of projects.
路 Designate a communal space for regular meetings 路 Enable social engagement for a happier work place 路 Prevent micromanagement by improving communication 路 Use visual cues to indicate progression
44
SELF-AWARE CAPACITY PLAN
Enable users to be better informed of personal and group capacity.
CAPACITY
路 Make informed decisions when estimating time 路 Create a balance between quality and quantity 路 Break down tasks into manageable work loads 路 Use game mechanics to improve adherence
45
Opportunity
/VALUE PROPOSITION
There is an opportunity to create a task management toolkit that transforms the typically mundane and complex task of managing projects into a simple, tangible user experience. In other words,using physical objects to represent and control digital information, simply an interface that users can pick up and start using. Efficiency is one of the keys to success for any business, no matter the industry. Therefore the product is built to be a scalable solution, but the initial launch will target freelancers and small teams in the creative industry because they are the one’s who will benefit from this more visual and intuitive approach. In a competitive market, they are overworked and stressed; managing projects and tasks become chaotic, which takes time away from the actual creative work. Having identified the inefficiencies, they want a product that can keep them organized. Currently, the only options they have come from two
46
very different product categories: first is a variety of office supplies like agendas, sticky notes, and whiteboards; secondly, it’s the thousands of productivity web and mobile applications from recent years. Unlike these competing products, this task management toolkit should combine the best of both worlds to create a more enjoyable, engaging and collaborative experience. The competitive edge is in the physical representation of digital information, they become social objects that facilitate shared experiences. Understanding and executing tasks become more clear when the information is more accessible. Users will find themselves engaged in this alternative task managing tool during the initial setup, but overtime, users will experience it’s core benefits. Meaning they can spend less time fussing around with the organizing, and spend more time perfecting the actual work to accomplish project goals, like nailing a pitch with the client.
PROJECT CRITERIA
• Aid an individual’s task management regimen • Allow users to focus and spend their time on the tasks • Be simple and intuitive • Increase efficiency and therefore productivity • Reduce stress by increasing usability • Help users achieve their goals • Help users remember and understand their tasks • Provide immediate feedback and respond to changes • Convey task or project progress, or lack thereof
47
Product Development
/CONCEPT IDEATION
A long day of ideation later, I had a wide variety of ideas and directions to work with. Many ideas were inspired by children’s board games and toys because ‘play’ was a design goal from the start. Drawing visual metaphors from thermostats and Russian stacking dolls to Perfection and Kerplunk.
48
49
50
Product Development
/CONCEPT PROTOTYPING Early prototype exploring the possibility of a scaled, desktop version of the Kanban board and process.
USER SCENARIO OF PROTOTYPE /ACQUIRING Tanya is a project manager at a web and mobile design studio. She noticed that although project timelines and deliverables seemed clear to her, they were not efficiently communicated to the project teams. She’s frustrated at the number of times people have to ask her questions regarding timeline, and all the times she had to ask her colleagues to update her with project progress. Tanya decided to purchase a new Visual Task Management tool for the team, in hopes to improve communication with something more accessible for her colleagues.
/PLANNING Katie is the graphic designer and she’s working on six projects simultaneously. She’s stressed and overwhelmed, constantly working overtime. She feels like Tanya doesn’t understand how much time it takes time to be creative. She feels that some timelines are
just unrealistic and wish she could have more control over estimating delivery times. Today is the kick-off meeting of a new project that the company just won the pitch for. Tanya leads the kick-off meeting and plans the project together with all the team members to get buy-in from everyone. The team identifies a list of tasks and deliverables, each one indicates an estimated amount of time to complete it and the date of it’s expected deadline. Meanwhile, Tanya grabs a coloured block and puts it on to the ‘tray’, a white LED pulses gently to indicate that it is ready. On her computer, she types in the task name, a short description, the estimated time and a deadline. Confirm. The tray beeps and the LED light turns into a solid yellow glow. This block is assigned to Katie, so she holds on to it. The next task is assigned to the development team, consisting of two people. Tanya puts two blocks in to the ‘tray’ and the white LED pulses. She inputs the task information, the tray beeps and two yellow LED glows. The development team takes these blocks.
/INDIVIDUAL SET UP Katie puts her newly acquired blocks into a container on her own desk. The container has three parts: to do, doing, done. Each new block she adds to the container an LED turns on to indicate confirmation. On her computer screen she can see that the task has been added to her list of things to do, rearranging task priorities according to the timeline. When everyone has placed their blocks into their containers, Tanya will see an aggregated list of who’s doing what on her software dashboard.
/INDIVIDUAL USE When Katie is working on an specific task item, she picks up that block and puts it in the centre of the dock. On her computer, a widget pops up and asks if she wants to start timing. Yes. Katie also has the option to time-box herself to do the task for only 4 hours. When four hours is up, the device will sound and blink to notify Katie her allocated time to work on this specific task is up.
51
52
Product Development
/CONCEPT PROTOTYPING
A prototype of a phone dock that puts the device into work mode, while amplifying its capability as an NFC reader. Place NFC tags to the phone to see further information and controls for the desktop interface. Display the tag and flip it down to begin tracking time spent on the project or task.
53
Do smart objects have a visual aesthetic?
54
Product Development
/CONCEPT PROTOTYPING
55
Product Development
/CONCEPT PROTOTYPING
STAND-BY MODE
WAKE UP GESTURE
TO-DO LIST WINDOW
ADD TASK WINDOW
BEGIN TIME TRACK SEE ON-SCREEN FEEDBACK
2s
ADD TASK GESTURE
56
x2
BUSY STATUS
‘TAKE-A-BREAK’ NOTIFICATION
SOCIAL NOTIFICATIONS
CALENDAR NOTIFICATION
PAUSE TIME TRACK
DISMISS GESTURE
DELETE/COMPLETE GESTURE
57
Product Prototype
/MOODBOARD
Initial material, form, texture and colour considerations.
58
When we typically think of electronics and gadgets, we often picture plastic or metal casings. But as technology continues to advance, there are also more designs that are nostalgic of a simpler and down-toearth aesthetic of yesteryear. When wood is used in the design of electronics, it adds a timeless characteristic that communicates both visual appeal and practicality.
To be an ambient and ubiquitous product, the visual language needed to be unlike conventional desktop gadgets (hard drives, speakers, mice, and keyboards). It needed to be a desirable object that would blend into it’s surrounding landscape at will. The convergence of natural materials and technology further speaks to the theme of intersecting mediums.
59
Product Prototype
60
/FORM DEVELOPMENT
61
Product Prototype
/ITERATIONS
1 Early prototype exploring the possibility of a scaled, desktop version of the Kanban board and process.
2 A phone dock that puts the device into a work mode, and also amplifies its capability as an NFC reader.
62
1
3 Foam prototypes to explore size, form and visual language in context with other desktop accessories.
3
4 Prototypes of movable pie charts, an early feature on the tokens that was later removed for simplification.
5
2
5 Materials and form prototype using wood, white acrylic and cork.
4 63
64
Product Prototype
/CONSTRUCTION
Various process photos during the making of the prototype.
65
App Development
/INFORMATION ARCHITECTURE
ADD
REVIEW
MANAGE
PROJECT
TASKS
TIME
66
COMPLETE
67
App Development
/PAPER WIREFRAMES
Various paper wireframes and sketches detailing each screen and interaction. Many microinteractions were considered, but were unfortunately not included in the final prototype.
68
69
App Development
/KEY WIREFRAMES TASK MENU TABS
Submenu: click to see a dropdown of more options specific to the highlighted tab
Double click: the heading bar to collapse it Heading bar number: indicates the number of child items (tasks)
INFO TAB View, edit, archive and assign collaborators to the task. By default, placing a Tag on the Button will launch this tab on the last updated task.
70
Progress Bar: indicates completion of tasks out total tasks created
CHANGELOG TAB See the notes made after each time segment on a timeline. The date sticks to the top while scrolling. Submenu: 1. User view: see the time spent on the task and have permissions to edit or delete the entry. 2. Collaborator view: excludes the time spent, showing just the changes/notes made to the task.
FILE TAB See all the files that are linked to the highlighted task. Click to Open or right click to Show in Finder. Also see who made the last change and when. Menu > Select which folders to source from.
TIMESHEET TAB (not shown) See at a glance how much time you’ve spent on the highlighted task and the total amount of time each day and each week. Submenu: 1. Admin permissions: view all timesheets of all collaborators 2. Export: send a copy of the timesheet 71
App Development
/KEY WIREFRAMES PROJECT DROPDOWN
ALL PROJECTS See all the projects and their respective linked colours. From here, select either a Project (A), Create a New Project (B), or Assign tags (C).
72
ANOTHER PROJECT (A) When switching to another project, the same tab remains opened to the last updated task. All the accent colours change to the respective colour of the physical project Tag.
NEW PROJECT (B) Fill in a project name and a description. Creating the project will take you to Assign Tags (next page).
73
App Development
/KEY WIREFRAMES LINKING PHYSICAL TAGS TO A PROJECT
LINK TAGS (C) User is prompted to place a Tag on the Button if there isn’t one already. If arriving from Create a New Project, a ‘Not Now’ button will appear if the user chooses not to link to a Tag right away.
74
TAG READY The application reads that the Tag placed on the dock is orange and prompts the user to drag and drop a project into the circle to link it. Check off ‘Apply change to all [Colour] Tags’ if applying to all Tags of the same colour, if left unchecked, project is written only on the specific Tag.
TAG LINKED CONFIRMATION The project is successfully assigned to the one Orange tag. The user is prompted to write a description about the project or add some tasks.
75
Branding
76
/COMPETITIVE ANALYSIS
A small selection of the top mobile, desktop and web applications in the Productivity category, out of the 4000+ free and paid options. This list includes applications for collaboration, to-do lists, note taking, time management, project management and file management. Some of notable key players in the field of Tangible User Interfaces and the Internet of Things. Products include sensors, toys, and learning tools, all of which are very open to appropriation.
77
Branding
/PERSONALITY & ATTRIBUTES
CORE VALUES Inviting Intuitive Smart Knowledgeable Approachable Connected Networked Curious Humble Advanced Fluid
Fun Playful Organized Safe Sensorial Dynamic Adaptive Reliable Social Integrated Focused
Reserved Sensitive Expressive Responsive Honest Polite Exploratory Insightful Bridge Translate Objective
Empathize Useful Engaging Optimistic Authoratative Guiding Encouraging Comprehensive Patient Adaptable Professional
Touch Grasp Hold Manipulate Transform Perform Communicate Feedback Connection Action/Reaction Accomplish
Goals Control Playground Peripheral Ambient Ubiquitous Context Future Utopian Whiteboard Ownership
Capacity Kanban Time Track Measure Hours List Write Lightweight Clarity Presence
KEYWORDS Project Task To-do Collaboration Planning Management Desktop Office Spatial Information Visualize
78
Physical Analog Digital Tangible Tactile Basics Internet Personal Notifications Screen Interface
Attention Creative Decisions Interactions Method Technique Process Share Priority Importance Modularity
I AM CURIOUS. I LIKE TO OBSERVE AND LEARN ABOUT MY ENVIRONMENT. I AM SHY AND INDEPENDENT, BUT I CAN EASILY ADAPT TO TEAM SETTINGS. I AM WILLING TO ASSIST YOU, BUT YOU MUST HELP ME UNDERSTAND YOU.
79
80
Branding
/BRAND NAME DEVELOPMENT
ONPLATE
TASKAPE
GIBI
OnPlate is derived from the idiom “to have too much on one’s plate” — to have a lot of work to do or to be very busy with many different activities. This closely relates to the theme of productivity and work, but more importantly it is descriptive of the physical action of putting something onto a plate. The call to action and the underlying meaning of OnPlate is quite powerful, unfortunately it is not a name that easily rolls off the tongue.
A combination of the words ‘task’ and ‘landscape’, Taskape illustrates the physical landscape of things to do. This name might describe the product best and is much easier to understand, however, ‘task’ stood out to me as a word that most project management software or applications already use. The word also denotes some kind of formality and seriousness that most software and applications already embody.
Gibi turned out to be the most complex and irrelevant name out of the top four options. I tried to stay away from using foreign languages, but to explain how I arrived at Gibi, I should mention that the Italian word for tangible is tangibili. After dissecting the word, I really liked the memorable phonetic sound and playfulness of gibi. A quick Google search also informed me that gibi is a binary prefix for a gibibyte (230 bytes), which is closely related to a gigabyte (109 bytes).
BITSKIT
Bits, describes the basic unit of information in computing, and Kit explains the physical aspect of the product as a collection of multiple components. By chance, it phonetically sounds like ‘biscuit’ which conveniently resembles the form of the Tags. Bitskit was one of the first names that stood out to me because it was really fun to say! Although it doesn’t relate to the function of my product, it is a derivative of the concept that started the project.
81
Branding
82
/BRAND IDENTITY DEVELOPMENT
83
FINALIZATION
84
FINALIZATION
85
Application
/SCREENSHOTS
TASK INFORMATION VIEW
86
TASK FILE VIEW
TASK CHANGELOG VIEW
LINK PROJECT TO TAG
87
88
Use the Tags to link physical project assets to corresponding digital files. The Tags are magnetic and have a dry-erase surface for writing what project is linked to it.
“[Physical tokens] are annotatable and spatially-reconfigurable, can support office-based individuals whose work is mutually interrelated, yet performed independently at their own desks....the diminution of conversational opportunities due to the computerisation of communication, and the lack of support for auxiliary work activities — this supports a research agenda in which a TUI is both designed for this context and evaluated in it...The physicality of tokens would enable direct and immediate access to documents, whilst the digital nature of the underlying document would allow it to be freely edited on a remote server.� Tangible User Interfaces for Peripheral Interaction, Darren Edge, University of Cambridge, December 2008.
89
90
Use Bitskit with or without a computer.
91
/NEXT STEPS
Closing
This is evidence for the need of a product like Bitskit. These are all the physical documentations of my eight month thesis project. It would’ve been much easier to find notes that corresponded to my digital files.
92
PRODUCT
APPLICATION
MONETIZATION
There are a lot more opportunities offered by the NFC shield that I have not considered. The current interactions could easily be replicated by RFID readers which are more inexpensive.
For the reason that there are so many existing project management and productivity applications available, I’ve put very little considerations in this aspect of my thesis. With that said, this means that the product could easily be integrated into an app.
The current prototype is suited for freelance individuals and small teams of 2-10. There are also many different use cases for larger teams that were not included in this documentation. Instead of each team member having one unit at their desk, there could be one in a communal or meeting area. In which case, users’ phones would serve as the NFC reader for the tags when they are distributed.
I began the project with the intention of creating a selfaware, networked object, under the theme of Internet of Things. What I’ve resulted with is more similar to a Tangible User Interface. Although the two themes are closely related, there are still a lot of unexplored territory in regards to other sensors and actuators. In terms of the Tags themselves, there should be other form factors for the reason that not every office or every user has a magnetic board or surface. This is a significant design consideration that was not resolved. Other than the magnets, there should also be clips, pins, stickers or actual tags that could be hung.
For users to have a full immersive experience, the application needs to be available for a number of different devices and screens. First starting with a desktop application, then ideally there should be development in a mobile, tablet and web version. This is particularly important because NFC-enabled devices are expected in the very near future. Applications with this much functionality requires a lot of iterations and user testing, especially with the added physical interactions. Since I don’t have the skills to create a functional prototype, I would need to work with a developer in order to keep developing this portion of my project.
Like many other product-application examples on the market (ie. Fuelband, Nest, Withings), the application is free to use given that the consumer has already bought the kit of products. Similar to a Freemium model, the cost for the product will depend on the number of users. There should be Basic, Plus and Premium purchasing options, the difference being the increasing number of features and the number of objects in the kit. There is also opportunity in creating subordinate and peripheral accessories that is branded Bitskit. Much like Action Method from Behance, which sells a suite of stationary that support their digital counterparts.
93
/REFERENCES
Closing
PAPERS Blackwell, Alan F., and Edge, Darren, Peripheral Tangible Interaction by Analytic Design, University of Cambridge, February 2009. Edge, Darren, Tangible User Interfaces for Peripheral Interaction, University of Cambridge, December 2008. Shaer, Orit, et al. “The TAC Paradigm: Specifying Tangible User Interfaces.” (2004). Ullmer, Brygg, and Ishii, Hiroshi. “Emerging Frameworks for Tangible User Interfaces.” Human-Computer Interaction in the New Millennium. Ed. John M. Carroll. Addison-Wesley, August 2001, 579-601.
BOOKS Allen, David, Getting Things Done: The Art of Stress-Free Productivity. Penguin Books, 2001. Mayer-Schönberger, Vikor, Delete: The Virtue of Forgetting in the Digital Age. Princeton University Press, 2011 Menzies, Heather, No Time: Stress and the Crisis of Modern Life. D&M Adult, 2005.
BLOGS www.99u.com www.berglondon.com/blog
ICONS www.thenounproject.com www.iconmonstr.com
Binder with extensive secondary research also available.
94
CREDIT & THANK YOUS/
THESIS ADVISORS Paul Epp Job Rutgers
Kate Hartman
Alejandro G. Barrera - Developer
Lewis Nicholson
Daniel Kim - Photographer & Videographer
Chris Ferguson Susan Bartlett
Bridgeable
Nate Archer
Lush Concepts
Alfred Wong
MyPlanet Digital
Amanda Billark Emmett Phan
Students of Industrial Design 2013
Jessica Lock Anna Wu Meagan Eveleigh
95
/ABOUT ME
Closing
96
SALLY CHAN As a teenager watching Trading Spaces everyday afterschool led me to believe that I had to be on television in order to become a successful designer. Luckily, I made the move to Toronto from Vancouver in 2008 to study Industrial Design. Fast forward to 2013, I know that all the opportunities and experiences I had, all the things I learned, and all the people I met, was a result of that one courageous decision to make that move. Studying at OCAD University meant that I could study Industrial Design simultaneously with a minor of Graphic Design. Some of my strongest pieces are at the intersection of these disciplines. During a summer internship as an Interaction Designer, I was introduced
CONTACT to a field that seems to merge everything that I have an interest in. But what does it mean for an Industrial Designer to become an Interaction Designer? Because the words Interaction Design do not necessarily mean the same to me as it is commonly used in the industry. Right now I think that I’ve found both comfort and challenge within the endless opportunities emerging from the intersection between physical and digital experiences — Tangible User Interfaces and The Internet of Things.
Questions? Comments? Coffee? hello@sallychan.ca 1-647-968-1690 @sllychn To view other portfolio work, visit: www.sallychan.ca
Being comfortable with the unknown and being open to the challenges that ambiguity entails — perhaps that is the serendipity of design.
97
WWW.SALLYCHAN.CA
98