designer vs developer

DESIGNER DEVELOPER

Bryan “Rock Star” Gulley @uxjester Interaction Design

UI Development

Information Architecture SharePoint UI Sleuth

Nicole “Nicky” Maynard @punkynixter User Research

Information Architecture

Interactive Design Visual Design

DESIGNERS DEVELOPERS

ROUND 1 Designer  

“Design is not just what it

looks like and feels like.

Design is how it works.”

Steve Jobs

Yes, it’s beautiful.

Started when humans made

tools to make tasks easier

After WWII ·Engineers research, lessons learned

·Human Factors & Ergonomics Society

Paul Fitts ·Improved cockpits

·Fitts’s law still used today

Dieter Rams · Braun industrial designer

· “Less, but better”  

Walt Disney · First immersive experience by UCD  · “Imagineers” first UX team?  

Donald Norman  

Researchers Information Architects

Design Strategists

Content Strategists

Visual Designers

Interactive Designers

us·er noun A person who uses or operates something, esp. a computer or other machine. Synonyms Consumer, customer, employee, client, patient

Antonyms Stakeholder, steering committee member, designer, developer

Defined  by  Google.  

What is UX

a person's perceptions and responses

that result from the use or anticipated

use of a product, system or service ISO1924  

Includes The Users’

emotions, beliefs, preferences, perceptions,

physical and psychological responses,

behaviors and accomplishments

that occur before, during and after use

Influential Factors

System User Context of Use

What Who Why When Where

Everything That Affects A User’s Interaction

Meet the users’ needs & reach business goals

Solve business problems!Improve communication!Drive adoption & productivity!Ensure profitability!Enjoyable to use!

Meet the users’ needs & reach business goals

Make people happy by creating great experiences

User Experience Drives Behavior & Action

How a user feels about a system

Impacting time, cost, profit and satisfaction Impacting time, cost,

profit and satisfaction

Affects their

behavior & choices

How a user feels

about a system

Negative Impact Undesired Behavior Bad Experience

User Experience Drives Behavior & Action

How a user feels about a system

Impacting time, cost, profit and satisfaction Impacting time, cost,

profit and satisfaction

Affects their

behavior & choices

How a user feels

about a system

Positive Impact Desired Behavior Good Experience

01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD

EVALUATE

User Centered Design Process

ROUND 2 Developer

A Developer’s Approach to UX

23

! White boarding

! Wireframing

! Prototyping

! Implementation

White Boarding

24

! Think “Sketch”

! Information Architecture

! User Centered Design

Wireframes & Prototypes

25

! Think “Skeleton”

! Sketch to Screen

! Annotated User Interface

! Shareable

! Testable

26  

DEMO

Disclaimer

27

! Previous 4 slides are an example of how not to conduct development tasks with users

! More on that later

Implementation

28

! Skeleton to SharePoint

! Putting it all together

! Migrating the “design” with Design Manager

! We are not limited to the Design Manager

! Use of SharePoint Designer Strongly Discouraged

29  

DEMO

Tips, Tricks & Tools ! Tips ! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc. ! Use tools that work well in your workflow

! Tricks ! Network Drives ! Build reusable frameworks, libraries, plug-ins, “Starter” assets ! Utilize proven work by others

! Tools ! Raw HTML, CSS, and JavaScript ! Libraries like Twitter Bootstrap, YUI, jKit, Wirefy ! Sublime Text, Notepad ++, Coda, Plain Ol’ NotePad ! Axure, OmniGraffle, Fireworks, etc.

Designer Developer

TIE MATCH

01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD

EVALUATE

User Centered Design Process

How we work together · Communication - keep everyone involved in the whole process

· Check your ego at the door

· Set expectations and boundaries, build trust

· Know each other’s lingo

· Understand each other’s process, job and value

· Be excited to teach one another – not chastise for gaps in knowledge

· Devs aren’t machines, they have feelings too

· Designers aren’t machines, great work takes time

Key Take Aways · NNg’s Intranet Design Annuals

· UX is valuable investment · $10 change in UX phase, $100 in Design, $1,000 in Development

· UX bridges the gap between business and IT by being

the spokesperson for the user

· Design and Development are equally important

· Keep communication open throughout the entire process

· Learn each others’ job, limitations, lingo

· Collaboration is more important than your ego, you are working

toward he same goal

35

Robert Toro Portals & Collaboration Practice Director

robert.toro@slalom.com 630.309.4042

Nicole Maynard UX Designer

nicolem@slalom.com 630.251.8821

Bryan Gulley UI Developer

bryang@slalom.com 773.359.3384

SLALOM CONTACTS

© 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.