uxd lesson 1 - intro to ux

Vince Baskerville @whoisvince

Sr. User Experience Strategist , Pardot (a Salesforce company)

INTRO TO USER EXPERIENCE

LEARNING OBJECTIVES‣ Describe what the UX field encompasses and how it

relates to other disciplines. ‣ Identify the different roles within UX and the

responsibilities of each. ‣ Outline the stages of a more traditional design process

compared to newer processes (lean, agile, etc.) ‣ Identify the different stages of the design process and the

deliverables for each.

AGENDA‣ What is UX? ‣ Roles and Responsibilities ‣ Process

WHAT IS USER EXPERIENCE?

EXERCISE

TIMING

DELIVERABLE

KEY OBJECTIVE(S)

ACTIVITY

Define UX as a group

3 min 2 min 5 min 10 min

1. Write down your definition of UX on a post-it note 2. Place your post-it on the white board 3. I’ll read and group definitions 4. Discuss the categories and what they might mean

Affinity map of definitions

EVERYDAY UX

JESSE JAMES GARRETT

UX is “the design of anything independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal”.

WIKIPEDIA

EXPERIENTIAL DISCIPLINES

PhilosophyAnthropologySociologyPsychology

UX != UI‣ UX is about the experience ‣ UI is about the interface

EXAMPLE: INSTAGRAM‣ UI design is

responsible for WHAT will be on screen: look and feel, color, typography, etc.

‣ UX design is responsible for HOW users take photos, apply filters, share photos, etc.

DELIVERABLES ≠ THE ENTIRETY OF UX

SCIENCE !

Truth-driven Inductive Logical

Convergent

DESIGN !Solution-driven

Abductive Creative

Divergent

ROLES & RESPONSIBILITIES

User Researcher Identifies user behaviors, goals and needs through interviews, studies and surveys !Information Architect (IA) Defines the structure of a system, how content is described, organized and discovered !Interaction Designer (IxD/UX Designer) Defines interactions, user flows, wireframes, and affordances of a system

Usability Analyst Tests prototypes and working products with users and helps integrate feedback into future design iterations !Visual Designer Focuses on graphic elements of a digital interface: color treatments, typography, visual language, etc. !Experience Designer Defines a holistic vision of how users interact with products and/or services

Identify user needs and behaviors ‣ interviews ‣ surveys ‣ existing data ! Carry out user testing

EXAMPLE: USER RESEARCHER

EXAMPLE: INFORMATION ARCHITECT

+ + + + + +

Saved Search

Starred

Following

Recent

Popular

Nearby

Filter

Search

Results

Project

Gallery

Submit

New Project

My Profile

Settings

Edit Profile

Adv Options

Edit Notification

Edit SharingUsers

StarredUser Profile

Users Submits

My Projects

Launch

Users Projects

Edit Project

Download

Other User

Not Logged In

My Submits

EXAMPLE: INTERACTION DESIGNER“Affordance: A potential action that is made possible by a given object”

EXERCISE

TIMING

DELIVERABLE

KEY OBJECTIVE(S)

ACTIVITY

Define a few Roles & Responsibilities as a group, for your product

1 min 8 min 9 min

1. Split into 3 groups 2. Discuss roles & responsibilities for your product 3. I’ll read each group definitions

Group Definitions

PROCESS

5 D’S - WATERFALL‣ Discover ‣ Define ‣ Design ‣ Develop ‣ Deliver

PROCESS: WATERFALL

This is the stage where we gather all available information, do some brainstorming, make a competitive analysis and define the project scope. Once the scope is defined, we proceed to define the personas, create user stories/use cases to help us design. !UX deliverables at this stage include Personas and User Scenarios.

1. DISCOVER

PROCESS: WATERFALL

DESIGN DELIVERABLES - PERSONAS

PROCESS: WATERFALL

At this stage, we work on creating the Interaction Model, define the Content & Functionality Requirements, Information Architecture, and come up with a Project Plan along with milestones and deliverables. !UX deliverables at this stage includes Product Requirement Document.

2. DEFINE

PROCESS: WATERFALL

DESIGN DELIVERABLES - PRODUCT REQUIREMENTS

PROCESS: WATERFALL

All ideas are put into paper sketches and go through a usability evaluation. Thereafter, these sketches are transformed into wireframes and shown to our clients. Once approved, we proceed with creating the mockups/UI designs. !UX deliverables at this stage include a Sitemap, User flows, Wireframes and UI Designs.

3. DESIGN

PROCESS: WATERFALL

DESIGN DELIVERABLES - USER FLOWSUser

Environment 2

options

action

optional

Roadblock 3

options / description

option 3

validation

3rd Party Modal

action

grants user entitlements

Nochecks

credentials

3rd Party

Confirmation Page

Full Product

system check

checks/return

Roadblock 6

Security Q&A inputs required

inputs valid?

3rd Party Modal

action

Yesedit DB

3rd Party Service

User Data Base

Environment 2

Environment 1

Logged in w/User

SubscriberLogged in w/

Mobile PaidLogged in w/

New / Anon

Roadblock 1

option 2

action

option 1

Roadblock 2

existing

3rd Party

Data Update

Logged in w/User

WebLogged in w/

Mobile

free pr pad?

Roadblock 4

validationNo Yes

Button or Roadblock 5paid content

check for valid subscription

3rd Party DB

Environment 1

Environment 1 Page

validation

function Backend Process

action

PROCESS: WATERFALL

DESIGN DELIVERABLES - WIREFRAMES1. Note label Note label 1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.

Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. 1.2 Si quaedam nimis antique, si peraque dure dicere credit eos.

2. Note label Note label 2.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.

5. Note label Note label Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Global Header

Global Footer

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Global Header

Global Footer

PROCESS: WATERFALL

DESIGN DELIVERABLES - SPECIFICATIONS

Carrier 12:00 PM

SubmissionCaption

by User NameDescription limited to a character limit to be determined in design.

If user is not logged in, display Dropbox login footer; on tap of Share except display T4 Dropbox login.

Feed Title of Project

Star Submit Download

Project DetailsIn Header: Project submission stats,

Project Title.

In Body: Project Image/Video, User Name, Title, Description, and optional

Private flag

Starred count, # of users who have starred this project.

Goal Gauge displays total submissions and goal.

Tap Image to view full screen or play video.

Download to DropboxDo you want to download the current contents of this project? Live updates are currently too hard to handle for us.

You can always download again for now.

Cancel OK

StarToggle button to add to/remove from

a user's starred items--available in Profile Page T7. Animation: Change

highlight state.

Check available Dropbox space from user requesting download against project size. If user taps OK, download contents in same order as they are displayed.

Download Too BigYou don’t have enough room in your Dropbox. We know this isnt the best solution, we are working on it. Would you like to download everything you

can now?

Cancel OK

3/7ColumnsCommentsSubmissions#Hashtag

Project ContentsSorted by Capture Time as opposed to time of Submission time.

Swipe anywhere on below this bar to navigate Columns. Default column is Submissions.

Drag List up and push project details off screen and lock the column nav to the top.

Pull down to refresh

Project with Submissions

Category | ## | ## | ## Days left | ##

Comments Submissions #Hashtag

T 5.1 Gallery View Tap Submission Thumbnail to view submissions as a gallery. Includes user name of the submitter. Tap to view

Download to DropboxTap to display confirmation message. download available contents of the project. Any user may download a public project..

Back to T2Tap to view Home page. Transitional

animation: slide right from left

T5.3 Project OptionsTap to view popover with Flag, Share to Facebook, to Twitter, to Email, to Google+. Transitional animation: slide up from bottom. For the projector creator display Delete in place of Flag Transitional animation: slide up popover *See Flag/Delete Process

PROCESS: WATERFALL

At this stage the product goes into development based on the the deliverables from the design phase. UX resources are there to provide clarifications and revisit wireframes and designs when technical constraints become apparent. !No key UX deliverables at this stage.

4. DEVELOPMENT

PROCESS: WATERFALL

At this stage, the product is heavily tested and prepared for deployment. Usability tests are carried out with major issues corrected and other observations captured for the next release. !UX deliverable at this stage is the Usability Test Report.

5. DELIVER

PROCESS: LEAN

PROCESS: AGILE

PROCESS: DESIGN THINKING

DESIGN THINKING

EXERCISE

TIMING

DELIVERABLE

KEY OBJECTIVE(S)

ACTIVITY

Company & Role Breakdowns

10 min

1. How would you define what the potential responsibilities, and a few deliverables for the mentioned companies & roles

2. Discuss answers

Individual Written Thoughts

LEARNING OBJECTIVES‣ Describe what the UX field encompasses and how it

relates to other disciplines. ‣ Identify the different roles within UX and the

responsibilities of each. ‣ Outline the stages of a more traditional design process

compared to newer processes (lean, agile, etc.) ‣ Identify the different stages of the design process and the

deliverables for each.

Q&AINTRO TO USER EXPERIENCE

EXIT TICKETSINTRO TO USER EXPERIENCE

HTTP://GA.CO/UXDTICKET

uxd lesson 1 - intro to ux

Design

ui/ux foundations - intro to design

intro to systems thinking (for ux)

intro to ux - summer sampler series

intro to ux methods (kcdc 2013)

red hat user experience ux design exchange program - forum...

intro to ia/ixd/uxd in the agency world

intro to ux development process

ux session by bonolota uxd at bicc - digital world and basis...

design for www ux intro

uxd kosmologija

ux intro for rails girls canberra 2013

intro to ux design course - images.careerfoundry.com

ux hong kong 2015 - foundations intro

new context conference: intro to lean ux

aalborg universitet ux, xd & uxd user experience...

experience) ux (user & a/b testing · user experience...

uxd unit 2 - educlashdl.mcaclash.com/uxd-unit-2_syl.pdfthe...

uxd codestrong

intro to ux women@google sa conference

ux intro 2017