Designing for OutSystems Applications

João GuerraUser Interface Design Expert @ OutSystems

linkedin.com/in/joaofilipeguerra

NextStep 2016

Silk UI

A Designer’s guide: How to collaborate with developers

Agenda● From Business to Consumer (B2C) to Business to Employee (B2E)

● Importance of Design in Enterprise Apps

● UX and UI develop a vision and collaborate to create a concept

● Designers and developers working together, as a team

● Methods and tools that lead to better collaborations

● Design creation:

○ How to create Style Guides

○ Building pages with pre-built patterns - Silk U

○ How to extend Silk UI patterns to specific use cases

What I learned going from B2C to B2E

B2C“business model whereby a company sells its

products directly to consumers

Business to Consumer

www.investopedia.com/video/play/businesstoconsumer/

B2EB2CConsumerBusiness to

EmployeeBusiness to

www.investopedia.com/video/play/businesstoconsumer/

B2E“B2E is business-to-employee, an approach in

which the focus of business is the employee, rather than the consumer

Business to Employee

SeducingConsumers

EmpoweringEmployees

B2C B2E#1 Vs

Lower Span of Attention Higher Focus

B2C B2E#2 Vs

http://www.apple.com/hotnews/apple-answers-fcc-questions/

“Apple’s goal is to provide our customers with the best possible user experience

Apple standards

http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store

“As of June 2016, there were more than 130 billion app downloads from the Apple App Store, for the various iOS devices.

Apps downloads

Statista

B2C B2E#3 Vs

Importance of design in B2E

Higher Expectations

Frequency of use

Increase on efficiency

Investment on design for B2E

Pick your battles

This iceberg is your project

The designer is working on the tip of the iceberg

The designer is working on the tip of the iceberg

He must prepare the remaining work

However

Because it’s under the water that developers are usually left alone for the rest of the project

How can designers help developers work on these deeper parts of the iceberg?

Tips for a better collaboration

Approach Process Handover

Approach Process Handover

The problem!

Where Design fits

Where Design fits… in Agile!

Agile Process

Approach Process Handover

“ We’re not designing pages,we’re designing systems of components

Stephen Hay

http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

Acceleratethe process

Ensure consistency

Shared vocabulary

Of development and design Critical for usability as for project maintainability

Between project members, from old ones to newcomers

Perfectly fit to the platform

Good development experience

Codeless UI framework

+

goo.gl/bP0x2F goo.gl/AZfPP8 Samuel Jesus

How does our workflow fitthis mindset?

UX UI FEUI DEV

goo.gl/IZFUMP goo.gl/NsIsq7 Ricardo Luiz

Order management wireframe

UX UI

Base elements

UI

Base elements

Key screens

UI

Base elements

Key screens

UI

Base elements

Key screens

UI

Base elements

Key screens

Specific use cases

UI

Base elements

Key screens

Specific use cases

Style Guide

UI

UI kit available on Dribbble

The combination of

Wireframes

Key Screens

Style Guide

will give guidance for the rest of the project

UI DEV

Heading 1

Buttons

Heading 2

UI DEV

Forms

goo.gl/Btttuj goo.gl/wJNcmL Daniel Reis

Approach Process Handover

47

Map the user flow

48

Leave notes and get feedback

Don’t leavethem guessing

AVOCODE

Screenshot to Lisbon shot em modal

goo.gl/Rcr5PI

goo.gl/ZaXv9w

goo.gl/mh5ZnA

To conclude

Final Takeaways

Approach, process and handover method can have a great outcome and impact in your work

#1

Silk UI is a great accelerator for your work and iterations#2

Reusable and consistent design vision is life changing for your project

#3

Thank you!