Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

What is User Experience?

•
•
Chuck Mallott
Chuck Mallott

This document lays out a 6-month plan to establish a user experience (UX) design function at SPS Commerce. The plan includes developing user personas, publishing design heuristics, beginning product-specific UX tasks like user research and prototyping, establishing common interface design patterns, and socializing a design-thinking approach across teams. The goal is to create software with intuitive, usable interfaces that provide value to both customers and the business.

1 of 49
Download to read offline
UX Laying a Foundation for User Experience Design at SPS Commerce Chuck Mallott UX Design Manager 29 OCT 2013
Hello. 2
Simon Sinek: People don’t buy what you do; they buy why you do it. 3
WHY HOW WHAT Make smart, powerful and efficient software that delights users. Create a great user experience built upon modern technology and design standards. Research, testing, discovery, sketching, wire-framing, designing, prototyping, iterating. 4
UX provides design direction and insight to make smart, powerful, efficient software that delights users. 5
What is UX? 6
HNO USER EXPERIENCE G ETIN K MAR TEC ES & SAL What is feasible, given time, resources and budget? LOG Y A voice for our customers What is desirable to our customers? What is the value to our business? How do we get more customers? 7
8 Source: stuffhappens.com by Eric Burke
9 Source: stuffhappens.com by Eric Burke
10 Source: stuffhappens.com by Eric Burke
UI, UX! What’s the difference? UI (USER INTERFACE) ypically, the means by T which a person interacts with a website or application. does it look like? What ow do I use it? H UX (USER EXPERIENCE) The perceived quality of engagement a person has when interacting with a specific design. How do I feel? Do I trust these people? 11
User Experience Design UXD The multi-disciplinary approach of designing online experiences with a focus on the user. Who is using this? What does the user need? How will the user respond? 12
UX Themes 1 Design, not Decoration 2 Product Maturity 3 Problem Solving 4 Interface-Driven Architecture 13
UX Themes 1 Design, not Decoration a.k.a. Form vs. Function 14
Frank Lloyd Wright: Form and function should be one, joined in spiritual union. 15
16
17
Steve Jobs: Design is not just what it looks like and feels like. Design is how it works. 18
UX Themes 2 Product Maturity 19
The Goal Moving SPS Commerce products up the pyramid of experiential maturity Focused on Experiences Has personal significance MEANINGFUL Requires values PLEASURABLE This is the chasm that is REALLY hard for organizations to cross Memorable experience worth sharing CONVENIENT Super easy-to-use, works like I think Requires strengths USABLE Can be used without difficulty RELIABLE Requires skills Is available and accurate FUNCTIONAL Works as programmed Focused on Tasks 20 Adapted from Stephen Anderson’s product maturity model http://goo.gl/OX3ZP)
Forrester Research: Websites that are hard to use frustrate customers, forfeit revenue and erode brands. 21
UX Themes 3 Problem Solving What do our users need? 22
23
UX is problem solving Identifying the Problem RESEARCH “Users are confused by our navigation.” Crafting the Solution IA DESIGN “How can we organize our content so it aligns with what users are expecting to find?” “How do we make sure the navigation elements look nested and clickable? DEVELOPMENT “What is the best way to build this nav bar?” “What happens on a tablet or phone?” Tools & Deliverables ✓ Contextual Observation ✓ Mental Maps ✓ Mood Boards ✓ JavaScript ✓ Ruby ✓ Taxonomy Maps ✓ Style Guides ✓ HTML ✓ Python ✓ User Interviews ✓ Card Sorting ✓ Design Patterns ✓ CSS ✓ .NET ✓ Usability Testing ✓ Process Flows ✓ Prototypes ✓ Sass ✓ APIs ✓ Personas ✓ Wireframes ✓ Design Composites ✓ PHP ✓ Heuristic Analysis ✓ Site Maps ✓ Typography/Iconography ✓ Prototypes ✓ HTML/CSS 24
Jason Fried: The design is done when the problem goes away. 25
UX Themes 4 Interface-Driven Architecture Allows a variety of stakeholders to discover what the real needs of the project are — before any code is written. 26
Ben Schneiderman: A picture is worth a thousand words. An interface is worth a thousand pictures. 27
Let’s do this ... 28
Before this ... 29
And definitely before any of this ... 30
s w e e t s p o t When? The earlier the better DEPLOY DEVELOP PROTOTYPE DESIGN PLAN ! IDEA PRIORITIZE $ Cost of making changes 31
UX@SPS 32
UX Plan 1 Who are our users? 2 Publish design heuristics 3 Begin product-specific UX tasks 4 Establish UI patterns 5 Socialize design-thinking 33
UX Plan 1 Who are our users? 34
UX Plan 2 Publish design heuristics What the heck is a heuristic? Put simply: General guidelines based on intuitive judgement or common sense. 35
Heuristic Analysis 36
UX Plan 3 Begin product-specific tasks Discovery Design Build ✓ User interviews & contextual observation ✓ Sketches ✓ Prototype ✓ Process flows ✓ Testing & feedback ✓ Wireframes ✓ Iteration ✓ Product-specific personas ✓ Heuristic analysis of existing state ✓ Design patterns ✓ Information architecture & taxonomy exploration ✓ High-resolution mockups ✓ Content strategy 37
What is usable, useful and desirable? UX Design Product Management What is needed and, therefore, valuable? Engineering What is possible and what is not? 38
UX Funnel market data product needs business rules trends analytics requirements user stories Product Management content information architecture visual design UXD front-end development user research usability prototypes wireframes process flows design specs style guide design patterns ? :) Engineering 39
UX Plan 4 Establish UI patterns The brand expressed as a UI 40
Design Patterns g /brandin ✓ Logo avigation ✓ N Layout ✓ Buttons ✓ elements Form ✓ ✓ s l window Moda ography ✓ Typ y nograph ✓ Ico s tification ✓ No g r handlin ✓ Erro s adcrumb ✓ Bre s ata table ✓ D d filtering Tags an ✓ n Paginatio ✓ ✓ Links 41
Applying the design patterns Across Products Retail Universe POS Analytics WebForms Catalog Enablement Tools Across Devices 42
UX Plan 5 Socialize design-thinking 43
44
UX: It’s everyone’s job content information architecture visual design UX DESIGN front-end development user research usability marketing development product management support sales customer service Adapted from Jeremy Johnson’s 2010 and Beyond presentation 45
When? 46
6-Month Timeline UX & Product Management Learning and discovery Persona development Develop and publish design heuristics Product Nomenclature Socialize design-thinking Establish interface design patterns Create and curate a shared design patterns library Product-specific UX work OCT 2013 NOV 2013 DEC 2013 JAN 2014 FEB 2014 MAR 2014 47
Simon Sinek It’s better to go slow in the right direction than to go fast in the wrong direction. 48
Questions? llott uck MaManager Ch gn i UX Des 466 12.844.2 6 @ cma m erce.co scomm llott@sp mallott @chuck huck le.com/c dribbb HipChat @chuckmallott 49

More Related Content

What is User Experience?

  • 1. UX Laying a Foundation for User Experience Design at SPS Commerce Chuck Mallott UX Design Manager 29 OCT 2013
  • 3. Simon Sinek: People don’t buy what you do; they buy why you do it. 3
  • 4. WHY HOW WHAT Make smart, powerful and efficient software that delights users. Create a great user experience built upon modern technology and design standards. Research, testing, discovery, sketching, wire-framing, designing, prototyping, iterating. 4
  • 5. UX provides design direction and insight to make smart, powerful, efficient software that delights users. 5
  • 7. HNO USER EXPERIENCE G ETIN K MAR TEC ES & SAL What is feasible, given time, resources and budget? LOG Y A voice for our customers What is desirable to our customers? What is the value to our business? How do we get more customers? 7
  • 11. UI, UX! What’s the difference? UI (USER INTERFACE) ypically, the means by T which a person interacts with a website or application. does it look like? What ow do I use it? H UX (USER EXPERIENCE) The perceived quality of engagement a person has when interacting with a specific design. How do I feel? Do I trust these people? 11
  • 12. User Experience Design UXD The multi-disciplinary approach of designing online experiences with a focus on the user. Who is using this? What does the user need? How will the user respond? 12
  • 13. UX Themes 1 Design, not Decoration 2 Product Maturity 3 Problem Solving 4 Interface-Driven Architecture 13
  • 14. UX Themes 1 Design, not Decoration a.k.a. Form vs. Function 14
  • 15. Frank Lloyd Wright: Form and function should be one, joined in spiritual union. 15
  • 16. 16
  • 17. 17
  • 18. Steve Jobs: Design is not just what it looks like and feels like. Design is how it works. 18
  • 20. The Goal Moving SPS Commerce products up the pyramid of experiential maturity Focused on Experiences Has personal significance MEANINGFUL Requires values PLEASURABLE This is the chasm that is REALLY hard for organizations to cross Memorable experience worth sharing CONVENIENT Super easy-to-use, works like I think Requires strengths USABLE Can be used without difficulty RELIABLE Requires skills Is available and accurate FUNCTIONAL Works as programmed Focused on Tasks 20 Adapted from Stephen Anderson’s product maturity model http://goo.gl/OX3ZP)
  • 21. Forrester Research: Websites that are hard to use frustrate customers, forfeit revenue and erode brands. 21
  • 22. UX Themes 3 Problem Solving What do our users need? 22
  • 23. 23
  • 24. UX is problem solving Identifying the Problem RESEARCH “Users are confused by our navigation.” Crafting the Solution IA DESIGN “How can we organize our content so it aligns with what users are expecting to find?” “How do we make sure the navigation elements look nested and clickable? DEVELOPMENT “What is the best way to build this nav bar?” “What happens on a tablet or phone?” Tools & Deliverables ✓ Contextual Observation ✓ Mental Maps ✓ Mood Boards ✓ JavaScript ✓ Ruby ✓ Taxonomy Maps ✓ Style Guides ✓ HTML ✓ Python ✓ User Interviews ✓ Card Sorting ✓ Design Patterns ✓ CSS ✓ .NET ✓ Usability Testing ✓ Process Flows ✓ Prototypes ✓ Sass ✓ APIs ✓ Personas ✓ Wireframes ✓ Design Composites ✓ PHP ✓ Heuristic Analysis ✓ Site Maps ✓ Typography/Iconography ✓ Prototypes ✓ HTML/CSS 24
  • 25. Jason Fried: The design is done when the problem goes away. 25
  • 26. UX Themes 4 Interface-Driven Architecture Allows a variety of stakeholders to discover what the real needs of the project are — before any code is written. 26
  • 27. Ben Schneiderman: A picture is worth a thousand words. An interface is worth a thousand pictures. 27
  • 28. Let’s do this ... 28
  • 30. And definitely before any of this ... 30
  • 33. UX Plan 1 Who are our users? 2 Publish design heuristics 3 Begin product-specific UX tasks 4 Establish UI patterns 5 Socialize design-thinking 33
  • 34. UX Plan 1 Who are our users? 34
  • 35. UX Plan 2 Publish design heuristics What the heck is a heuristic? Put simply: General guidelines based on intuitive judgement or common sense. 35
  • 37. UX Plan 3 Begin product-specific tasks Discovery Design Build ✓ User interviews & contextual observation ✓ Sketches ✓ Prototype ✓ Process flows ✓ Testing & feedback ✓ Wireframes ✓ Iteration ✓ Product-specific personas ✓ Heuristic analysis of existing state ✓ Design patterns ✓ Information architecture & taxonomy exploration ✓ High-resolution mockups ✓ Content strategy 37
  • 38. What is usable, useful and desirable? UX Design Product Management What is needed and, therefore, valuable? Engineering What is possible and what is not? 38
  • 39. UX Funnel market data product needs business rules trends analytics requirements user stories Product Management content information architecture visual design UXD front-end development user research usability prototypes wireframes process flows design specs style guide design patterns ? :) Engineering 39
  • 40. UX Plan 4 Establish UI patterns The brand expressed as a UI 40
  • 41. Design Patterns g /brandin ✓ Logo avigation ✓ N Layout ✓ Buttons ✓ elements Form ✓ ✓ s l window Moda ography ✓ Typ y nograph ✓ Ico s tification ✓ No g r handlin ✓ Erro s adcrumb ✓ Bre s ata table ✓ D d filtering Tags an ✓ n Paginatio ✓ ✓ Links 41
  • 42. Applying the design patterns Across Products Retail Universe POS Analytics WebForms Catalog Enablement Tools Across Devices 42
  • 44. 44
  • 45. UX: It’s everyone’s job content information architecture visual design UX DESIGN front-end development user research usability marketing development product management support sales customer service Adapted from Jeremy Johnson’s 2010 and Beyond presentation 45
  • 47. 6-Month Timeline UX & Product Management Learning and discovery Persona development Develop and publish design heuristics Product Nomenclature Socialize design-thinking Establish interface design patterns Create and curate a shared design patterns library Product-specific UX work OCT 2013 NOV 2013 DEC 2013 JAN 2014 FEB 2014 MAR 2014 47
  • 48. Simon Sinek It’s better to go slow in the right direction than to go fast in the wrong direction. 48
  • 49. Questions? llott uck MaManager Ch gn i UX Des 466 12.844.2 6 @ cma m erce.co scomm llott@sp mallott @chuck huck le.com/c dribbb HipChat @chuckmallott 49