The document discusses the differences between UI/UX design in consumer and enterprise contexts, emphasizing the challenges faced by enterprise UI/UX teams due to the need for long-term maintenance and collaboration among numerous developers. It introduces design as code principles, advocating for a systematic approach to create consistent and efficient UI components. Additionally, it highlights the importance of user-centered design and the integration of design elements directly into the development process to facilitate effective collaboration between designers and developers.

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

8. 8
Developer vs Designer
DESIGN AS CODE

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

10. THINGS
DEVELOPERS DO
THAT DESIGNERS
HATE
Break design guidelines
Overcomplicate Functionality
“But It's Not in the REQUIREMENTS!”
Woii.. Make it PRETTY! :D
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

13. 13
e.g.)
@font-size-body: 1.4rem;
LESS
variables
e.g.)
.fade-animation()
LESS
mixins
Images
Images
body{
font-family: “Roboto”, Meiryo, …
CSS
common.css
<wap-button icon=“PRINT” …/>
CSS/Images
Font icons
Control from the bottom
DESIGN AS CODE - COMMON LESS, CSS AND IMAGES

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-

23. 23
Demo - Layout demo page

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

26. 26
Stay
in touch
with Us
career.worksap.co.jp
03-62291202
saiyo@worksap.co.jp
OUR HEADQUARTER
We are hiring designers and UX engineers!
19F Ark-Mori bldg.
1-12-32 Akasaka,
Minato, Tokyo