Amuse UX 2015: Y.Vetrov — Platform Thinking

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

PLATFORM
THINKING
APPLIED UX STRATEGY
YURY VETROV
MAIL.RU GROUP

PRODUCT
DESIGNER
UX STRATEGY
FRAMEWORK
PLATFORM
THINKING
UX STRATEGY
IMPLEMENTATION
OUTCOME-DRIVEN
DESIGN
FROM DESIGN TEAM...

DOCUMENT-DRIVEN DESIGN
Many designers still focus on deliverables – work products of
their creative process. They do resea...

R.I.P. THIS
As a result, designers spend their time polishing supplementary
documentation instead of focusing on the produ...

THE AGE OF SHREDDER
A new approach requires that designers no longer consider their
work narrowly, focusing on projects wh...

3 LEVELS OF UX MATURITY
CHAOS
OPERATIONAL
TACTICAL
STRATEGIC

3 LEVELS OF UX MATURITY
 Operational. The designer is just an implementer, working on
individual design tasks and creatin...

BUILDING
A DESIGN SYSTEM

GUIDELINES RULE?
Classic solutions for systematic product design are guidelines and
pattern libraries.
However, they creat...

1.
NOBODY READS DOCUMENTATION
Designers often complain that developers don’t read the
documentation. But, to be fair, desi...

2.
A GUIDELINE FOR A PRODUCT LINE?
HUH!
Specifications often require updates, new patterns emerge, and
designers discover ...

3.
DESIGN QUALITY CONTROL
IS TIRESOME AND EXPENSIVE
Designers should control every screen of every product, manually.
This...

4.
PROBLEMS MULTIPLY
WITH DESIGN UPDATES
You should start again from the very beginning, then ensure the
full realization ...

5.
DESIGN EXPERIMENTS
ARE EXPENSIVE
They require yet another stack of deliverables and increase
entropy.

THE LIST OF PROBLEMS
IS EVEN BIGGER
Plus, when doing responsive Web design, you can multiply these
issues by the number of...

BLAZES!
WE CAN’T DO IT
WITHOUT TECHNOLOGY
Systems thinkers are looking at the intersection of design and
technology. Only ...

TO MARRY
DESIGN + TECHNOLOGY
Many big companies are moving in this
direction because it allows them to create and
implemen...

WE DID IT TWICE
We used this ideology to launch two product lines – mobile web
and media products. In this presentation I’...

12 MOBILE WEBSITES (2013)
We designed the first batch in 3 months – a new record for us.
A component-based design system w...

10 NEWS WEBSITES (2014)
Time to market dropped from 1-1,5 years to 6 months.
Not to mention decreased support costs and be...

A UNIVERSAL DESIGN SYSTEM
Now we’re building a more universal platform for different
product lines. We have a lot of work ...

40PRODUCTS
Add to this mobile and tablet sites and apps, promo pages… It's
about two hundred projects if you sum it up. A ...

150MLN USERS (MONTHLY)
Total audience of Mail.Ru Group products. We should be careful
with redesigns – it’s easy to insult...

INTUIT HARMONY
There are some fantastic case studies demonstrating it,
including Intuit’s Harmony ecosystem.

LONELY PLANET
It’s based on their own Rizzo framework.

POLYMER PROJECT
A platform from Google based on material design.

YANDEX.LEGO
A constructor based on BEM (block-element-modifier)
ideology and technology.

LOTS OF COMPANIES ARE HERE
In 2012-2013, many companies pursued this approach
simultaneously. We started here too.

There are five levels of maturity for this approach:
1. Design principles have been defined, then implemented in
CSS.
2. A...

1. A UNIFIED
VISUAL STYLE,
INTERACTION PRINCIPLES,
INFORMATION ARCHITECTURE
It benefit users by ensuring that an organizat...

2.
100% 90% GUARANTEE
This development process guarantees consistency of a product’s
UI because all ready-made code blocks...

3.
EASIER TO DO REDESIGNS
AND NEW LAUNCHES
The framework provides all necessary user-interface controls,
patterns, and com...

4.
EASIER TO MANAGE
A PRODUCT PORTFOLIO
It’s when all products are being built in the same way. Instead of
closely monitor...

5.
LESS ROUTINE WORK
Designers produce less mockups and other unnecessary artifacts.
You can create a page out of ready-ma...

6.
SCALING BEST PRACTICES
Successful product decisions have a cumulative effect. For
example, if your new design increases...

7.
ALWAYS UP-TO-DATE
You can move from doing large redesigns every couple of years
to constantly updating designs.
Large r...

MANAGING TRENDS
Using common components would make it easy to capitalize on
whatever the next design trend after flat desi...

UX STRATEGY’S CRITICAL PART
We had tried to unify design and implementation several times
through specifications, UI Kits,...

Once and for all!
When you create, then reuse
an accurate design implementation,
you can be much more confident
in the qua...

The best way to succeed
in a product design-unification effort
is to move design artifacts
to the implementation level.

BILL SCOTT
At PayPal, it took 6 weeks to change a block of text
on the home page because of tech constraints. This
slowed ...

USE DESIGNER’S HEAD,
NOT JUST THEIR HANDS
Reducing the amount of routine, operational work that designers
must do lets the...

THE COMPANY BENEFITS TOO
 Successful product decisions have a cumulative effect.
 Faster time to market and revenues for...

HOW TO BUILD YOUR
PLATFORM

STOP THINKING ABOUT SCREENS!
Instead, view product design and development as platform
development.
For example, look at wh...

If you deconstruct these platforms’ key elements:
 general principles of visual and interaction design,
 a portfolio of ...

WHERE DO I BEGIN?
TWO WAYS, AGAIN
 You can first create guidelines, then build products based on
them.
 Or you can launc...

WE CHOSE THE SECOND APPROACH
We scaled the already tried-and-tested design that we’d
optimized after doing user research a...

PARALLEL TRACKS ARE HARD
While designing guidelines and products simultaneously may
seem ideal, doing so would take an eno...

MATT MCMANUS
Tells about “continuous design approach”. It’s
necessary to abandon the long-held concept of
“final designs”....

DESIGN LANGUAGE
A foundation of the design & the platform.

MAILCHIMP
The company puts a lot of effort into voice and tone.

MICROSOFT
They advise focusing on content rather than chrome for Metro design,
and the role of animation is also foundatio...

A LANGUAGE FOR EVERYBODY
You should tie design principles to a company’s business strategy.
For design principles, we do t...

DESIGN PRINCIPLES FTW
Principles should not overlap, and there should be a reasonably small
number of them to ensure that ...

2.
INFORMATION ARCHITECTURE
Considering the specific target audience for a product,
information architecture principles sh...

Within a product line, the information architectures for different
products can vary significantly, so may require differe...

You should define what each of these constructs is good for and
how to map product features and scenarios to them.
You can...

3.
INTERACTION DESIGN
Specific navigation patterns correspond to information
architecture principles.

 Navigation bars in the header or footer;
 Drop-down menus;
 Contextual menus, which appear when a user right-clicks or...

Illustrate these patterns, showing how they should appear on
typical screens and annotate the illustrations with usage
rec...

4.
VISUAL LANGUAGE
These are specific principles that define visual presentation.
While the manifest of principles speaks ...

1UI GRID
Superpixels! The increments (or modules) of a grid allow you
to align and measure the sizes and margins of all UI...

Many products now use an 8-pixel grid, including Android and
Google products. Windows 8 and Windows Phone use a 5-pixel
gr...

Designers calculate by a rule, not with a gut
It significantly decreases the number of
unnecessary disputes and small mist...

2STRUCTURAL GRID
The number and size of the columns and gutters
that define a UI layout.

A 12-pixel grid is most prevalent now because the most popular
frameworks use it.
However, we chose to implement a rhythmi...

3LAYOUTS
Now, getting to the level of specific design solutions, what UI work
areas are necessary, and how are they distri...

 A page layout may consist of a single column, as is popular on
landing pages.
 But most follow a classic two-column app...

4CONTAINERS
Every column in a layout holds containers that stack one after
another. Containers have a common visual style ...

You place content and controls within containers, which are useful
in defining visual presentation – for example, using bo...

5TYPOGRAPHIC GRID
Line height and type sizes should be based on the UI grid.
Use the idea of base-text scaling to build th...

For example, in our case, font parameters should be multiplied by
four. This is easy to do for headings, but problems ofte...

GRIDLOVER
An online grid generator
that brings most of scaling approaches together.

 UI colors, including black and white and several shades of
gray for base surfaces, borders, and supplementary text;
colo...

7UI KIT
Once you’ve created UI and typographic grids and paired them
with a color palette, you can create basic building b...

 Buttons (primary and secondary action buttons, option
buttons, text and/or icon buttons for toolbars);
 Links;
 Generi...

8DESIGN MATH
o Add the text “Save” in the base text size.
+ Add standard padding around the text.
+ Fill the space around ...

A common language
As long as your design standards exist, they
will lead all designers and developers to
consistently make...

FORM LAYOUTS
Form elements should have field sets defined. Consider the
placement of field labels, tip or descriptive text...

GRAPHICS AND ILLUSTRATIONS
You should define standards for photos, other content images,
and user avatars, including their...

Define the general style of illustrations. Consider creating a mood
board when making decisions about style.
You can base ...

INFOGRAPHICS
AND DATA VISUALIZATIONS
One more design asset to unify.
You’d need all of these only for highly specialized p...

 Tables;
 Common types of diagrams such a histograms, pie charts,
and bar, line, and area graphs;
 Specialty diagrams s...

ANIMATION MODEL
In a perfect product, all transitions between states and screens
should be based on a well-defined model. ...

For example, an overlay could slide down from the top of the
screen, then slide back up when it’s closing. For a multi-ste...

ADS
First, define an advertisement grid – within the limitations of the
design grid – which typically determines the visua...

Set standards for your ad inventory. Define types and sizes of
display and contextual ads, branding principles for pages a...

5.
DESIGN PRINCIPLES IN CODE
Once you’ve defined basic design principles, you can bake them
into your CSS – thus, completi...

Design is defined on every project phase
Systems thinking and the continuous
improvement of a design implementation
throug...

GLOBAL VARIABLES
Modern CSS preprocessors like SASS and Less let you define
variables, which is a great way of implementin...

TOKENS TO UNIFY WEB AND NATIVE
These are “super variables” stored outside of a specific platform
like web, iOS, Android, e...

TYPICAL PAGE LAYOUTS
Also, code examples of typical page layouts, including a header,
footer, content area, and columns wi...

PATTERN LIBRARY
Create common user-interface components
and re-build products on them.

UI COMPONENTS
Since your goal is to simplify your production cycle to
“guidelines = design = front-end code → implementati...

PATTERNS 2.0
A component is a classic design pattern. The difference is that you’re
no longer using deliverables to define...

COMPANY-WIDE UPDATES
Furthermore, if you want to update a pattern, you just have to
change the code in the unified code ba...

Here are some examples of components:
 navigation – tabs, alphabetical navigation, calendar navigation,
search, filters, ...

TYPICAL PAGES
In addition to defining specific components, you should define
typical page types based on them. Create news...

SEMANTIC CODE IN COMPONENTS
One basic principle is that the names for patterns should have
semantic meaning and refer to t...

UNIFICATION OR BORINGFICATION?
Having several products or services based on the same
components might lead to boring user ...

STYLIZATION EXAMPLES
Our team decided to use different accent colors for specific products. Each
product has its own accen...

LIVING GUIDELINES
One more project based
on common components.

100% ACCURATE
It shows a real implementation, not just screenshots.
This radically simplifies quality control for a produc...

Its first sections should describe general principles, which you’ve
extracted from your actual CSS.
Then include ready-mad...

I LOVE THIS RESOURCE!
I refer to styleguides.io again –
it’s a huge directory of tools to create living guidelines.

AUTO-HEALING SYSTEM
A spider script occasionally goes through all products, comparing
their CSS to reference values.
Then,...

PROTOTYPING
Re-factor the design process.

LESS INSERTIONS
Once all key parts of a platform are up and running, you can
simplify your production cycle even further a...

PHOTOSHOP SUCKS LESS OFTEN
Many designers are no longer afraid to code. Coding in HTML
and CSS are simple enough, and ther...

AXURE IN A BROWSER
If your company has the resources and your platform is mature
enough, you could go further and build an...

PROJECT POLYMER CONSTRUCTOR
Google has a web tool,
which lets you to create Material Design in a browser.
https://polymer-...

BOOTSTRAP-BASED
Similar visual constructors exist for Bootstrap –
for example, Jetstrap.

REAL DATA
While good designers don’t use “Lorem ipsum”, it takes a bit of
effort to create mock data.
Showing different st...

COMMUNICATE EASIER
In addition to a functional prototype’s being cheap to create, it
works much better as a communication ...

DESIGN EXPERIMENTS
Looking for the best patterns
across alternative solutions.

A/B TESTING OUT OF THE BOX
Design patterns don’t solve problems once and for all. You should
always strive to find better ...

KNOWLEDGE BASE
You can save historical versions of patterns, including the details
about and results of experiments.
This ...

A CUMULATIVE EFFECT
The main benefit of a platform is that every project uses an actual
version of a component from the un...

ALGORITHM-DRIVEN
DESIGN?
Or meta-design.

DESIGN ALGORITHMS, NOT SCREENS
On algorithmic platforms, designers and developers define logic
that considers content, con...

SUPER-DUPER-FINE-TUNING
In this way, it is possible to fine-tune the tiniest details of a user
interface for specific usag...

AUTOMATED MAGAZINE LAYOUTS
The existing content had poor semantic structure, and it was too
expensive to update by hand. A...

DUPLO
Flipboard launched a similar model last year.

THE GRID CMS
It chooses templates and retouches and crops photos all by itself.
It runs A/B tests to choose the most suita...

RENE
An experimental tool for generative design by Jon Gold.
It creates design variations from user defined variables.

PARAMETRIC TYPOGRAPHY
Tools like Robofont and Adobe Faces, which give designers
flexibility and present new options.

ARE WE THERE YET?
Algorithmic design is far from being an established approach –
it’s rarely even discussed today.
But, in...

OUR STORY
Mail.Ru Group is taking this platform approach.
To get there, we’ve committed to the whole
process of framework ...

1.
CREATE THE REFERENCE DESIGN
AND THE PLATFORM
We defined a suitable and scalable information architecture,
interaction-d...

2.
MOVE ALL PRODUCTS
TO THE PLATFORM
We’ve expanded our unified code base with new patterns and
made the back-end for ever...

3.
REFACTOR THE DESIGN PROCESS
We’ve created design solutions for core product tasks and are
fine-tuning the technical sol...

4.
REFACTOR THE DESIGN
We’ve released a dozen products and discovered a lot of
problems after their launch, so refactoring...

WE’RE ON THIS WAY
We are now on the third and fourth steps of our framework-
implementation process. We’ve seen benefits f...

We’re currently updating the visual design across our platform, so
we’ll find out whether this is as easy as we intended. ...

WHAT ABOUT APPS?
The component-based model that I’ve described is for the Web.
However, we’ve thought about applying this ...

WE HAD OUR SHARE OF PROBLEMS
Nevertheless, looking back, I believe that we could have made the
implementation process fast...

BEING TOUGH
When you’re implementing guidelines, they must be
authoritative. To achieve systematic design, always use exis...

However, if there’s a need to introduce something new, you
should determine whether you’ll use it again in the future. If ...

REAL-WORLD
EXAMPLES

A.
BOOTSTRAP-LIKE SYSTEMS
Pro: Faster and cheaper. You can quickly profit from inexpensive
design experiments, fast protot...

SMALL COMPANIES CAN DO IT TOO
Bootstrap and Foundation already solve a lot the problems by
implementing design principles ...

BUILD YOUR OWN BOOTSTRAP
Lots of visionary publications by Anna Debenham, Brad Frost,
Mark Otto, and Dave Rupert were rele...

REALLY?
Although these frameworks lack the benefits of a component-
based system – they can’t simplify updates of a whole ...

B.
COMPONENT-BASED SYSTEM
Pro: It guarantees the quality of the design implementation and
offers the benefits of easy prod...

REACT VS BEM
Famous frameworks for true component-based design systems.
We use BEM ideology and some pieces of its technol...

THAT’S OUR CHOICE
We chose this approach at Mail.Ru Group. It started in the middle
of 2012 from a simple idea and an expe...

NATHAN CURTIS
Nathan Curtis writes in-depth articles about
key parts of design systems and processes.
He published a book ...

ANNA DEBENHAM
She was one of the pioneers in creating living
style guides. She collects examples of such
systems, articles...

BRAD FROST
Brad Frost is the author of Atomic Design
ideology. He is currently writing a book on this
subject and has alre...

FROM COVER TO COVER!
A link heaven on living guidelines and component systems.
It’s better than any book!

CLARITY CONFERENCE
First conference on design systems launched in 2016.

CONCLUSION

I’m confident:
Any modern UX strategy
should employ platform principles
to ensure a good outcome for your products.

Wanna build a solid, sustainable foundation
for a product or an entire product line?
Forget about creating static guidelin...

It becomes faster and cheaper to get new products and features
to market.
It guarantees that you’ll achieve a unified desi...

LEAVING
HEROIC REDESIGNS BEHIND
Instead, you’ll be able to constantly update your designs.
The platform approach lets you ...

P.S.Just don’t go extreme! Any new approach is an augmentation and
evolvement of existing ones, but not an abolishment.
It...

CREDITS: DESIGN
EUGENE BELYAEV
EUGENE DOLGOV
MARIA BOBROVA
EUGENE FERULEV
ARTEM GLADKOV
ALEXEY KANDAUROV
DMITRY OSADCHUK
G...

CREDITS: DEVELOPMENT
ALEXANDER BEKBULATOV
ANTON EPREV
DMITRY BELYAEV
EUGENE IVANOV
ANDREW KUSIMOV
SERGEY NOZHKIN
BORIS REB...

THANK YOU!
YURY VETROV
www.jvetrau.com twitter.com/jvetrau

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

UX Poland 2014: Y.Vetrov — Applied ... by Yury Vetrov 57795 views
Interaction designers vs algorithms by cxpartners 120710 views
UXPeople2013: Юрий Ветров — UX-стра... by Yury Vetrov 103076 views
CodeFest2015: Ю.Ветров — От дизайн-... by Yury Vetrov 89784 views
Design Weekend Ярославль 2014: Юрий... by Yury Vetrov 113430 views
Юрий Ветров — Внедрение UX-стратегии by Yury Vetrov 75912 views

Top clipped slide

View on SlideShare

1 of 168 Ad

1 of 168 Ad