usability day fmh - ux workshop (1)

86
www.outsystems.com UX @OUTSYSTEMS Usability Day 2015 0.1

Upload: ricardo-luiz

Post on 11-Feb-2017

160 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Usability Day FMH - UX Workshop (1)

www.outsystems.com

UX @OUTSYSTEMSUsability Day 2015

0.1

Page 2: Usability Day FMH - UX Workshop (1)

www.outsystems.com2 © OutSystems. All Rights Reserved 2

Lourenço RodriguesUX @Customer [email protected]

Page 3: Usability Day FMH - UX Workshop (1)

www.outsystems.com3 © OutSystems. All Rights Reserved 3

Ricardo LuizUX / UI Expert Services [email protected]

Page 4: Usability Day FMH - UX Workshop (1)

The OutSystems® Platform

Deliver enterprise web and mobile applications. Fast.

• Fast Development of APPs• Develop once for all devices• Rapid and continuous iteration

• See it at www.OutSystems.com

Page 5: Usability Day FMH - UX Workshop (1)

www.outsystems.com5 © OutSystems. All Rights Reserved 5

About OutSystems

Page 6: Usability Day FMH - UX Workshop (1)

www.outsystems.com6 © OutSystems. All Rights Reserved 6

Some of our CustomersDifferent Industries, Similar IT Challenges

Page 7: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

User Experience (UX) is a lot more than pretty interfaces*.

Poor UX leads to low user adoption, lost sales and costs millions in employee training and support.

* We can help out to get pretty interfaces as well.

Page 8: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX is Critical!

The failure of Avon Products $125 million implementation of SAP software is the latest – and perhaps most dramatic – example of how usability has become a critical issue in the workplace.

http://blogs.wsj.com/cio/2013/12/11/avons-failed-sap-implementation-reflects-rise-of-usability/

Page 9: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX is Critical!Why you need UX?

An application which is built without regard to how it will be used is often condemned to suffer from weak user adoption, productivity losses and lost business.

According to the IEEE, 15% of all projects are abandoned, and of the top twelve reasons projects fail, three are directly related to not getting user experience right.

At OutSystems we’re all about Rapid Application Delivery, and usability, so through the last years we’ve developed a pragmatic approach to UX design to be applied in our agile development projects. Through this approach we’ve developed hundred of applications with great user experience.

Page 10: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Why UX?

How to create a winning App?

Page 11: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Why UX?

Is it enough to create a pretty interface?

Page 12: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Why UX?

What is usability?

Page 13: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers Ubiquitous

Pro-active use of various mediums

Task-FocusFit to user and its specific tasks

CognitiveLeverage conventions and learning

PhysiologicalRespond to how the brain works

Page 14: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers

Ubiquitous

Task-Focus

Cognitive

Physiologicalbusiness and user context

independent

highly dependent on business and user context

Page 15: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers Ubiquitous

Pro-active use of various mediums

Task-FocusFit to user and its specific tasks

CognitiveLeverage of conventions and learning

PhysiologicalRespond to how the brain works

Page 16: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

Page 17: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers Ubiquitous

Pro-active use of various mediums

Task-FocusFit to user and its specific tasks

CognitiveLeverage conventions and learning

PhysiologicalRespond to how the brain works

Page 18: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX Workshop

Page 19: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

Page 20: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers

Ubiquitous

Task-Focus

Cognitive

Physiological

Tools & Frameworks

Page 21: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

Page 22: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

usab

ility

laye

rs UbiquitousPro-active use of various mediums

Task-FocusFit to user and its specific tasks

CognitiveLeverage of conventions and learning

PhysiologicalRespond to how the brain works

Page 23: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

Usability means different thingsfor different users

Page 24: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

No Crystal Ball?User Interviews or User Testing

Page 25: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers Ubiquitous

Pro-active use of various mediums

Task-FocusFit to user and its specific tasks

CognitiveLeverage of conventions and learning

PhysiologicalRespond to how the brain works

Page 26: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brain

Learning ApplicationsPro-active

Context-aware

Page 27: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

The UX Brainus

abili

ty la

yers

Ubiquitous

Task-Focus

Cognitive

Physiological

highly dependent on business and user context

UXdesign

Page 28: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX Design

UXdesign

Page 29: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Vis

ual D

esig

n

Live

Sty

legu

ide

Go

Live

Page 30: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Define clear goals

Understand the business

Interview main stakeholders

Review current application(s)

Get application analytics

Figure out the different user profiles

Identify what to ask the users

Bus

ines

s A

naly

sis

Page 31: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX ConceptMacro Plan

Kick-Off Meeting

Workshop Plan

Clarify Business Goals

DAY 1

Process Data

App Analytics

Detailed Analysis

Vision Document

DAY 2 DAY 3

Wireframes development

Share initial Vision with stakeholders

DAY 4

Usability Testing of Wireframes

with real users

Wireframes development

Describe Business Processes

User Interviews

App Walkthrough

DAY 5

Wireframes review

Process Feedback

Vision Presentation

Page 32: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Case Study: Real Estate Company

Profile

> Big Company

> In south American country

> Evaluate, buy, remodel, sell and rent properties

> Several teams and roles

> Work in office, “on the go” and in the properties

Challenges

> Work supported by Excel and paper forms

> A lot of business processes, entities, attributes

> One Application, multiple roles and devices

> Work remotely from Portugal

> Indirect access to end-users (!)

> 3 days UX engagement

Page 33: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

3 Days UX ConceptMacro Plan

Kick-Off MeetingClarify Priorities and UX Scope

Describe Business Processes

Initial Questions and Requests

DAY 1

Client Meeting

Q&A

Process Walkthrough

DAY 2 DAY 3

Wireframes development

Visual Designs Request

DAY 4

Presentation Meeting

Wireframes +

Visual Designs

Process Data, Detailed Analysis

Collect Questions, Ideas, Sketches

Wireframes development

Wireframes development

Page 34: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis

Page 35: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis Property Assessment Form (12 pages)

Page 36: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis Seed / sample data

Page 37: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis Client mockups

Page 38: Usability Day FMH - UX Workshop (1)

CONTEXT IS KING

Don’t learn the business with the usersCreate a context rich environment

Identify goals and constraints

Page 39: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Let’s meet the users

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Page 40: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UserTechnology

The car alone will not win any competitions

without a great fit with its driver

Use

r Res

earc

h

Page 41: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Go to where your users areU

ser R

esea

rch

Page 42: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Use

r Res

earc

hPlanning

Identify the different user profiles

Talk, at least, to 2 users for each profile

Dress appropriately – blend in

Don’t take a committee – 2 people, max 3

Bring someone they already trust

Go analog – digital is scary

Page 43: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Use

r Res

earc

hWhat To Do

Create rapport

Compliments and Complaints

Where do they spend their time

Known Unknowns vs. Unknown Unknowns

3 things we must fix

3 things we cannot break

Gather, organize, prioritize

Page 44: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Use

r Res

earc

hTake notes

Page 45: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Use

r Res

earc

hAsk Questions & Understand

Page 46: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Use

r Res

earc

hQuestion the status quo

Page 47: Usability Day FMH - UX Workshop (1)

NOTHING LIKE WATCHING CURRENT USAGE AND UNDERSTAND WHAT

DRIVES ITWhen we watch the users in their natural environment we get

real data on how they use the system and what for, so we discover the natural journey and can identify gaps with the

intended usage of the system(s).

Shadow IT can be discovered at this stage.

Page 48: Usability Day FMH - UX Workshop (1)

NEVER ASK THE USER WHAT HE/SHE WANTS

The users will report different needs… the challenge is to get what is the root of those needs.

When you tap into that, you will solve a problem and make users lives easier.

Page 49: Usability Day FMH - UX Workshop (1)

TIMES CHANGE, PEOPLE CHANGE… NEW NEEDS ARISE!

Page 50: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Fail fast or fail loudly

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Page 51: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Don’t let ideas escape

Rich context makes it a ton easier

Information organization is key

Keep sketching

IA comes hand-in-hand with mockups

Challenge designs continuously

Wire

fram

es

Page 52: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Wireframes are quick to produce and a great tool to gather feedback, early on, from stakeholders and even users.

Feedback is focused on function, information architecture, user tasks, user interactions, and so on, rather than being lost in graphic details or implementation glitches.

Page 53: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 54: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 55: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 56: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 57: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 58: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 59: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Wire

fram

es

Page 60: Usability Day FMH - UX Workshop (1)

MOCKUPS ARE A POWERFULCHANGE MANAGEMENT TOOL

Everyone can understand what the changes meanand where the company is headed

You can defeat the unknown … make change easier!

Page 61: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Vis

ual D

esig

n

Page 62: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

The Visual Design is created over the wireframes to support the and extend the developed concept.

It is custom built to implement your branding and make use of the OutSystems platform’s patterns and widgets.

Page 63: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

Page 64: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

Page 65: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

Page 66: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

Page 67: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Vis

ual D

esig

n

Page 68: Usability Day FMH - UX Workshop (1)

VISUAL DESIGN IS KEYFOR INITIAL ADOPTION

Usability benefits only kick in after the initial impression

Page 69: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Vis

ual D

esig

n

Live

Sty

legu

ide

Page 70: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Why a Live Styleguide?

Styleguides are key for consistency and quality perception … but also easily forgotten.

Live Styleguides support development, by providing snippets of code.

Living Styleguides contain ready-to-use components by development, abstracting implementation details.

Live

Sty

legu

ide

Page 71: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

OutSystems Living Styleguide

Web blocks ready to use by developers

not copy-paste, just drag-and-drop …

Live

Sty

legu

ide

Page 72: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

OutSystems Living StyleguideLi

ve S

tyle

guid

e

SILK UI Framework

Page 73: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

OutSystems Living StyleguideLi

ve S

tyle

guid

e

View Live Example

Page 74: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Responsive Live Styleguide

Page 75: Usability Day FMH - UX Workshop (1)

A LIVE STYLE GUIDE GETS YOU IN THE DOOR

By creating a ready-to-use componentyou jump start the development project

Page 76: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Vis

ual D

esig

n

Live

Sty

legu

ide

Go

Live

Page 77: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Keep it real

Keep testing with real users

Identify user difficulties

Prepare users for what’s coming

Understand rampup needed for users

Teasers and Presentation Videos

Controlled rollout with a BETA version

Go

Live

Page 78: Usability Day FMH - UX Workshop (1)

IT AIN’T OVER UNTIL THE FAT USER SINGS

It’s easy to get it wrongStay close to the users and react, fast

Page 79: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

Great Delivery in a Nutshell

Discover the PathInitiation

Face Time

VisualRequirements

Top User Stories

Create the Experience

Strong Vision

Sprint Development

ConstantValidation

IterativeDevelopment

Make it RealSolution Release

Sanity Check

Have WOWs

Rapid Tuning

Page 80: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

DevelopSupport, Review

Test

DesignStrategy, Structure

Visuals

User Experience Design

Stakeholder InterviewsCurrent Site(s) AnalyticsCompetitor AnalysisUser ResearchPersonas DefinitionMain Use Cases

Design Concept

Information ArchitectureNavig. and Information DesignWireframesContent StrategyVisual Design

DiscoverGoals, Context

Research

Copy GuidelinesDesign GuidelinesDevelopment SupportUsability ReviewUsability Testing

Typical Activities

Page 81: Usability Day FMH - UX Workshop (1)

www.outsystems.com© OutSystems. All Rights Reserved

UX/UI FoundationActivities

User Experience

Understand the challenge and define an approach/vision

Visual Design

Define the visual for the application(s) with the customer branding

Live Styleguide

Complete framework with dozens of ready to use patterns and widgets

● Learn about business goals

● Review current apps or processes

● Research user needs

● Develop approach and app layouts

● Introduce customer branding

● Based on agreed approach develop a pixel perfect design

● Review pattern and widget design to fit overall theme

● Adapt one, or more, of the existing OutSystems styleguides to match defined approach

● Create the specific app layouts and add identified patterns, following the approved design

● Provide micro-site and sample pages, demonstrating the usage of the styleguide

Page 82: Usability Day FMH - UX Workshop (1)

www.outsystems.com82 © OutSystems. All Rights Reserved 82

Mobile UX OfferProject Timeline

Initiation Implementation Rollout

UX Concept UX AssessmentLive StyleGuide

UX Mentoring Now CustomizationTrain your team on how to create great experiences

Develop a solid vision for your app which will empower its users and make it successful

Get a real live styleguide your development team can use to build beautiful applications

Get practical usability recommendations to improve your existing application

Get your iOS and Android app developed to publish your app to the stores or release internally

Includes UI DesignGet a modern and effective enterprise web design for your responsive or mobile app

Page 83: Usability Day FMH - UX Workshop (1)

www.outsystems.com/ux-for-it/

Page 84: Usability Day FMH - UX Workshop (1)

www.outsystems.com84 © OutSystems. All Rights Reserved 84

UF

ser

irst

Page 85: Usability Day FMH - UX Workshop (1)

www.outsystems.com85 © OutSystems. All Rights Reserved 85

Page 86: Usability Day FMH - UX Workshop (1)

Thanks

May the UX Force be with you all...