In this workshop, engineers of Works Applications will talk about their technology and knowledge.We will introduce our way of UI/UX about "AI Works" development.
1. 1
ENTERPRISE UI/UX
- design as code
Difference between ui/ux in the consumer world and the enterprise world is not often explained.
Today, I disclose our internal efforts for you.
2. 2
I’m Hiro
UX Engineer
Graduated with a computer science degree,
I started my career as a software engineer.
I work as a cross disciplinary mutant who write code, design UI
elements, maintain ci environment and help people work effectively.
WHAT I DO?
3. 3
How we deal with the difficulties as UIUX group.
How teams in the group work together.
ORGANIZATION02
Story telling and
concrete examples of our deliverables.
DESIGN AS CODE03
A lot of applications, developers, stakeholders involved.
Long term maintenance is required.
DIFFICULTIES IN THE ENTERPRISE01 DIFFICULTIES IN THE ENTERPRISEDIFFICULTIES IN THE ENTERPRISE
4. 4
Software for the
Enterprise
There are more than 10,000 views, literally.
Designing one by one doesn’t work.
TONS OF APPLICATIONS
Our product will be running for more than 10 years.
We need to keep improving it without trouble.
LONG TERM MAINTENANCE
There are more than 2,000 developers developing the
one product
A LOT OF DEVELOPERS ALL OVER THE WORLD
DIFFICULTIES IN THE ENTERPRISE
5. 5
How we deal with the difficulties as UIUX group.
How teams in the group work together.
ORGANIZATION02
Story telling and
concrete examples of our deliverables.
DESIGN AS CODE03
A lot of applications, developers, stakeholders involved.
Long term maintenance is required.
DIFFICULTIES IN THE ENTERPRISE01 DIFFICULTIES IN THE ENTERPRISE
6. 6
Conduct Userbility Research,
enlighten developers about
UCD.
User Centred Design
Work with every application
development team to make
their product better.
Application
Develop common library,
resources, components, etc. to
make the whole product better.
BT-Parts
MEET THE TEAM
ORGANIZATION
7. 7
How we deal with the difficulties as UIUX group.
How teams in the group work together.
ORGANIZATION02
Story telling and
concrete examples of our deliverables.
DESIGN AS CODE03
A lot of applications, developers, stakeholders involved.
Long term maintenance is required.
DIFFICULTIES IN THE ENTERPRISE01 DIFFICULTIES IN THE ENTERPRISE
9. THINGS
DESIGNERS DO
THAT DEVELOPERS
HATE
No UNDERSTANDING of Execution
FANCY FONTS should be everywhere
Always say: "It's EASY, Right?" :P
“You develop what I design.”
DESIGN AS CODE
11. 11
To achieve both clean styling and super fast rendering.
“Developer vs Designer” to Develop and Design
12. 12
Build design into
the product
Keep clean and consistent look and feel.
Achieve super fast rendering.
LESS COMPILER, LESS REGULATION CHECKER
Provide layouts and components which works fast and
looks good.
COMPONENTS & LAYOUTS
Provide and maintain these common parts.
And Support developers using them.
COMMON LESS, CSS AND IMAGES
DESIGN AS CODE
14. 14
Build design into
the product
Keep clean and consistent look and feel.
Achieve super fast rendering.
LESS COMPILER, LESS REGULATION CHECKER
Provide layouts and components which works fast and
looks good.
COMPONENTS & LAYOUTS
Provide and maintain these common parts.
And Support developers using them.
COMMON LESS, CSS AND IMAGES
DESIGN AS CODE
15. 15
Regulation Checker
and LESS Compiler
We help you to follow the rule
Speed!
Keep rule or your build fail
DESIGN AS CODE - LESS COMPILER, LESS REGULATION CHECKER
16. 16DESIGN AS CODE - LESS REGULATION CHECKER
Assume you are developing mail-preview component and check whether your less file is OK.
We show you whats wrong and how to fix it.
We also make documents about this, but we believe this is easier for developer to follow.
17. 17DESIGN AS CODE - LESS REGULATION CHECKER
We also provide editor plugins to check it while developers are woking on their component.
18. 18DESIGN AS CODE - LESS REGULATION CHECKER
And if there were any violation, the merge request/ pull request cannot be accepted.
19. 19DESIGN AS CODE - LESS COMPILER
And we also develop less compiler which
collect components used in the page, compile it into two css file. the first one is a normal css file.
The second one is for styles which is not rendered immediately, for example, dialogs, popovers, or side menus.
We also apply the minimum amount of vendor prefixes by creating css files for each browser.
This example is for Chrome browser.
In this way we can reduce the amount of the css file by 20% - 30%.
20. 20
Build design into
the product
Keep clean and consistent look and feel.
Achieve super fast rendering.
LESS COMPILER, LESS REGULATION CHECKER
Provide layouts and components which works fast and
looks good.
COMPONENTS & LAYOUTS
Provide and maintain these common parts.
And Support developers using them.
COMMON LESS, CSS AND IMAGES
DESIGN AS CODE
21. 21
Components are made of a combination of html, js, less
and some server side procedures.
We polish, improve and sometimes create ones,
cooperating with component engineering team.
Input, Button, Popup, Dialog, etc.
Components
DESIGN AS CODE LAYOUTS & COMPONENTS-DESIGN AS CODE LAYOUTS & COMPONENTS
22. 22
Layout pattern are implemented as layout tags.
Input, List, Portal, Search, etc.
Layouts
DESIGN AS CODE LAYOUTS & COMPONENTS-
24. 24
03
How we deal with the difficulties as UIUX group.
How teams in the group work together.
ORGANIZATION
A lot of applications, developers, stakeholders involved.
Long term maintenance is required.
DIFFICULTIES IN THE ENTERPRISE
02
01
Story telling and
concrete examples of our deliverables.
DESIGN AS CODE
25. 25
Q&A
Frequently, your initial font choice is taken out of your
hands; companies often specify a typeface, or even a set
of fonts, as part of their brand guides