Side processbook 300dpi by dave hansung

SIDE x Dell SUMMER ’14 / INTERFACE DESIGN / UNDER THE INSTRUCTION OF BRIAN BOYL, JEFF HIGASHI, AND TODD MASILKO

A sponsored project with

INTERFACE DESIGN

Summer 2014 Design Team

Mentored by:

Jessica Muljadi

Daniel Mai

Graphic Design

Interaction Design

hi@jessicamuljadi.info

dhmai.nsc@gmail.com

Dave Hansung Kim Product Design davehansungkim@gmail.com

Sean Whelan

Brian Boyl Jeff Higashi Todd Masilko

Product Design

seanshiangwhelan@gmail.com

What does collaboration between creatives look like across distances? Challenge The challenge was to envision and create a product and interface that focuses on and envourages collaboration in the professional workplace.

Project Goal Create an experience and product that achieves the creative flow and rhythms experienced when two people work together.

Although organized in sections, all aspects of the project were being developed simultaneously. With new insights from each section informing and affecting the development throughout the project.

RESEARCH & INTERVIEWS

7 10 20 26

DELL Project Outline Competition & Market Interviews Tenets & Pain Points

CONCEPT IDEATION

34 42 43

Initial Concept Ideations Key Attributes Final Concept

PRODUCT DEVELOPMENT

46 62 66

Sketches Product Prototypes Process

72 90 100

Inspiration Interface Style Guide Flowboard & Wireframe

INTERFACE DEVELOPMENT

BRAND DEVELOPMENT

114 118

Logo Sketches Side Logo

VIDEO DEVELOPMENT

120 130 136

Storyboard Video Assets Final Videos

FINAL PRESENTATION

142

Final Presentation

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT 9

FINAL PRESENTATION

Main Research Insights 01 Transitions Seamless transitions during collaboration maintains good rhythm

02 Trust Working next to a person creates trust and increases fluidity

03 Personal & Public A balance of personal and shared workspace is found in many collaborative conducive spaces

trends

social trends

Social Trends

-working Spaces Risevc of for co-working weather Spaces

Rise of Co-working Spaces

spaces have in recent years with young rs looking to er in relatively spaces.

Co-working Co-working spaces spaces have have seen seen growth growth in recent in recent yearsyears Co-working spaces have seen as startups as startups with with young young growth in recent years as startups entrepreneurs entrepreneurs looking looking to to with young entrepreneurs looking to workwork together together in relatively in relatively work together in relatively inexpeninexpensive inexpensive spaces. spaces. sive spaces.

vc for Reservations weather Toward open Spaces

Reservations Toward Open Spaces In recent years, a good amount

Reservations chatroulette Toward open Spaces

Chatroulette

chatroulette “hot Desking”

“hot Desking” uber conference

social t

uberhip confe ch

“Hot Desking”

In recent years,chat a good amount Co-working spaces have An online website that An online Givingchat employees website room that to Giving employees A room conference to call system that press in has examined of press has examined open seen of growth recent yearsopen pairs random people together pairsmove random around people and together work where move around and work includes where cloud storage space online chat website that pairs Giving employees room to move In recent years,that a good amount of workAn work spaces exist in places spaces that exist in places as startups with young through video. through theyvideo. want. they want. and Evernote capabilities to randomand people together through around and work where they want. press has examined open work spaclike Google and IDEO. However, like Google IDEO. However, entrepreneurs looking to enhance the video conference video. es recently that existpeople in relatively places like Google recently have been people have been work together in experience. and IDEO.spaces. however, recently peoplequestioning whether all quiet questioning whether all quiet inexpensive have questioning andbeen privacy should bewhether taken all and privacy should be taken quiet and privacy should be taken away from individuals. More away from individuals. More away from More than than half of the people working than halfindividuals. of the people working half the spaces people reported working in open in open spaces reported inof open spaces reported problems problems focusing while focusing at problems focusing while at while at work. work*. work*.

A conference A video includes includes clou and Evernote for 1 to enhance commun the experience. of peop sharing instant

ere

social trends

uber conference

hip chat

Skype’s 3D video

Switchcam

Emotient

Uber Conference

Hip Chat

Skype’s 3D Video

Switchcam

Emotient

A conference call system that includes cloud storage space A conference call system that and Evernote capabilities to includesenhance cloud storage space and the video conference Evernote capabilities to enhance the experience. video conference experience.

A video chat platform that includes persistent chat rooms Video chat platform that includes for 1 to 1 communication or persistent chat rooms for 1 to 1 communication among a team communication or communication of people. Also supports file among a team of screen people.sharing Also supsharing and for portsinstant file sharing and screen sharing feedback. for instant feedback.

The company found a way to make 3D video calls but says The company found a way to make they are not able to implement 3Dthe video callsdue but to says they are not feature consumer’s able to implement thethem feature due technology holding back. to confumer’s technology holding them back.

A technology that can sense This company gave users the emotions through facial ability to form separate videos This company gave users the ability expressions. A technology that can sense emotogether into one seamless to form separate videos together tions through facial expressions. video with various camera into one video with various views by seamless syncing the audio files. camera views by syncing the audio files. 013

Competitive Analysis

Cisco Telepresence

Microsoft Magic Window

Compare & Contrast

Pain Points

Strength

Weaknesses

Compare & Contrast

Pain Points

• Uses 3 screens for a more immersive experience

• Large size requires an entire room

• Incredibly low cost or free. • Fully featured with Google Hangouts, drive, and Chrome integration.

• Eye-level perspective – allows you to make direct eye contact

• Not mobile/portable

• Insanely expensive

• UI is not good, it lacks flexibility for scheduling, and often has call quality issues.

• Perspective and orientation is static • Great for multiple people • You can mirror content from another device and edit in real time

Uber Conference

• Meetings are very formal • Doesn’t make sense for one on one meetings

• Released mobile apps for both iOS and Android

• Has touch, gesture and sketchfunction • Has stereoscopic camera (3D cameras) • Gives you depth perception

• 3D camera viewpoint could be distraction/ nauseating

Affectiva Q-sensor

Jawbone UP

Lume Personal Tracker

Strengths

Opportunities

Strengths

Opportunities

Strengths

Opportunities

• It utilizes a specialized skin conductance sensor to measure a person’s level of engagement. It also journals the data for personal reflection and assessment.

• Using technology that could discern specific emotions a person experiences could provide more detailed or insightful data.

• Provides insight into patterns/ trends it recognizes in the data.

• More specialized sensing technology could be utilized to collect more accurate and useful data on the lifestyle behaviors it attempts to track.

• Focuses on very specific personal data which allows it to be simple in a very impactful way.

• A specialized technology that can collect mood data passively could ease the reliance and responsibility the app places on users.

Weaknesses

Threats

Weakness

Threats

Weaknesses

Threats

• It can’t differentiate between emotion and only indicates the level at which a person’s mind is engaged.

• Other facial and voice recognition softwares offer more analysis about what specific emotions a user is feeling, albeit sometimes with less accuracy.

• The sensor it uses isn’t particularly accurate and usage decreases once the novelty of it wears off.

• Other technologies that are able to more accurately measure behaviors such as sleep, mood, etc.

• Requires user commitment to actively input their own data daily in order to collect and display results.

• There might be other mood journal apps that utilizes specialized mood sensing technology.

• Offers social connectivity and challenges users to improve their lifestyle behaviors.

Skype

Oovoo

Webex

Strength

• The Market Leader for voice and video

• Free group video calls

• The Market Leader for presentations / webinars

• The default voice, video, and IM tool for the world, at more than 250M active monthly users

• Ability to make phone calls or add them to a video call

• Easily schedule and join a meeting directly from Outlook and other email calendars

• Supports all platforms and devices

• Telephone and voice-to-ip integration Weaknesses Weaknesses

• Complicated UI

• No screen share + annotation. Requires too much bandwidth.

Weaknesses

• Poor video performance, not designed for peer-topeer work

Vidyo

Google+ Hangouts

Google Glass

Strength

• Very high quality HD video on all the platforms

• Free Group Video

• Augmented reality in a non disruptive manner

• Available on all the mobile platforms

• Can discuss things on google docs too

• Hands-free camera that shoots photos and video through voice commands.

Weaknesses

• Complex pricing and backend infrastructure. Requires too much bandwidth.

• No screen sharing + annotation. Not secure.

• Short battery life • Not mainstream yet • Expensive

Existing Solutions

Clear LCD Displays

Compare & Contrast

• Enables you to see through the screen and the environment behind • Adapts to setting context (i.e frosts up for privacy) • Has touch screen function

• Kubi has 360º view rotation • Stationary during use • It needs to be paired with an existing tablet device • No sketch function • Portable for travel (during off use) • Has different orientation modes

• Limited use – only used for retail displays • Stationary hardware • No sound • Doesn’t connect to other devices v(no cloud function)

Lark

A tool that taps into people’s vocal intonations to understand their underlying emotions. vwith users accordingly.

An app that tracks activities such as walking, running, and driving through your phone and is your personal coach.

Fitbit

Samsung Emotion Sensing Phone

A wristband and app that tracks your activity and stats to view trend patterns and reach goals.

A phone that senses your emotional state and alters the way it interacts with users accordingly.

Kubi

Compare & Contrast

Pain Points

BeyondVerbal

Pain Points • It needs a tablet to be useful • No sketch function • Still need to use laptop during discussion • Low quality experience

Problem Scenario

The design team have done the research beforehand and they’re at the stage where they’re ideating off research and creating a data visualization.

Ideation and data visualization are done in analog. There is no digital file version of analog written ideas

Dave wants to get Sean’s opinion on the ideation and decides to call him to check if he’s willing to join in through Skype. Dave has to call Sean to check if he’s free and schedule an online meeting first through the phone

Sean, unfortunately is sick and does not come into work.

Sean sees that Dave is calling him and wants him to get on Skype to help with the decisions of the ideas. Sean has to switch devices to his laptop in order to do the video conferencing

Sean gets on Skype with Dave. Sean’s view is limited to the laptop’s camera. Sean can’t directly participate, he can only verbally tell his ideas.

Sean begins writing notes down as Dave debriefs him. Sean can’t directly participate onto the wall in real time

Sean checks to make sure Dave understands his idea by showing Dave the idea through the camera on his computer. It is difficult to express sketch ideas acoss on a laptop,

Jessica and Dave see Sean confirming his idea with them. Insights are analog and so there isn’t a digital version of it unless you take a photo (but it’s low fidelity + extra effort)

Jessica and Dave position the computer so Sean can see where they position the idea on their wall. Sean’s view of the ideation wall is limited to the camera, to see more, the laptop itself has to be moved around.

Ater the call, Sean writes down ideas that he has that have lingered and come to the surface. Once he’s not on skype, Sean is cut off from the work and can’t contribute in real time

Sean also begins sketching ideas. Any sketch ideations that Sean might have thought of and done can’t be added in real time to their wall.

Sean wants to send the idea to Jessica and Dave back at the office. He resorts to taking a photo with his phone and sending it to Dave’s phone.

The design team has to move the laptop around to give sean a closer look instead of sending a digital file of the insights.

Jessica and Dave try to formulate Sean’s thoughts on a Post-It note. Forced to comprehend the idea through a poor quality, unaltereable image.

Interviews

Questions

Each team member interviewed a few people. We asked various interviewees, both working professionally and not, about their individual workflow and working enviornment. This gave us insights into their daily challenges and helped identify pain points in which we formed our product tenets from.

How is your day structured? And do you realize if you structure your day to your own personal workflow?

How do you define collaboration?

What is collaboration to you and what is it like in your workplace?

Do you work with different people in every projects or do you stay within the same team?

When your team is starting to feel that block, and they don’t necessarily tell you that. Is there anything that you feel from the way they go about their work and how they interact with you?

When you have moments of creativity blocks, how do you resolve it?

What are some of the things that you do that keeps you focused? Why is that?

When did that routine start happening the way that it is and have there been other people who have that routine and you notice them?

“It’s awkward because I can’t see his face, I don’t know what he thinks about what I am presenting to him.” – Jess Muljadi

9 What are the major problems and major advantages to having an open space? 10 19

Any closing thoughts on your workflow and your team’s workflow?

• • •

Took a while to get everyone to be on the same page Difficult to speak with multiple people (pacing/timing) Awkward experience with little body language

Online Interview vs In-person interview

Studio Visit — Pastilla Institute of Design

• •

People had to walk over to another desk for crit Limited privacy

Rudy Manning Interview Body Language is clear and really adds to the interview flow

Interviews

Expert Interviews

Gerardo Herrera

Rudy Manning

Director of Packaging at Art Center

Creative Director at Pastilla

“Need to mute the video when someone enters the room for privacy”

“Collaboration is a fluid, working, on the go space where at any moment at any second I can get up, walk around and talk to somebody and where I’m at.”

“Body language becomes awkward“ “Communication doesn’t flow and move as fast online because you can’t fully tell the reactions of the person on the other side“ “There might be language barriers and misunderstandings that could happen“ “Video conferences can be scheduled at any time because it’s global and that might not always coincide with your workflow“ “Sometimes you have to deal with many people at the same time and talking becomes a problem“ 21

“There’s always someone else that will bring something different... I think collaborating and working together and discussing where the issues are, it keeps it going. “ “For me I think it comes from reading people and seeing body language. Listening to how they are, things they say.” “You got to be comfortable with changing your workflow.”

Darren Wong

Eve Songdej

Designer at Sony

Designer at Disney Interactive

“People take longer to adjust and trust ach other when communication is solely done on a video conferencing level.”

“Aside from lunchtime, I get my second wind around 3-4 pm because that’s around the time I start to get tired. My co-worker and I usually do walks around the block or we’ll walk to Starbucks to be in a different space so we don’t have to think about work.”

“Need to mute the video when someone enters the room for privacy” “Body language becomes awkward“ “Communication doesn’t flow and move as fast online because you can’t fully tell the reactions of the person on the other side“ “There might be language barriers and misunderstandings that could happen“

“We have an open floor and there’s always people talking and collborating and there’s little clusters of meetings everywhere... So the headphones helps me to keep things out and focus so I don’t hear the conversations.” “I notice later in the day people get more rowdy. They get restless. The busy times at Starbucks are usually in the morning and around 3-4 when I get my second ‘wind’ so people get up more and talk to people more.” 22

Interviews

Additional Interviews / Art Center Students

Janya Menges

Pearlyn Liiii

Matthew Padovani

“Breaks are important when you’re feeling stuck or stressed.”

“You need both sides to trust in each other that the work will be done to make the processs faster.”

“Clients don’t see revisions in real time over video conferences.”

“Pitching to non-creatives can be taken too literally.”

“Professionals of different backgrounds use different vernacular that the other may not be completely in tune with.”

“It’s a little bit awkward over the video because you’re not used to it and there’s computer lags.” “It wastes alot of time trying to get everybody on the same level as you.”

“Sometimes it’s better to walk around and see what others are doing.” “Skype and video conference targets the ADHD generation of our time where we want everything faster.” “Talking over somebody and misunderstandings are a problem.” “The method of communication stunts the growth of new ideas because you might be embarrassed or don’t have enough time.”

“Clients do not know exactly what they want until they see it in person, and it fits what they think they initially wanted.” “The designer always has to deal with making sure the client is viewing the correct material or the most updated revisions.” “Client cannot see the revisions being made to files in real time if the client and designer are working together over the phone. The designer has to upload the updated file before the client can view the file.” “Video conferencing breaks the sense of rhythm between two people.”

Jason Hsin

Martin Francisco

Kurtis Scherman

“Factors that determine good collaboration efforts: familiarity (comfort level), convenience (nearby), different POV or perspective that makes their opinoin disruptive enought to inspire new thinking.”

“We as a group lost momentum when a person had to leave. And when we were kicked out of the place that we were working, that also messed up the momentum.”

“At my desk, we have these monitors that I can write on and flip around to show the person on the other end of the table.”

“Momentum not being created by any of the members on the team can at times leave the team feeling stagnant.”

“Video conferences can be scheduled at any time because it’s global and that might not always coincide with your workflow“

“Paper and pen keep you from getting bogged down in the details that come up with screens that inspire thoughts of “pixel perfect” detail.” “collaboration = being completely open, no sugar coating, not taking things personally, and getting the best outcome we can.” “meetings feel most natural around lunch time because it offers a more relaxed state of mind that allows an open mind to including someone else into the mix.”

“During times of stress, the creativity doesn’t flow as naturally and freely because time is blocked out very clearly in an effort to make sure everything gets done.”

“Sometimes you have to deal with many people at the same time and talking becomes a problem“

“When thoughtful ideas arise, they can be logged but the enthusiasm behind them may not always translate.” “When people are focusing on accomplishing a task for a deadline, interruptions from others can seriously block the flow and momentum.”

Product Tenets

Discreet

Should be non-intrusive

Ergonomical

Small in nature (fits into hand)

Intuitive

Function without looking

Mobile

Work in multiple settings

Integrated

Fit into the context

Collaboration

Work with any number of people

Focus Pain Point Current systems distrupt the fluidity of workflow and collaboration across distances.

Interview Insights

Body Language Body language is lost during virtual conferencing and limits the conversationsnatural rhythm, making it more awkward and stunted.

Miscommunication Scenario shows an example where people have a more difficultimefollowing the conversations due tohassel in showing links, images, etc.

Serendipitous

Open Distractions

Collaboration Collaboration idetion is fluidspontaneous and open that happens naturally at work.

There is less privacy in open studios and employees are prone to distractionsand interruptionswhich leads to lower productivit. .

Trust

Analog vs Digital

Same platform

Trust among people is essential or a fluidand good collaboration

People have diferent working working styles that they prefer.

Chalk and white boards are tools in the workspace that act as mediums of collaboration.

Research Insights

Today, video represents 50% of all traffic on the internet

Understanding Collaboration and Workflow

Emulating human interactions brings the personal nature into a virtual reality.

79.7%

3.9 milion

Increase in telework from 2005 â&#x20AC;&#x201C; 2012

Estimated number of teleworkers in the U.S by 2016

Cisco Collaboration Work Practice Study 2013

62%

84%

12.5%

75%

Of office workers are bothered by a lack of opportunity for privacy in the workplace

of organizations that have a remote workforce.

Firms using social collaboration software see productivity enhancements of an average of 12.5%

of businesses say that digital collaboration tools will be important to their business and this figure rises to 86% when you look at a 3 year forecast.

Forbes

MIT sloan management review and deloitte

DIGITAL

Telepresence Video Chat

Laptop & Tablets

Projector

OPPORTUNITY COLLABORATIVE

PERSONAL

White Board Post-it Notes Sketchbook/Notebook

ANALOG

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT FINAL PRESENTATION

Concept Idea 01

Smooth Transition

Ben is working at his workspace and next to him is Side by Side showing John’s workspace.

Ben feels a block in creativity and decides he wants to move to a more open room with cooler airflow. He only needs a sketchpad so he stands up and leaves his computer on the desk.

Ben sits down in the new preferred enviornment where a Side by Side is already prepared.

Side by side will transition any data that was exchanged in Side by Side in the last workspace to the new one.

“We as a group lost momentum when a person had to leave. And when we were kicked out of the place that we were working. that also messed up the momentum.” — Martin Francisco Momentum is easily stunted when trasitioning from one workspace to another.

Concept Idea 02

Body Language

Be is working Side by Side with John. They are working individually on their own projects.

As Ben is working, he notices that John has been in a very tense position for some time.

“I hate phone interviews. You like, can’t tell if they meant to pause or not, and then you speak over them and you just don’t have any rhythm.” — Matteo Body language is lost during virtual conferencing. This loss limits the conversations natural rhythm, making it more awkward and stunted.

Ben asks John how his work is going and John states that he can’t decide between color choices for the product his team is developing.

Ben tells John to show him the color choice through Side by Side so he can help him through his frustration to find a resolution.

Concept Idea 03

No Intruding

Be is working Side by Side with John on a team project.

A deadline is coming up and they need to finidh the project ASAP.

Sue walks by and would like to inform Ben and John about the award her team won over the weekend for a social service project.

Sue notices the ambient glow coming from Side by Side, which indicates to her that Ben and John are focused on accomplishing the task at hand.

“Sorry, I needed to put you on mute because somebody came in and I needed to tell them they were being recorded.” — Gerardo Herrera 35

No privacy, sometimes they don’t want anyone to hear the conversation. Interruptions not only can be rude, but they can break the creative flow between two people.

Concept Idea 04

Window Paint

Ben is at his workspace, and next to him is Side by Side, where John’s workspace is displayed. John is working afar in the companie’s offices inTaiwan.

Ben takes a break and begins looking at a design blog. Suddenly a fun idea pops into his mind that he wants to share with John.

“At my desk, we have these monitors that I can write on and flip aorund to show the person on the other end of the table.” — Kurtis Clients don’t see revisions in real time. Chalk and white boards are tools in the workspace that act as mediums of collaboration.

Ben behins talking through his idea with John and writes on Side by Side to create a diagram of his thoughts.

John sees and opportunity to build on Ben’s original idea and begins sketching on Side by Side as well.

Concept Idea 05

Focus Time

Be is working Side by Side with John on a team project.

A deadline is coming up and they need to finidh the project ASAP.

Sue walks by and would like to inform Ben and John about the award her team won over the weekend for a social service project.

Sue notices the ambient glow coming from Side by Side, which indicates to her that Ben and John are focused on accomplishing the task at hand.

“Earphones are a must right now. It helps me concentrate and tell others that I am gettingy work done.” — Darren 37

People lose their train of thought when interrupt-ed by others or by happenings that occur in open air offe spaces.

Concept Idea 06

Unstuck Me

Ben is at his workspace, and next to him is Side by Side, where John’s workspace is displayed. John is working afar in the companie’s offices inTaiwan.

Ben takes a break and begins looking at a design blog. Suddenly a fun idea pops into his mind that he wants to share with John.

“I notied people later in the day, get more roqdy, they get restless. But in the early morning and afternoon, its usually very quiet. And I can’t stand that.” — Eve Sitting down and working for many hours straight makes people restless and experience creativit blocks. Taking breaks and talking to other people also helps resolve them.

Ben behins talking through his idea with John and writes on Side by Side to create a diagram of his thoughts.

John sees and opportunity to build on Ben’s original idea and begins sketching on Side by Side as well.

Project Concept

Two Systems working in tandem. Improving the method and flow of idea communication. Helping ideas that inspires creativity and spark that special â&#x20AC;&#x153;aha!â&#x20AC;? moment.

Key Attributes

Contextual Serendipitous Direct 39

Involved

The Best Position

To collaborate. To Communicate

Face to face

Side by side

We found that shifting a personâ&#x20AC;&#x2122;s orientation toward another creates an experience that promotes fluidity of workflow and trust between two people that encourages positive collaboration.

target audience

Target Audience Our target audience is the creatie professional

Our target audience is the creative living a fast-paced life in an urban jungle like professional living a fast-paced life New York City. He keeps upin with current trends and loves any opportunity collaboration an urban jungle like New York City.for He keeps up with current trends and loves any opportunity for collaboration.

System Diagram

system Diagram

Input

Receives

Input

Duo Outside Content

Voice/ Audio

Voice

Pen

Scanned Content

Voice/ Audio

Uno

Dave 27 years old Dave

Jess

27 years old

24 years old

Creative Professional Creatie ProfessionalArt Center college Art Center college graduate graduateWorks at a med-sized Ad Agency Works at a med-sized Ad Agency Lives in New York CityWalks to work, also uses Lives in New York City the subway Walks to work, also uses the subway

Creatie ProfessionalUCLA College GraduateWorks at the same Ad Agency as Dave but at a diferent branchLives in Los AngelesDrives to work

Created Content

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT FINAL PRESENTATION

Focus

Shared Viewpoints

Focus

Lack of Focus

Lack of focus Distractions (online, surroundings) Self-consciousness Micro-managing Change of setting (disrupting the workflow)

parties are more likely to reach an agreement if they begin a negotiation by displaying engaged body language (smiling, nodding, mirroring, open gestures, etc.) seating people directly across from your desk (especially if their chair is smaller and lower than yours) places them in a competitive (and disadvantageous) position. Instead, try putting the visitorâ&#x20AC;&#x2122;s chair at the side of your desk, or creating a conversation area (chairs of equal size set around a small table or at right angles to each other) to encourage a feeling of informality, equality, and partnership. http://www.forbes.com/sites/carolkinseygoman/2013/01/07/1 0-simple-and-powerful-body-language-tips-for-2013/

Focus

Different Orientation

top view looking down from the camera that your collegue can see what are the analog things that they interact with as a team?

â&#x20AC;&#x153;That paper there on your left.â&#x20AC;?

the digital stuff is taken care of.

sketching with each other

Analog: Post-Its Paper Books Pen Pencils Sharpies Keyboards Wacom Glasses Desktop Toys

sketches, rough notes

People need to visualize things, thats why post-its are so genius.

a screen that can be placed over a sketchbook to see the alterations or call outs that your collegue is making on your page.

current camera location

see the desk

An add-on to a monitor that acts as a windown between two people.

camera suspended above

workspace place sketch pad behind the side windown to allow other person to see the same thing behind their window.

Focus

Body Language

How hard you squeeze, will ripple out and inform other people that youâ&#x20AC;&#x2122;re stressed/ need help

Initial Product Ideation

Interview Revisited New Pain Points Interviews revisited New Pain Points

Martin francisco Martin francisco Art Center Student

Art Center Student

Using your fingers as using your fingers as pens is annoying pens is annoying. It feels unnatural, unstable

feelsprecision unnatural, unstable andItlacks and lacks precision.

Flipping the image to make Adds another device to keep the image make it seem itflipping seem like they are to writing track of Adds another device like they are writing correctly, also to keep track of. correctly, also flips the flips the sketchbook. sketchbook.

Matteo padovani Matteo Pandovani Art Center Student Art Center Student

product is too is big Product too big and immobile and immobile “If it’s this part only, it feels good.” – Gerardo Herrera

056 57

“If it’s this part only, it feels good.” – Gerardo Herrera

Gerardo herrera Director of Packaging Gerardo Herrera at Art Center Director of Packaging at Art Center

Observation/New Insights Observations/ New Insights

They enjoy standing and moving to think, talk and to sketch They enjoy standing and moving to think, talk and to sketch

Writing on the same screen can be distracting due to overlapping of the writing on the same screen can face and sketch be distracting due to overlapping of the face and sketch

Scaleable ‘active’ area “it looks like I can move this up or down Scaleable ‘active’ depending on what I want...area Rather than “it looks move this up on or a working on a like smallI can screen, I can work down depending on what I want... bigger drawing”

Writing on the same screen can be distracting due to overlapping of the writing on the same screen can be face and sketch distracting due to overlapping of the face and sketch

Rather than working on a small screen, I can work on a bigger drawing”

Sometimes they prefer to stand up Sometimes they prefer to stand up and andaround walk around to ideate walk to ideate

flipping the image make it seem flipping the image to to make it seem likelike they are writing correctly, also flips the sketchbook. they are writing correctly

They intuitively intuitively started They started sharing sharing sketchesside sideby byside. side. sketches

58 057

Product Model 01 Modular Screen System Our first mock-up was modular and allowed us to test the feel of diferent â&#x20AC;&#x153;windowâ&#x20AC;? sizes when placed next to a person sittingt a desk. We were also able to examine how one might interact with the panels, both in a staticposition andwith complete freedom.

Findings Adjustable Sizing Flexible Orientation Screen Extension

Product Model 02 Tabletop Screen and Swivel Our second mock-up tested a larger screen size for Duo and an arm that could actually swivel, allowing us to understand the potential behind a mving arm.

Findings Adjustable Sizing Flexible Orientation Screen Extension

Product Model 03 Clamped & Screen on Arm Our third mockup changed the screen size once again. Rotation f the Duo screen and added freedom to the Uno Screen allowed us to understand the interface and product given the moderate amount of freedom provided.

Findings Clear Screen Interface Clamped to Side of Desk Analog Overly Option

Product Model 04 Clamped and Fully Articulate Arm Our fourth mockup allowed for the most movement possible. Allowing us to fully understand what would need to be taken into consideration i huge amounts of freedom were aforded to the user.

Findings Complete Freedom Swivel and Folding Motio

Light Detail

Button Detail

For presentation,we mocked up the product interface using a projector from behind. This gave an illusion of a working screen, as if itâ&#x20AC;&#x2122;s an actual working prototype.

UNO Screen swivel and light detail

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT FINAL PRESENTATION

Bright colors

Bright saturated colors are energetic eyecatching and engaging.

Flat color ico

Simple, eye cat color coordinat

Interface Trend Analysis Intuitive Depth SImple Mdular

Intuitive Depth Simple Modular

Depth Perception

Using treated images / video as the background beneath the interface design gives a new sense of dimensionality to the flat screen.

Minimal / accent colors Minimal / accent colors

Because of the background, Because thecolor background, limited useofof is limited use of color is preferrable preferrable with an accent with an accent color as emphasis. color as emphasis.

Modularity Modularity

Line Iconography Line Iconography

Geometric modular shapes Lined icons are simple, Geometric modular shapes Lined icons are simple, gives a clear sense of grid recognizable, easyand to read gives a clear sense of grid and recognizable, easy to read and organization thatâ&#x20AC;&#x2122;sand simple and modern. organization thatâ&#x20AC;&#x2122;s simple modern. andtoeasy to understand. easy understand.

Depth Perception Using treated images / video as the background beneath the interface design gives a new sense of dimensionality to the flat screen.

Interface Trend Analysis Clean Minimal

CleanMinimal

Casual Bold

Bold Casual

Flat Analog

FlatAnalog

Energetic Nostalgic

Nostalgic Energetic Warm

Warm

Flat design Flat design

LargeLarge type type

color Simple, large typography Simple Simple flat colorflat infographics Simple, large typography infographics creates clear heirarchy. eliminates any and alleliminates any creates clear heirarchy. andelements all distracting distracting and iselements and could bea complex useful in useful in organizing organizing a complex information system. information system.

Analog

Buttons and interactions that gives the illusion Buttons andand interactions that gives of 3 dimensionality tactility feels more the illusion of 3invites dimensionality tactility feels more casual and the user and to interact. casual and invites the user to interact. 68

Bright colors Bright colors

Flat color iconography Flat color iconography

Bright saturated Simple, eye catching and Bright saturated colors arecolors Simple, eye catching and color energetic and eyecolor coordinated. energeticare eyecatching coordinated. engaging.catching and engaging.

Intuitive Depth Simple Modular

69066

06770

71068

72 069

Mastercopy 01

Large number Large information indicates the current weather conditions as the priority information

Simple Icons Analog buttons

Intuitive Clean Analog

Large buttons suggest users to press it and is intuitive to operate

Minimal icons are subtle and indicates different features

Accent Color Color indication with highlighted color to simply point out where to look at

Graphic Statistics The fluctuated graphic forecasts how sunny the weather is over the week in a minimal graphic line

Swipe Indicators Intuitive symbol and button to indicate further information

Mastercopy 02

Subtle graphic indicator Subtle indication of activities

Fold animation

Intuitive Flat Energetic

Fold animation is reminicent of paper and gives illusion of depth and tactile analog

Elegant Type Not bold, emphasis on type size creates more breathing space

Bright colors Fun different colors for easy identification

Flat & minimal icons Flat icons follows graphic style and indicates different information simply to the user

Mastercopy 03

Modular Simple Modern

Fullspread photograph

Large bold info

First impression and impact catches attention.

The large number indicate the current temperature. First read and readable over photograph.

Gradient color Color emulates and appears to be inspired by the winter photograph.

Simple icon Minimal icons are subtle and indicates different features.

Simple graphic diagrams 75

Modular grid system Clear grid system keeps information organized and website easy to navigate.

Flat Graph treatment

Mastercopy 04 Progress goal tracking

Translucent bar

Simple graphic icons allows the user to track current weekly progress and have an end goal

Grounds the icons and type on the top while staying nonobtrusive and subtle

Blurred photograph Profile

Image emphasis is pushes it to the back

Personalized accounts for users

Depth Minimal Casual

Large direct info Large and simple words informs you on main topic

Active indicator

Large buttons

Bright color easily indicated to the user current time of day

Minimal Icons Minimal icons are subtle and indicates different features

Short phrase that motivates user

Notification indicator

Pop-up information

Notifies you about activities

Detailed info pops up when needed

Motivating Words Short phrase that motivates user

Mastercopy 01

Color Palette

Typography First Read

R250 G141 B41

Helvetica Neue Regular

C0 M54 Y93 K0

RGB 255 CMYK 0

R 124 G128 B131 C54 M43 Y41 K7

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Second Read Helvetica Neue Regular

R48 G52 B55 C73 M64 Y60 K56

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

R 24 G25 B27 C75 M67 Y64 K78 RGB 0 CMYK 0 0 0 100

Iconography

Landing Page

High Traffic

Info Rich

Mastercopy 02

Color Palette

Typography First Read

RGB 255 CMYK 0

R235 G192 B39 C1 M26 Y94 K0

R235 G77 B78 C2 M85 Y68 K0

Avenir Roman

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Second Read Avenir Medium

R168 G190 B56 C39 M10 Y100 K0

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

R158 G219 B222 C36 M0 Y14 K0

Iconography R33 G40 B56 C84 M75 Y52 K57

Landing Page

High Traffic

Info Rich

Video

Mastercopy 03

Color Palette

Typography First Read

R186 191 B246 C25 M22 Y0 K0

R104 G95 B160

Alright Sans Bold

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox

C69 M70 Y7 K0

jumps over the lazy dog 0123456789

R140 G230 B242

Second Read

C47 M0 Y10 K0

R78 G149 B151

Alright Sans Bold

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789`

C71 M26 Y40 K2

Third Read R133 G140 B158 C52 M40 Y28 K1

Alright Sans Regular THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

R49 G56 B66 C77 M67 Y53 K48

Iconography

Landing Page

High Traffic

Info Rich

Mastercopy 04

Color Palette

Typography First Read

RGB 255

DINPro Regular

CMYK 0

RGB 0

Tint 10%

CMYK 0 0 0 100

R106 115 B130 C62 M49 Y37 K9

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Second Read DINPro Bold

R88 G88 B88 C63 M55 Y54 K29

R172 G161 B155

Third Read

C35 M33 Y36 K0

DINPro Regular

R50 G191 B159 C69 M0 Y56 K0

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

Iconography

Landing Page

High Traffic

Info Rich

Interface Style Guide Version 01

Project Detail Screen – Past sessions

Project Screen – No collaboration in session

FirstLast@email.com Creative Director of smartness ONE TWO TREE COMPANY

Project Screen – Adding/ calling a new contact

Project Screen – During video collaboration

ADD CONTACT

Menu button slides out

Sketches have a white boarder behind with a 93% opacity

Iconography pop up animation

Project Screen – During video collaboration

Activity Feed

Connected to Martin 03:07

Link ed to FedEx Pr oject.

White overlay with a 90% opacity and gaussian blur R250 G141 B41 C0 M54 Y93 K0

Gradient

R48 G52 B55 C73 M64 Y60 K56

86 Project “ FedEX Rebrand ”

Board 01

Board 02

B Board oard 03

Personal Sketch screen

Board 04

Offline contacts have a black overlay

R 124 G128 B131 C54 M43 Y41 K7

RGB 255 CMYK 0

RGB 0 CMYK 0 0 0 100

Interface Style Guide Version 02

Home Screen

Project Detail Screen – Past sessions

Settings

Al l

Swipe left to create a new board

Project Screen – No collaboration in session

Project Screen – Adding/ calling a new contact

Sketches have a white boarder behind with a 93% opacity

Pulls out animation from behind

Flip out animation Project Screen – During video collaboration

Main menu flips in

Connected to Martin 03:07

Link ed to FedEx Pr oject.

RGB 255 CMYK 0

R187 G189 B192 C0 M0 Y0 K30

R 24 G25 B27 C75 M67 Y64 K78

88 Project “ FedEX Rebrand ”

Personal Sketch screen

Project boards

R 79v G190 B162 C65 M0 Y46 K0

R235 G77 B78 C2 M85 Y68 K0

RGB 0 CMYK 0 0 0 100

Interface Style Guide Version 03

Interface Visual Variations and Development

Tue, July 13th 3:15PM

Contact Detail

Full History

Top 3 Most Recent Projects Recents

Recent Activities

Yesterday, July 09

Gerardo edited FedEx board

3:12pm

Meetup with Rudy & Matteo

Eve edited Starlight board

Meetup with Eve & Pearlyn

Board: Tcho Bottle

Gerardo edited FedEx board

3:15PM

FedEx Rebranding

Board: Starlight

Jan July 2014

4 Meetups

Board: Tcho Bottle +2 FedEx Rebranding

July

Tue, July 13th

12:30pm

Meetup with Rudy & Matteo

31.28Hrs Collab Projects

4:30pm

Eve edited Starlight board

Ongoing Projects Recents

161.28Hrs Week

4:30pm +2

4:30pm

Month

Yesterday, July 09 Earlier Activities

12:30pm

This Year

Collab History

Reset

1!8ধ2(8!2$-9|'1!-£W$31 -8'$;38 3( 91!8;2'99 One Two Tree Company

Tues, July 08

4:30pm

Martin Francisco

Today, July 10

FedEx Rebranding

Today, July 10

43 Meetups

Priority

Recent Activities

Since Nov 2013

FedEx Rebranding

Priority

FedEx Rebranding

Tues, July 08 3:12pm

Meetup with Eve & Pearlyn

New Project +2

Sinclaire Pavilion

Board: Starlight

Earlier Activities

Quick Sketch

Tue, July 13th 3:15PM

Top Contacts

Recent

Tue, July 13th 3:15PM

All

FedEx Project 8 SESSIONS

Ongoing Projects Recents

First, Last

Company

B C D

Priority

First, Last

FedEx Rebranding

Company

Martin Francisco

1!8ধ2(8!2$-9|'1!-£W$31 -8'$;38 3( 91!8;2'99 One Two Tree Company

I J

New Session

First, Last Company 7|

Last Edited 11:02 AM | July 12

First, Last

FedEx Rebranding

Company

July 2014

Collab History

Q R

First, Last Company

New Project

4 Meetups 31.28Hrs

This Year

Month

Week

S T U V

Last Edited 11:02 AM | July 12

First, Last Company

Last Edited 11:02 AM | July 12

Project History 5|

Last Edited 11:02 AM | July 12

W X

FedEx Rebranding 2016

First, Last Company

2015

...

... JULY

JUNE

MAY

APR

MAR

FEB

JAN

Jan

July

Z #

FedEx Rebranding Collab Projects

First, Last Company

FedEx Rebranding

First, Last Company 6|

Last Edited 11:02 AM | July 12

First, Last Company

Sinclaire Pavilion

Key Wireframes

DUO Screen

DUO DetaIL Duo Interface Interface Detail During Duringan anActive Activevideo VideoMeeting Meeting

“sketches” can selected “sketches” can bebeselected and freely dragged and freely dragged

To clutter, To prevent prevent clutter, “sketches can be “sketches “can be docked docked

large, wideangle Angle viewing Large wide Space of other person viewing space of other person

098 93

Horizontal allowsfor forusers usersto Horizontal scroll scroll allows easily navigate through “boards” to easily navigate through “boards” (with11 screen screen width (with width==11board) board)

Hot corner on sides of screen Hot corner on sides of screen allow transfer of content allow transfer of content between DUO and UNO between DUO and UNO

home page Home Page

Quick to your Quick linklink to your favourite contacts or or favourite contacts most recent contacts most recent contacts forfor convenience. convenience.

Background opacity Background opacity can can be toggled be toggled 0-100%. 0-100%.0% looks a 0% looks likelike a clear clearwindow. window.

099 94

Your Screen Your UNO uno Screen

Final Style Guide Interface Design

Color Palette RGB 230 C8 M6 Y6 K 0

Color palette The bright teal and yellow-orange color reflects the brigt and open collaboratie and creatie spirit of our target audience. While maintaining professionalism through the muted light grey and blue-black color.

Typography First Read Ubuntu Bold

C21 M16 Y14 K0

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

R90 G89 B92

Second Read

R200 G200 B204

C63 M56 Y52 K27

Color use Interface design is minimal, largely making use of the greyscale tones. The teal and yellow-orange color serve as accent colors (for homebutton, nvigation, ntifaton icons etc.)

Ratio

R50 G58 B77 C81 M71 Y47 K40

Lato Medium

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Third Read Lato Medium

R86 G187 B152 C64 M2 Y52 K0

R242 G154 B40 C2 M45 Y96 K0

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Fourth Read Lato Bold

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 95

Iconography Development

The interface design is based on the insights we gathered through the interviews, class critiques and nuerous scenario reviews. This way, we made intentional designdecisions accordingly.

Key Wireframes

UNO Screen

Final Wireframes

100

UNO Interface Detail

Overview Screen of projects and Team Members

Quick link to your favourite contacts or most recent contacts for convenience. 101

Homepage shows an overview of all your projects created

In-Depth look at project content and Data

Bright teal color helps emphasize the main navigation

Easy to read overview of recent activitieand edits by other participats in a project

Examine our Interaction with a Specific Person

SIDE gives you an overview of patternsand data from the interactions btween you and your contacts.

Transfer content to the Sketch Que or Teammates Duo

Hot corner on sides of screen allow transfer of content between DUO and UNO

Background opacity can be toggled 0-100%.0% looks like a clear window. 102

Initial Interface Clickthrough Tue, Aug 12th 3:15PM

Top Contacts

Recent

Recent Projects

Company

Recent Activities

Tue, Aug 12th 3:15PM

All

First, Last

Tue, Aug 12th 3:15PM

Contact Detail

3ÂŁÂŁ!# 83/'$;9

3ÂŁÂŁ!#

-9;38@

A B C D

First, Last Company

Today, Aug 19

@$,3 3Ä§ÂŁ'

2:19pm Janya edited the Fedex project

+1 board

4:30pm Dave edited the Fedex project

02:03 hrs

12:30pm '';<6 >-;, !Ä§'3 { !8ŕŚ§2

'& ? '#8!2&-2+

!9; &-;'& Â&#x2C6;Â&#x2C6;VÂ&#x2021;Â&#x2030; d <ÂŁ@ Â&#x2C6;Â&#x2030;

First, Last Company

<ÂŁÂŁ -9;38@ d !9; 32;, d !9; ''0 d '9'; !;! -2$' !@ Â&#x2030;Â&#x2021;Â&#x2C6;Â&#x2039;

43 '';<69

161.28Hrs

K ,-9 @'!8 d 32;, d !9; Â? &!@9

L M N

First, Last

3:15PM

Company

O P Q R

Tue, Aug 12

First, Last Company

S T U

4:30pm Eve edited the ;!8ÂŁ-+,; 683/'$;

First, Last Company

Fri, Aug 08 5.30pm Meetup with Eve { '!8ÂŁ@2

<ÂŁ@

W X

;!8ÂŁ-+,;

00:43 hrs

1!8ŕŚ§2(8!2$-9|'1!-ÂŁW$31 -8'$;38 3( 91!8;2'99 One Two Tree Company

I J

83/'$;V $,3 3Ä§ÂŁ'

Martin Francisco

Yesterday, Aug 11 +2

32;, 3( <ÂŁ@T Â&#x2030;Â&#x2021;Â&#x2C6;Â¤

Y Z

4 '';<69

31.28Hrs

First, Last Company

83/'$;V ;!8ÂŁ-+,;

+1 board

First, Last

2:18pm You edited the ;!8ÂŁ-+,; 683/'$;

'& ? '#8!2&-2+

Company

First, Last Company

!8ÂŁ-'8 $ŕŚ§=-ŕŚ§'9

-2$ÂŁ!-8' !=-ÂŁ-32

First, Last Company

Tue, Aug 12th 3:15PM

FedEx Rebranding

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding Connected to FedEx Project

!ÂŁÂŁ-2+ !8ŕŚ§2WWW

Project Contacts

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

103

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Boards

Tue, Aug 12th 3:15PM

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

FedEx Rebranding

Tue, Aug 12th 3:15PM

FedEx Rebranding

Boards

Tue, Aug 12th 3:15PM

FedEx Rebranding

Project Contacts

104

Boards

Final Flowboard

105

106

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT FINAL PRESENTATION

SIDE

SIDE 109

SIDE

110

SIDE

111

Final Logo The final logo is an abstraction of the DUO screen of SIDE. The interlocking representas the connection and collaboration between two people (and two DUO screens).

Typography First Read Ubuntu Medium

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Second Read Lato Semibold

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789 Third Read Lato Regular

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG the quick brown fox jumps over the lazy dog 0123456789

Color Palette R86 G191 B155 C64 m0 y50 k0

R28 G37 B53 C88 m78 y55 k57

112

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT FINAL PRESENTATION

Initial video scenario storyboard

115

Video Style Directions Animation, Flat, Colorful

Film, Textural, 3D, Dark colors

116

Video Inspiration 01 â&#x20AC;&#x153;Animadeâ&#x20AC;?

117

Style 01 Limited Color Palette. Extreme Minimalism. Sectioned graphic story telling style.

118

Video Style Exploration based on the inspiration on the left.

Video Inspiration 02 â&#x20AC;&#x153;Own Your Tomorrowâ&#x20AC;?

119

Style 02 Saturated/high contrast color palette. Simple vector graphic style. Fluid animation.

Video Style Exploration based on the inspiration on the left.

120

Video Inspiration 03 â&#x20AC;&#x153;Adobe Marketing Cloudâ&#x20AC;?

121

Style 03 Augmented reality style. Live action film. Minimal information graphics.

122

Video Style Exploration based on the inspiration on the left.

Character Design Dave

Ver. 01

Ver. 02

Side Head

Back Head

Jess

Sean

Daniel

123

Contact Profile Icons

Hands

Office Design

Office Background Silhouette

124

Front Desk Call

Front Desk Tilt

Front Desk Split

Side Desk

Animated Video Development 01 Vector Only

125

Animated Video Development 02 Vector + Film

126

Animated Video Development 03 Vector refinements week 13

127

While the vector animation video is a visual explanation of the concept and workings of SIDE, we also created 2 liveaction videos that mocks up a real time use scenario of SIDE. For this, we pre-recorded the footage before projecting it onto the prototype screen. This photo shows the process of recording â&#x20AC;&#x153;Final Video Presentation 02â&#x20AC;? video. (page ??)

128

Final Video Presentation 01 “Animated Vector” *Note: Script and storyboard was completely changed from prior weeks

129

130

Final Video Presentation 04 “Side by side autoplay” Video used for the hallway wall presentation where the video was projected onto the product mockup

131

Key DUO screen slideshow

Key UNO screen slideshow

Style 02 Saturated/high contrast color palette. Simple vector graphic style. Fluid animation.

132

Final Video Presentation 03 â&#x20AC;&#x153;FedEx Collaborationâ&#x20AC;? Video used for scenario re-enactment during the final stage presentation

133

Final Video Presentation 02 “Skype Problems Compilation” Video showcases the problems in current telecommunication methods

134

RESEARCH & INTERVIEWS CONCEPT IDEATION PRODUCT DEVELOPMENT INTERFACE DEVELOPMENT BRAND DEVELOPMENT VIDEO DEVELOPMENT 135

FINAL PRESENTATION

136

137

138

139

140

141

142

143

144

145

146

147

148

SIDE x Dell

Meet the team! Left to Right:

Art Center College of Design Interface Design Summer 2014

Graphic Design

Images from Superfamous Unsplash Shutterstock Book Binded at Color images 2320 W Olive Ave, Burbank CA 91506 818.567.2900 Typefaces Ubuntu Lato

Jessica Muljadi hi@jessicamuljadi.info 206.354.4875 Dave Hansung Kim Product Design davehansungkim@gmail.com 213.718.5237 Daniel Mai Interaction Design

dhmai.nsc@gmail.com 704.905.4875 Sean Whelan Product Design

seanshiangwhelan@gmail.com 408.394.080 149

150