Your SlideShare is downloading. ×
0
DESIGNER
Nicole “Nicky”
Maynard

DEVELOPER
Bryan “Rock Star”
Gulley

@punkynixter

@uxjester

User Research
Information Ar...
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 & Ergon...
Dieter Rams
· Braun industrial designer
· “Less, but better”	
  

Walt Disney
· First immersive experience by UCD	
  
· “I...
Donald Norman	
  
Researchers

Design
Strategists

Information
Architects

Interactive
Designers

Visual
Designers

Content
Strategists
us·er
noun
A person who uses or operates something, esp. a
computer or other machine.
Defined	
  by	
  Google.	
  

Synonym...
What is UX
a person's perceptions and responses
that result from the use or anticipated
use of a product, system or servic...
Includes The Users’
emotions, beliefs, preferences, perceptions,

physical and psychological responses,
behaviors and acco...
Influential Factors
System

User

What

Who

Context of Use

Why

When

Where
Everything That Affects A User’s Interaction
Meet the users’ needs & reach business goals

Solve business problems!
Improve communication!
Drive adoption & productivit...
Meet the users’ needs & reach business goals

Make people
happy by creating
great experiences
User Experience Drives Behavior & Action
How a user feels 

How a user feels
about a system
about a system

Affects their
...
User Experience Drives Behavior & Action
How a user feels 

How a user feels
about a system
about a system

Affects their
...
User Centered Design Process

01 02 03 04 05
RESEARCH

ANALYZE

IDEATE

EVALUATE

STYLIZE

BUILD
ROUND 2
Developer
A Developer’s Approach to UX
!
!
!
!

White boarding
Wireframing
Prototyping
Implementation

23
White Boarding
! Think “Sketch”
! Information Architecture
! User Centered Design

24
Wireframes & Prototypes
!
!
!
!
!

Think “Skeleton”
Sketch to Screen
Annotated User Interface
Shareable
Testable

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

! More on that later

27
Implementation
!
!
!
!
!

Skeleton to SharePoint
Putting it all together
Migrating the “design” with Design Manager
We are...
DEMO
29	
  
Tips, Tricks & Tools
! Tips
! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc.
! Use tool...
TIE MATCH
Designer

Developer
User Centered Design Process

01 02 03 04 05
RESEARCH

ANALYZE

IDEATE

EVALUATE

STYLIZE

BUILD
How we work together
· Communication - keep everyone involved in the whole process
· Check your ego at the door
· Set expe...
Key Take Aways
· NNg’s Intranet Design Annuals
· UX is valuable investment
· $10 change in UX phase, $100 in Design, $1,00...
SLALOM CONTACTS

Robert

Nicole

Bryan

Portals & Collaboration
Practice Director

UX Designer

UI Developer

robert.toro@...
© 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the curr...
Designer vs Developer
Designer vs Developer
Upcoming SlideShare
Loading in...5
×

Designer vs Developer

426

Published on

Presentation presented by Nicole Maynard and Bryan Gulley of Slalom Consulting at SharePoint Fest Chicago 2013

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
426
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Designer vs Developer"

  1. 1. DESIGNER Nicole “Nicky” Maynard DEVELOPER Bryan “Rock Star” Gulley @punkynixter @uxjester User Research Information Architecture Interactive Design Visual Design Interaction Design UI Development Information Architecture SharePoint UI Sleuth
  2. 2. DESIGNERS DEVELOPERS
  3. 3. ROUND 1 Designer  
  4. 4. “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs
  5. 5. Yes, it’s beautiful.
  6. 6. 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
  7. 7. Dieter Rams · Braun industrial designer · “Less, but better”   Walt Disney · First immersive experience by UCD   · “Imagineers” first UX team?  
  8. 8. Donald Norman  
  9. 9. Researchers Design Strategists Information Architects Interactive Designers Visual Designers Content Strategists
  10. 10. us·er noun A person who uses or operates something, esp. a computer or other machine. Defined  by  Google.   Synonyms Consumer, customer, employee, client, patient Antonyms Stakeholder, steering committee member, designer, developer
  11. 11. What is UX a person's perceptions and responses that result from the use or anticipated use of a product, system or service ISO1924  
  12. 12. Includes The Users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use
  13. 13. Influential Factors System User What Who Context of Use Why When Where
  14. 14. Everything That Affects A User’s Interaction
  15. 15. Meet the users’ needs & reach business goals Solve business problems! Improve communication! Drive adoption & productivity! Ensure profitability! Enjoyable to use!
  16. 16. Meet the users’ needs & reach business goals Make people happy by creating great experiences
  17. 17. User Experience Drives Behavior & Action How a user feels 
 How a user feels about a system about a system Affects their behavior & choices Impacting time, cost, Impacting time, cost, profit and satisfaction profit and satisfaction Bad Experience Undesired Behavior Negative Impact
  18. 18. User Experience Drives Behavior & Action How a user feels 
 How a user feels about a system about a system Affects their behavior & choices Impacting time, cost, Impacting time, cost, profit and satisfaction profit and satisfaction Good Experience Desired Behavior Positive Impact
  19. 19. User Centered Design Process 01 02 03 04 05 RESEARCH ANALYZE IDEATE EVALUATE STYLIZE BUILD
  20. 20. ROUND 2 Developer
  21. 21. A Developer’s Approach to UX ! ! ! ! White boarding Wireframing Prototyping Implementation 23
  22. 22. White Boarding ! Think “Sketch” ! Information Architecture ! User Centered Design 24
  23. 23. Wireframes & Prototypes ! ! ! ! ! Think “Skeleton” Sketch to Screen Annotated User Interface Shareable Testable 25
  24. 24. DEMO 26  
  25. 25. Disclaimer ! Previous 4 slides are an example of how not to conduct development tasks with users ! More on that later 27
  26. 26. Implementation ! ! ! ! ! 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 28
  27. 27. DEMO 29  
  28. 28. 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.
  29. 29. TIE MATCH Designer Developer
  30. 30. User Centered Design Process 01 02 03 04 05 RESEARCH ANALYZE IDEATE EVALUATE STYLIZE BUILD
  31. 31. 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
  32. 32. 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
  33. 33. SLALOM CONTACTS Robert Nicole Bryan Portals & Collaboration Practice Director UX Designer UI Developer robert.toro@slalom.com 630.309.4042 nicolem@slalom.com 630.251.8821 bryang@slalom.com 773.359.3384 Toro Maynard Gulley 35
  34. 34. © 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×