Introduction to UX Design

Bill Tribble

Senior UX Designer, Mendeley

INTRODUCTION TO UX (USER EXPERIENCE)

@bill_tribble

2WELCOME

@bill_tribble / [email protected]

BILL TRIBBLESenior UX Designer

Mendeley

AGENDA

‣ What exactly is User Experience? And who does it? ‣ UX as Digital Product Design ‣ UX Processes ‣ In the Real World…

3

4WHAT MOST PEOPLE THINK UX IS…

‣ Prototyping ‣ Interface layout

‣ Interface design ‣ Visual design ‣ Taxonomy creation

‣ Terminology creation

‣ Copy writing ‣ Presentation and speaking

‣ Working tightly with programmers

‣ Workshop leading ‣ Company culture evangelism ‣ Communication to stakeholders

‣ Field research ‣ Face to face interviewing ‣ Creation and administering of tests ‣ Gathering, organizing statistics ‣ Documentation of personas and findings ‣ Product design ‣ Feature writing ‣ Requirement writing ‣ Graphic arts ‣ Interaction design ‣ Information Architecture ‣ Usability

5WHAT UX ACTUALLY IS…

‣ Prototyping ‣ Interface layout

‣ Interface design ‣ Visual design ‣ Taxonomy creation

‣ Terminology creation

‣ Copy writing ‣ Presentation and speaking

‣ Working tightly with programmers

‣ Workshop leading ‣ Company culture evangelism ‣ Communication to stakeholders

‣ Field research ‣ Face to face interviewing ‣ Creation and administering of tests ‣ Gathering, organizing statistics ‣ Documentation of personas and findings ‣ Product design ‣ Feature writing ‣ Requirement writing ‣ Graphic arts ‣ Interaction design ‣ Information Architecture ‣ Usability

6WHAT IS UX?

“User experience is how a person feels when interfacing with a system or product…”

This includes but is not limited to websites, apps or software.

DESIGNER / DEVELOPER - JACOB GUBE (SIX REVISIONS)

7WHAT IS UX?

“the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal…”

UX LEGEND - JESSE JAMES GARRETT

8WHAT IS UX?

“UX is digital product design”

ME

9DESIGNING THE USER EXPERIENCE

THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO SOLVE IT.

10DESIGNING THE USER EXPERIENCE

USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER

INTRODUCTION TO UX

UX AS DIGITAL PRODUCT DESIGN

11

WHAT IS UX?

UX IS NOT SOME WHOLE NEW THING ‣ It builds on previous generations of design techniques

‣ Human computer interaction (HCI) design

‣ Information architecture

‣ Product design

‣ We’ve always designed for experiences

‣ The only thing that’s changed is the context - digital technology

‣ Digital technology brings a few new challenges and a different structure

12

A SIMPLE OUTLINE

1. Start with an idea for a product

2. What problem are you trying to solve?

3. Who are you trying to solve it for?

4. Write a user-story showing how you solve their problem

5. Design (‘wireframe’) a screen-flow

6. Create a prototype

7. Test the prototype

8. Go back to step 5 and repeat

13

CITYMAPPER

1. Start with an idea for a product

2. What problem are you trying to solve?

3. Who are you trying to solve it for?

4. Write a user-story showing how you solve their problem

5. Design (‘wireframe’) a screen-flow

6. Create a prototype

7. Test the prototype

8. Go back to step 5 and repeat

14

Get me home

Getting home when drunk

Me

Push the button

Get a route home

Made an iOS app instead

I got home when drunk!

INTRODUCTION TO UX

UX PROCESSES15

UX PROCESSES

PROCESS AND THINKING‣ In solving user experience problems, we place the user at the

center of our thinking

‣ UX design requires process, not just tools

‣ Process is not one size fits all

16

UX PROCESSES

User experience design process in five steps:

1. Research & Ideation

2. Information Architecture

3. Wireframing

4. Prototyping

5. User Testing

17

UX PROCESSES




3. Wireframing

4. Prototyping

5. User Testing

18

RESEARCH AND IDEATION

QUESTIONS

‣ Who are our users and what do they need?

‣ What purpose does the product serve for those users?

‣ What are the business goals in creating this product?

‣ What currently exists to serve the same purpose?

19

RESEARCH AND IDEATION 20When my boss and the client are setting unrealistic

goals and I’m responsible for the work

UXreactions.com


GATHERING DATA‣ Conduct user interviews

‣ Conduct user and stakeholder surveys

‣ Review analytic data from existing products

‣ Receive business goals from stakeholders

‣ Establish any known technical limitations

21

RESEARCH AND IDEATION 22

When the products features are set by Marketing

UXreactions.com


REFINING THE DATA‣ User data becomes “personas”

‣ Build a business case for your product or feature

‣ Map out the competition

23


PERSONAS24


PERSONAS25


COMPETITIVE ANALYSIS26

- music app


COMPETITIVE ANALYSIS27

- vocational training app


IDEATION ‣ Sketching workshops!

‣ Rapidly explore and share ideas with stakeholders, clients, users

‣ Exercises may be done over time as data is collected - exploring ideas will open more questions and possibilities.

28

RECOMMENDEDRESOURCE

Google Ventures Design Sprint (online / book)


CLOSE COLLABORATION The research process develops in a number of ways, depending on the product and the experience.

‣ Close collaboration is required at all times with e.g. developers, designers, business analysts, product managers and stakeholders

29

UX PROCESSES




3. Wireframing

4. Prototyping

5. Usability Testing

30

INFORMATION ARCHITECTURE

MAPSThe content of an experience, organized in a logical manner as a basis for how the user will interact with it

‣ Taxonomy of features/functionalities

‣ Hierarchy of content

‣ The process starts out rough and refines through iteration

31


JOURNEY MAPPING The stories that a user may follow through the experience are visualised as flow or journey maps

‣ Journey maps document movement and actions toward an end goal rather than literal locations within an experience

‣ Drawing a map often identifies points of unnecessary complexity which can be streamlined

32


JOURNEY MAPPING33


OBJECT-ORIENTED UX34

UX PROCESSES




3. Wireframing

4. Prototyping


35

WIREFRAMING

Wireframes (or schematics) are diagrams that establish layout, hierarchy of content, and the states of various interactive elements

‣ Wireframes are functional drawings

‣ There is no one correct style of drafting a wireframe

‣ Wireframes should start very rough (pencil sketches) and be refined through iteration

36

WIREFRAMING

START ON PAPER37

WIREFRAMING

SIMPLE WIRE FRAMING38

WIREFRAMING

LOW TO HIGH-FIDELITY39

UX PROCESSES




3. Wireframing

4. Prototyping


40

PROTOTYPING

DESIGNING INTERACTIVITY‣ Prototypes take a variety of formats, from clickable PDFs, to coded demos, to

scale models of physical objects

‣ Like wireframes, they help facilitate decisions quickly

‣ Used with teams inside the company or outside with users

41

PROTOTYPING

DESIGNING INTERACTIVITY42

Copyright (c) Make Us Proud, 2016

43

Copyright (c) Make Us Proud, 2016

UX PROCESSES




3. Wireframing

4. Prototyping


44

FIRST TIME USABILITY TESTING

GET REAL FEEDBACKThe best method to refine an experience is to involve real users and gather their reactions to interacting with it

‣ Start with simple, lo-fi prototypes

‣ Refine your visual design as you iterate on your ideas

45

FIRST TIME USABILITY TESTING 46

UX PROCESSES

ONE SIZE DOESN’T FIT ALL‣ These processes all vary from team to team and project to project

‣ You learn to tailor the processes used depending on the problem you’re trying to solve

47

INTRODUCTION TO UX

IN THE REAL WORLD…48

INTRODUCTION TO UX

WHO DOES UX?• User Researcher - Identifies user behaviours, goals and needs through

interviews, studies and surveys

• Information Architect (IA) - Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer) -Defines interactions, user flows, wireframes, and affordances of a system

• UI Developer - Builds the system by interpreting the functional specification, sitemaps, wireframes

49

IN THE REAL WORLD…

‣ The field of user experience design is young and rapidly evolving

‣ Keeping up with the contemporary methodologies is vital

‣ Learn actively through books and classes as well as passively through being a critical user of digital products

50

AN EVOLVING INDUSTRY

51IN THE REAL WORLD…

NEVER STOP LEARNING ATTEND INDUSTRY EVENTS

RECOMMENDEDEVENTS‣ IxDA ‣ UXPA

IN THE REAL WORLD…

CAREER OPPORTUNITIES‣ Product company - From product-wide strategy, to focusing on a

single experience and constantly refining it.

‣ Agency - work on a variety of client projects for short periods of time to support first-time launches or major updates

‣ Startup - Help to establish a product and rapidly iterate through

variations in the core experience

‣ Freelancer - Lend support to a variety of teams or take on smaller projects independently

52

INTRODUCTION TO UX

SUMMARY‣ User experience design is about solving a problem for a specific

user type using design thinking

‣ UX comes from ergonomics, usability and psychology and uses elements of all three

‣ Many different specialisms working together for a common goal.

‣ We don’t give people what they want - we try to understand what they need through observation, questioning and testing

53

INTRODUCTION TO UX

Q&A54

INTRODUCTION TO UX

RECOMMENDED BOOKS'Don't Make Me Think: Revisited' by Steve Krug

'Design is a Job' by Mike Monteiro

‘How to make sense of any mess’ - Abby Covert

‘Lean UX’ Jeff Gothelf

‘Google Ventures Design Sprint’

55

INTRODUCTION TO UX

RECOMMENDED TOOLSWireframing - Sketchapp, Pen & Paper

Prototyping - Marvel, Invision

Surveys - TypeForm, SurveyMonkey

56

RECOMMENDED SITESUXdesign.cc, 52 Weeks of UX, Medium, UXMag.com, Dezeen

(not just UX)

Keep in touch :)

@bill_tribble

http://btribble.com

THANKS FOR COMING!CONCLUSION