My Presentation on UX Patterns, Design Systems and the need for measuring the success of UX quantitatively.

1. UX TRENDS
OF 2018
UX PATTERNS, DESIGN SYSTEMS, TOOLS AND FRAMEWORKS
Roshan Ravi

2. UX Architect
Trend 01
UX PATTERNS FOR
CONSISTENCY

3. UX Architect
But, first.. UI Patterns
UI Design patterns are recurring
solutions that solve common design
problems. Design patterns are standard
reference points for creating user
interfaces.

4. UX Architect
User Goal
Jean’s TV has stopped working.
She wants to buy a new TV
within her budget.
User Tasks
Searches a product
Compares prices and features
Reads reviews
Checks delivery options
Checks payment options
Adds to cart
makes payment
Checks e-mail for confirmation
Tracks the delivery
Reviews the product
Functionality
Clicks on compare check-box
Clicks on Compare button
Compares Price and features.
Clicks on a product that fits her
requirement within the budget.
Success of a user goal
will depend on how well
a digital property can
facilitate the user to
perform user tasks.
Jean
The Mom
50 Years old
Self Employed
writer
UI Pattern - Product
Comparison

5. UX Architect
You have
seen this
everywhere.

6. UX Architect
UX Patterns.
UX Patterns are collections of tried and
tested UI Patterns that solves common
UX problems.
UX Pattern consists of many UI Patterns
that collectively solves a set of user tasks.
Example - Shopping Cart

7. UX Architect
Why Use UX and UI Patterns?
Tried & Tested
Familiar to users.
Users look for patterns.
Readily available libraries to implement
the designs.

8. UX Architect
Trend 02
Design Systems

9. UX Architect
What is a Design System
A design system is a collection of reusable
components, UI Elements and styles in a
standardized format, that can be
put-together to build any type of
application.
- Convenient and easy to build
- Makes development easier
- UI Patterns and libraries will become
standard and easy to recognize for
the users.

10. UX Architect
That’s great.. But, how do we build one?
Atomic Design Methodology

11. UX Architect
Atomic Design - Inspired by chemistry.
Atoms Molecules Organisms Templates Pages

12. UX Architect
Atomic Design
Atomic design is a methodology
composed of five distinct stages working
together to create interface design
systems in a more deliberate and
hierarchical manner. The five stages of
atomic design are:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

13. UX Architect
Atomic Design
Atoms
Elements
Textbox,
Paragraph
Label
Heading 1
Molecules
UI Patterns
A form field that
captures name
(consists of a label
and a textbox)
Organisms
Components
A contact form
that captures
Name, email,
Phone number
And a message
Templates
UX pattern
A form
template that
Is designed to
Display any type
Of form elements
And related
functionalities
Pages
Application / Page
A specific page created
using the form
template to capture
feedback from a
customer.

14. UX Architect
Atomic Design Demo
Atoms Molecules Organisms

15. UX Architect
Template
Pages/Website
Atomic Design Demo

16. UX Architect
http://grommet.io/
Grommet

17. UX Architect
...and, we are building a design system of our own.
Accion Design System.

18. UX Architect
Accion Design System - Preview

19. UX Architect
Accion Design System - Preview

20. UX Architect
Accion Design System - Preview
This Presentation and
all our branding
materials have been
designed using the
Accion Design System

21. UX Architect
Accion Design System - AccionLabs.com

22. UX Architect
Benefits of Atomic Design System
Branding Consistency
- Colors,
- Imagery,
- Design Language
- Messaging
UI Consistency
- Branding
- UI Elements
- Interactions
UX Consistency
- Usability
- Standard UX across
all products and
platforms
Theme-ability
- Ability to change
styles
- Ability to extend
the design when
needed
Device Agnostic
- UI Elements are designed to
work with all devices.
- Responsive/Adaptive
Time-saving
- Reduce the design
iterations
- Improves UI
Development
process and time.

23. UX Architect
Trend 03
IMMERSIVE
USER EXPERIENCE

24. UX Architect
Immersive UX - Conversational UI

25. UX Architect
Immersive UX - Auditory UI

26. UX Architect
Immersive UX - Augmented Reality

27. UX Architect
Immersive UX - Virtual Reality

28. UX Architect
Few Little Known Benefits of Auditory UI
Accessibility
Ability to combine ARIA (Accessible
Rich Internet Application) roles and
convert websites to Voice Enabled
Interfaces
Assistive Technology without the
added cost.
Assistive Tech, such as screen-readers
are expensive tools. With a voice
enabled virtual assistant, you can
eliminate the need for such proprietary
tools and still give a better UX for
differently abled users

29. UX Architect
Tools & Frameworks
Can you quantify &
measure an experience?

30. UX Architect
“It is not enough that we build products
that function, that are understandable
and usable, we also need to build
products that bring joy and
excitement, pleasure and fun, and, yes,
beauty to people’s lives.”
DON NORMAN
“Informed by data, driven by
empathy”
Booking.com Design Guidelines
“The main tenet of design thinking is
empathy for the people you’re trying to
design for”
David Kelley, Founder of IDEO

31. UX Architect
Measuring Experiences.

32. UX Architect
Google HEART Framework