how to revive a design language to get to awesome products
DESCRIPTION
Maybe your company has been around a while. Maybe you have a once successful product that's not growing so fast anymore. Maybe you realized you needed to refresh that product, so you hired an outside agency to inject some needed design attention. Maybe that agency came up with some really good designs but didn't quite get your product's use cases, and didn’t quite get to detailed design. Result: pretty designs that aren’t finished. How would you move forward? Last year we struggled with all of the above. We were tasked with designing an ecosystem of products across platforms and channels with multiple teams who had varying roadmaps and priorities. We had to consider the realities of design in a corporation that values collaboration and inclusiveness. We deliberated over scalability, consistency vs. cohesiveness and the frameworks to support our decisions. Oh, and we needed to launch in 6 months. Our solution: revive our design language.TRANSCRIPT
How to revive a design language to get to
AWESOME PRODUCTS
DORELLE RABINOWITZERICA DECKER
HELLO.
ERICA DORELLE
Our design language took us from this…
…to this.
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
Create a design-led strategy1
A cohesive, multi-device user experience
that our customers love.
OUR VISION
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.
We started with design, not features.
We used core flows to define basic design patterns.
Then we focused on refining and extending our design language.
We created ownable moments of delight.
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.
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
Design for an ecosystem2
How the patterns work together.
How the products work together.
How new products enter the ecosystem.
And how the teams work together.
Designing for an ecosystem means you can’t work in a silo. You have to
collaborate. With everyone.
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
Connect people3
Everyone owns the design language.
We’re roadies, not rockstars.
I need to solve for xyz.
Oh wow, so do I!
It’s better to solve problems together.
We should solve this together.
Right-o!
It’s better to solve problems together.
It’s better to solve problems together.Collaborate!
Be fun to work with.
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.
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
The tool matters, too4
You need a tool for your design language.We call ours a “toolkit”.
Ask for forgiveness, not permission.
You can’t get to awesome if you’re always staring at awful.
Organize by how your design language is built.
Organize by how your design language is built.
Everyone uses the toolkit.
If everyone is always collaborating… how do you make decisions about the design
language?
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
Make smart decisions5
A cohesive, multi-device user experience
that our customers love.
OUR VISION
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.
Define ambiguous terms.
It needs to be consistent! Use purple!
I’m not sure that’s what they mean
by consistent.
FIXED= stay consistent
FLEXIBLE= you have some choices
FREE= roll your own and smoke it
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
Know when to consciously deviate from the design language.
DEVICE CONVENTION
DESIGN LANGUAGE CONVENTION
VS
The design language will evolve.
Design for an ecosystem
Connect people
The tool matters, too
Make smart decisions
2
3
4
5
1 Create a design-led strategy
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!
Last fiscal quarter, we added over 45,000 new customers to our QuickBooks
ecosystem, bringing our total number to over 600,000.
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?
Remember the world without a design language?
A design language will help you become design-led. DESIGN-LED PRODUCTS = AWESOME.
The end :)Oh crap. How many times did we say “awesome”?
[email protected] @dorelvis
[email protected] @twitterissilly