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

2. 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

3. DESIGNERS
DEVELOPERS

4. ROUND 1
Designer

5. “Design is not just what it
looks like and feels like.
Design is how it works.”
Steve Jobs

6. Yes, it’s beautiful.

7. 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

8. Dieter Rams
· Braun industrial designer
· “Less, but better”
Walt Disney
· First immersive experience by UCD
· “Imagineers” first UX team?

9. Donald Norman

10. Researchers
Design
Strategists
Information
Architects
Interactive
Designers
Visual
Designers
Content
Strategists

11. 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

12. What is UX
a person's perceptions and responses
that result from the use or anticipated
use of a product, system or service
ISO1924

13. Includes The Users’
emotions, beliefs, preferences, perceptions,
physical and psychological responses,
behaviors and accomplishments
that occur before, during and after use

14. Influential Factors
System
User
What
Who
Context of Use
Why
When
Where

15. Everything That Affects A User’s Interaction

16. Meet the users’ needs & reach business goals
Solve business problems!
Improve communication!
Drive adoption & productivity!
Ensure profitability!
Enjoyable to use!

17. Meet the users’ needs & reach business goals
Make people
happy by creating
great experiences

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
Bad Experience
Undesired Behavior
Negative Impact

19. 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

21. User Centered Design Process
01 02 03 04 05
RESEARCH
ANALYZE
IDEATE
EVALUATE
STYLIZE
BUILD

22. ROUND 2
Developer

23. A Developer’s Approach to UX
!
!
!
!
White boarding
Wireframing
Prototyping
Implementation
23

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

25. Wireframes & Prototypes
!
!
!
!
!
Think “Skeleton”
Sketch to Screen
Annotated User Interface
Shareable
Testable
25

26. DEMO
26

27. Disclaimer
! Previous 4 slides are an example of how not to conduct development tasks with
users
! More on that later
27

28. 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

29. DEMO
29

30. 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.

31. TIE MATCH
Designer
Developer

32. User Centered Design Process
01 02 03 04 05
RESEARCH
ANALYZE
IDEATE
EVALUATE
STYLIZE
BUILD

33. 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

34. 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. 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

36. © 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.