usability day fmh - ux workshop (1)
TRANSCRIPT
www.outsystems.com
UX @OUTSYSTEMSUsability Day 2015
0.1
www.outsystems.com2 © OutSystems. All Rights Reserved 2
Lourenço RodriguesUX @Customer [email protected]
www.outsystems.com3 © OutSystems. All Rights Reserved 3
Ricardo LuizUX / UI Expert Services [email protected]
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
www.outsystems.com5 © OutSystems. All Rights Reserved 5
About OutSystems
www.outsystems.com6 © OutSystems. All Rights Reserved 6
Some of our CustomersDifferent Industries, Similar IT Challenges
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.
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/
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.
www.outsystems.com© OutSystems. All Rights Reserved
Why UX?
How to create a winning App?
www.outsystems.com© OutSystems. All Rights Reserved
Why UX?
Is it enough to create a pretty interface?
www.outsystems.com© OutSystems. All Rights Reserved
Why UX?
What is usability?
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
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
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
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
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
www.outsystems.com© OutSystems. All Rights Reserved
UX Workshop
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brainus
abili
ty la
yers
Ubiquitous
Task-Focus
Cognitive
Physiological
Tools & Frameworks
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
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
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
Usability means different thingsfor different users
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
No Crystal Ball?User Interviews or User Testing
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
www.outsystems.com© OutSystems. All Rights Reserved
The UX Brain
Learning ApplicationsPro-active
Context-aware
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
www.outsystems.com© OutSystems. All Rights Reserved
UX Design
UXdesign
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
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
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
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
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
www.outsystems.com© OutSystems. All Rights Reserved
Bus
ines
s A
naly
sis
www.outsystems.com© OutSystems. All Rights Reserved
Bus
ines
s A
naly
sis Property Assessment Form (12 pages)
www.outsystems.com© OutSystems. All Rights Reserved
Bus
ines
s A
naly
sis Seed / sample data
www.outsystems.com© OutSystems. All Rights Reserved
Bus
ines
s A
naly
sis Client mockups
CONTEXT IS KING
Don’t learn the business with the usersCreate a context rich environment
Identify goals and constraints
www.outsystems.com© OutSystems. All Rights Reserved
Let’s meet the users
Bus
ines
s A
naly
sis
Use
r Res
earc
h
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
www.outsystems.com© OutSystems. All Rights Reserved
Go to where your users areU
ser R
esea
rch
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
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
www.outsystems.com© OutSystems. All Rights Reserved
Use
r Res
earc
hTake notes
www.outsystems.com© OutSystems. All Rights Reserved
Use
r Res
earc
hAsk Questions & Understand
www.outsystems.com© OutSystems. All Rights Reserved
Use
r Res
earc
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!
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
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
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.
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
www.outsystems.com© OutSystems. All Rights Reserved
Wire
fram
es
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!
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
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.
www.outsystems.com© OutSystems. All Rights Reserved
Vis
ual D
esig
n
www.outsystems.com© OutSystems. All Rights Reserved
Vis
ual D
esig
n
www.outsystems.com© OutSystems. All Rights Reserved
Vis
ual D
esig
n
www.outsystems.com© OutSystems. All Rights Reserved
Vis
ual D
esig
n
www.outsystems.com© OutSystems. All Rights Reserved
Vis
ual D
esig
n
VISUAL DESIGN IS KEYFOR INITIAL ADOPTION
Usability benefits only kick in after the initial impression
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
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
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
www.outsystems.com© OutSystems. All Rights Reserved
OutSystems Living StyleguideLi
ve S
tyle
guid
e
SILK UI Framework
www.outsystems.com© OutSystems. All Rights Reserved
OutSystems Living StyleguideLi
ve S
tyle
guid
e
View Live Example
www.outsystems.com© OutSystems. All Rights Reserved
Responsive Live Styleguide
A LIVE STYLE GUIDE GETS YOU IN THE DOOR
By creating a ready-to-use componentyou jump start the development project
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
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
IT AIN’T OVER UNTIL THE FAT USER SINGS
It’s easy to get it wrongStay close to the users and react, fast
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
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
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
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
www.outsystems.com/ux-for-it/
www.outsystems.com84 © OutSystems. All Rights Reserved 84
UF
ser
irst
www.outsystems.com85 © OutSystems. All Rights Reserved 85
Thanks
May the UX Force be with you all...