How to Revive a Design Language to Get to Awesome Products
-
Upload
erica-katrak -
Category
Design
-
view
810 -
download
0
description
Transcript of How to Revive a Design Language to Get to Awesome Products
![Page 1: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/1.jpg)
How to revive a design language to get to
AWESOME PRODUCTS
DORELLE RABINOWITZERICA DECKER
![Page 2: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/2.jpg)
HELLO.
ERICA DORELLE
![Page 3: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/3.jpg)
Our design language took us from this…
![Page 4: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/4.jpg)
…to this.
![Page 5: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/5.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 6: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/6.jpg)
Create a design-led strategy1
![Page 7: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/7.jpg)
A cohesive, multi-device user experience
that our customers love.
OUR VISION
![Page 8: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/8.jpg)
Establish modern and iconic ownable moments.
Celebrate data while respecting user and device context.
Be simple, easy to use, and guiding.
Design for the customer and instill confidence.
![Page 9: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/9.jpg)
We started with design, not features.
![Page 10: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/10.jpg)
We used core flows to define basic design patterns.
![Page 11: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/11.jpg)
Then we focused on refining and extending our design language.
![Page 12: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/12.jpg)
We created ownable moments of delight.
![Page 13: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/13.jpg)
DESIGN PRINCIPLES
PATTERNS
ECOSYSTEM
FRAMEWORKS
PATTERNS are standardized solutions for common design problems.
FRAMEWORKS are structured collections of patterns and best practices that work together to solve common design problems.
DESIGN PRINCIPLES provide guidance on decision-making and set the foundation for the user experience.
THE ECOSYSTEM is built on a foundation of cohesive patterns, frameworks, and design principles.
![Page 14: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/14.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 15: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/15.jpg)
Design for an ecosystem2
![Page 16: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/16.jpg)
![Page 17: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/17.jpg)
![Page 18: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/18.jpg)
How the patterns work together.
![Page 19: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/19.jpg)
How the products work together.
![Page 20: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/20.jpg)
How new products enter the ecosystem.
![Page 21: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/21.jpg)
And how the teams work together.
![Page 22: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/22.jpg)
Designing for an ecosystem means you can’t work in a silo. You have to
collaborate. With everyone.
![Page 23: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/23.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 24: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/24.jpg)
Connect people3
![Page 25: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/25.jpg)
Everyone owns the design language.
![Page 26: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/26.jpg)
We’re roadies, not rockstars.
![Page 27: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/27.jpg)
I need to solve for xyz.
Oh wow, so do I!
It’s better to solve problems together.
![Page 28: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/28.jpg)
We should solve this together.
Right-o!
It’s better to solve problems together.
![Page 29: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/29.jpg)
It’s better to solve problems together.Collaborate!
![Page 30: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/30.jpg)
Be fun to work with.
![Page 31: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/31.jpg)
As roadies, we encourage the sharing of ideas, connect teams, and help solve
design problems - all to create a cohesive ecosystem… but we’re only two people.
![Page 32: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/32.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 33: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/33.jpg)
The tool matters, too4
![Page 34: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/34.jpg)
You need a tool for your design language.We call ours a “toolkit”.
![Page 35: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/35.jpg)
Ask for forgiveness, not permission.
![Page 36: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/36.jpg)
You can’t get to awesome if you’re always staring at awful.
![Page 37: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/37.jpg)
![Page 38: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/38.jpg)
Organize by how your design language is built.
![Page 39: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/39.jpg)
Organize by how your design language is built.
![Page 40: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/40.jpg)
Everyone uses the toolkit.
![Page 41: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/41.jpg)
If everyone is always collaborating… how do you make decisions about the design
language?
![Page 42: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/42.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 43: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/43.jpg)
Make smart decisions5
![Page 44: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/44.jpg)
A cohesive, multi-device user experience
that our customers love.
OUR VISION
![Page 45: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/45.jpg)
Be simple, easy to use, and guiding.
Design for the customer and instill confidence.
Establish modern and iconic ownable moments.
Celebrate data while respecting user and device context.
All decisions ladder up to our shared design principles.
![Page 46: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/46.jpg)
Define ambiguous terms.
It needs to be consistent! Use purple!
I’m not sure that’s what they mean
by consistent.
![Page 47: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/47.jpg)
FIXED= stay consistent
FLEXIBLE= you have some choices
FREE= roll your own and smoke it
![Page 48: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/48.jpg)
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
![Page 49: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/49.jpg)
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
![Page 50: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/50.jpg)
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
![Page 51: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/51.jpg)
VS
![Page 52: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/52.jpg)
The design language will evolve.
![Page 53: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/53.jpg)
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
![Page 54: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/54.jpg)
I use it every day. I love having my business numbers at my fingertips even at the beach.
I love this app. I am a right brained person. This app lets me enter expenses as they occur and I can invoice right from the phone! I'm very happy with it!
![Page 55: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/55.jpg)
Last fiscal quarter, we added over 45,000 new customers to our QuickBooks
ecosystem, bringing our total number to over 600,000.
![Page 56: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/56.jpg)
Our design language also inspired the folks over at TurboTax to launch a similar
initiative.
How many of you did your taxes with us this year?
![Page 57: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/57.jpg)
Remember the world without a design language?
![Page 58: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/58.jpg)
A design language will help you become design-led. DESIGN-LED PRODUCTS = AWESOME.
![Page 59: How to Revive a Design Language to Get to Awesome Products](https://reader036.fdocuments.us/reader036/viewer/2022081516/559841ad1a28ab22328b45cf/html5/thumbnails/59.jpg)
The end :)Oh crap. How many times did we say “awesome”?
[email protected] @dorelvis
[email protected] @twitterissilly