Usability Day FMH - UX Workshop (1)

www.outsystems.com

UX @OUTSYSTEMSUsability Day 2015

Lourenço RodriguesUX @Customer Experiencelourenco.rodrigues@outsystems.com

Ricardo LuizUX / UI Expert Services Leadricardo.luiz@outsystems.com

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

About OutSystems

Some of our CustomersDifferent Industries, Similar IT Challenges

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.

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/

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.

Why UX?

How to create a winning App?

Why UX?

Is it enough to create a pretty interface?

Why UX?

What is usability?

The UX Brainus

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

The UX Brainus

Ubiquitous

Task-Focus

Cognitive

Physiologicalbusiness and user context

independent

highly dependent on business and user context

The UX Brainus

yers Ubiquitous

CognitiveLeverage of conventions and learning

The UX Brain

The UX Brainus

yers Ubiquitous

CognitiveLeverage conventions and learning

UX Workshop

The UX Brain

The UX Brainus

Ubiquitous

Task-Focus

Cognitive

Physiological

Tools & Frameworks

The UX Brain

rs UbiquitousPro-active use of various mediums

The UX Brain

Usability means different thingsfor different users

The UX Brain

No Crystal Ball?User Interviews or User Testing

The UX Brainus

yers Ubiquitous

The UX Brain

Learning ApplicationsPro-active

Context-aware

The UX Brainus

Ubiquitous

Task-Focus

Cognitive

Physiological

highly dependent on business and user context

UXdesign

UX Design

UXdesign

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

UX ConceptMacro Plan

Kick-Off Meeting

Workshop Plan

Clarify Business Goals

Process Data

App Analytics

Detailed Analysis

Vision Document

DAY 2 DAY 3

Wireframes development

Share initial Vision with stakeholders

Usability Testing of Wireframes

with real users

Describe Business Processes

User Interviews

App Walkthrough

Wireframes review

Process Feedback

Vision Presentation

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

3 Days UX ConceptMacro Plan

Kick-Off MeetingClarify Priorities and UX Scope

Describe Business Processes

Initial Questions and Requests

Client Meeting

Process Walkthrough

DAY 2 DAY 3

Visual Designs Request

Presentation Meeting

Wireframes +

Visual Designs

Process Data, Detailed Analysis

Collect Questions, Ideas, Sketches

sis Property Assessment Form (12 pages)

sis Seed / sample data

sis Client mockups

CONTEXT IS KING

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

Identify goals and constraints

Let’s meet the users

UserTechnology

The car alone will not win any competitions

without a great fit with its driver

Go to where your users areU

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

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

hTake notes

hAsk Questions & Understand

hQuestion the status quo

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.

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.

TIMES CHANGE, PEOPLE CHANGE… NEW NEEDS ARISE!

Fail fast or fail loudly

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

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.

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!

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.

VISUAL DESIGN IS KEYFOR INITIAL ADOPTION

Usability benefits only kick in after the initial impression

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.

OutSystems Living Styleguide

Web blocks ready to use by developers

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

OutSystems Living StyleguideLi

SILK UI Framework

OutSystems Living StyleguideLi

View Live Example

Responsive Live Styleguide

A LIVE STYLE GUIDE GETS YOU IN THE DOOR

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

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

IT AIN’T OVER UNTIL THE FAT USER SINGS

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

Great Delivery in a Nutshell

Discover the PathInitiation

Face Time

VisualRequirements

Usability Day FMH - UX Workshop (1)

Documents

UX - Usability - Keynote SAP UX Strategy

UXPA DC UX 101 Workshop - Usability Testing

Usability Techniques for UX

UX - Usability - Fiori

UXPA DC - UX 101 Intensive Workshop - Usability Testing

Hacking Health Usability Matters UX Workshop

UX Design Usability Testing

Usability vs ux design

Why usability and ux are worth it

Perancangan dan Evaluasi User Interface Smart Grid ... · design were tested using usability and User Experience (UX). Usability test used System Usability Scale (SUS) and UX test

Usability of paid search PPC UX

UX - Usability - Mobile sales applications

UX Sofia 2012 - DIY Mobile Usability Testing Workshop

Intro to Usability (UX) Testing

UX Unconference: Usability Testing

Ux and usability it's no PICNIC

UX Usability Testing

UX Usability Case Study

UX and Usability Workshop Southampton Solent University

10 Usability & UX Guidelines