How to enable Designers, Developers, BA's and PM's to speak the same language? How to create, build and maintain a consistent UI and UX ecosystem on mid to large product teams? How to accelerate UI development and design hand-over with reusable and styled interactive components?

1. Creating a unified
consistent UI language
for scalable apps
Ramon Cliquet - Specialist UI/UX Product Designer

2. Who am i in a nutshell?
● Designer focused on UI/UX + branding
● Front-end UI developer
● 14+ years of experience
● Worked on apps & sites used by millions of people
● Human-centered design approach

3. Learn how to:
Enable team to
speak the same
UI language
Accelerate UI
development
and design
hand-over
Create, build
and maintain a
consistent UI
and UX

4. 79%
of products miss
their launch dates.
Source: 1CGT/Sopheon Survey
Speeding up the
design-to-development
process gives you the
opportunity to do more in
less time.

5. Enable team to
speak the same
UI language
1. How to:

6. Like on any other
language,
misunderstandings
can happen.
So use a product
“dictionary”
= UI library.

7. Set your UI
foundation Elements: What are the core
elements in the system?
Interconnections: How are the
elements connected?
Purpose: What does this
achieve?

8. Digital allows for a variety
of solutions to any given
challenge.
Possible disjointed user
experiences.

9. Accelerate UI
development &
improve design
handoffs
2. How to:

10. A UI library is
closely tied with
the code base.
Can’t be boring.
Needs to be
interactive.

11. Reusable
components
Creates consistency: Applies
visual, interaction and code
consistency
Avoid double-up: Helps your
team avoid duplicated work
Bullet-proof: Components have
already been tested
Starter kit: It is a time saver…
i’d say it is life changing!

12. Create your UI
language
3. How to:

13. A UI library is made up of
foundational elements we can
call patterns and components.

14. Create your
UI library
Spread: Break down UI into
reusable building blocks
Organise: Arrange and group
them
Connect: Establish rules
between them
Share: Make them available for
the entire team to use

15. Recycle your UI
components
Revisit: How can you achieve
your goal with smaller amount of
elements?
Regroup: Are there elements in
the system serving the similar
purpose?
Rethink: Can the relationships
between the elements be
changed?
Rearrange: Can it be organised
with a better structure?

16. The Results

17. Westpac Group
Reduced the design and
production effort by
Source:
https://gel.westpacgroup.com.au/case-studies/summary/

18. Consistency guides
a user through a
product.

19. You’ll find yourself
having meaningful
conversations
about your
product’s
blueprints.

20. Examples

21. UI Libraries Examples
Westpac Global Experience Language
https://gel.westpacgroup.com.au/
IBM Design Language
http://www.ibm.com/design/language/
Shopify Polaris (Design System)
https://polaris.shopify.com/
http://styleguides.io/examples.html

22. Done!
Questions?
Contact:
ramoncliquet@gmail.com
www.ramon.im