Take a seat and relax!

=)
We will start soon
Welcome to a Design Sprint
 Agenda

09:00 Introduction 13:30 Material Design

09:15 About Design Sprint 14:15 Diverge
09:30 Understand 15:15 Decide
10:15 Coffee time :) 15:30 Coffee time :)
10:45 Define 15:45 Prototype
12:15 Lunch \o/ 17:15 Validate
17:45 Closing
Design Sprint?
 A design sprint is basically a structured
brainstorming, based on Design Thinking
and Agile Development
 Where it came from?

Gamestorming Design Thinking Agile Manifesto

The Gamestorming IDEO Scrum, XP, Crystal
Book Stanford d.school Clear etc.
 Where it came from?

Jake Knapp Sprint: The Book

http://gv.com/sprint
@jakek Em breve
 Why?
Build
2
In Agile Processes, whe need
to build and launch in order to
learn

Idea 1 3 Launch It has a high cost and time

User feedback frequently
comes after launch

Learn
 Why?
Build
Shortcut to learning, without
2 having to build and launch.
Helps give a route to freezed
projects.

Idea 1 3 Launch Engagement with the solution.

Knowledge shared between
team

4
User focus.
Design Sprint
Learn
Design is not an individual sport. So, we encourage sprints
to include all points of view, and thus align ourselves to a
new world together.
 Before the sprint

• Write a design brief – Define the challenge, timeline to launch

• Invite team

• Schedule user testing

• Schedule lightning talks

• Preparate slide deck, rooms

 During the sprint

• Prepare the space

• Facilitate

• Resolve conflicts

• Document – Daily check-ins, daily summaries

• Celebrate! :)
 After the design sprint
• Update path to launch

• Summarize

• Organize/Document

• Survey team

• Reflect

• Plan next sprint

What are the steps of a design sprint?
 Understanding a bit more

1. Understand: Dive into the user information, technical requirements,

competitive analysis…
2. Define: Explore opportunities and define business focus
3. Diverge: Quickly develop the maximum possible solutions
4. Decide: Choose the best idea
5. Prototype: Make a prototype/mockup/presentation of the chosen idea
6. Validate: Test with users and stakeholders the adherence of the
solution found
 Stage 1
Understand
 Before anything
Let’s review the challenge
 Understand objectives

Clarity on the product, user needs, the

market, and technical possibilities
Let’s give food for thought
What problem are we trying to solve?
 Kind of challenges we attack on a sprint

What are you missing that you need critically?

What is the riskiest decision or hypothesis you want

to test with users?
 Design challenge

First steps… Challenge statement

• interview key stakeholders • purposeful (key result)

• identify or review use cases • concise and inspiring

• Review all relevant user research • Targeted to users

• review current designs (if any) • aligned and timely

 Example of Challenge Statement

“Design a mobile app that helps a visitor plan and find the
most relevant, personalized and exciting activities to do in
a city if the visitor has one day to for the visit.”
Deliverables: Wireframe sketches for ideas to be implemented in Q3 2015.
 Example of Challenge Statement
Who is the user
what they’ll be doing?

“Design a mobile app that helps a visitor plan and find the
most relevant, personalized and exciting activities to do in
a city if the visitor has one day to for the visit.”
Deliverables: Wireframe sketches for ideas to be implemented in Q3 2015.

What to deliver? When?

 Understand Methods

• 360º lightning talks

• User interviews Don’t forget to

summarize all the
findings
• Visiting users in the field

• Stakeholder map

• Competitive overview
Take notes of everything
 360º View
Design and Research
What do people need?
What is useful and
Business, Sales, Marketing delightful?
UX
What are the business goals?
What is lucrative?
Technology
Business Engineering
What’s possible?
What features can be built
now or over time?
 How to interview a user?
Do with your team a script of questions directed to
better understand your users, their needs, desires,
expectations
Explore Emotions

1. Avoid demographic questions Evoke Stories

2. Focus on listening. Ask another person from your team
to make notes Thanks &
Wrap-up
3. Start with broader questions and then enter the details
Build Rapport
4. Encourage stories, but only relevant to your problem
5. Think that the script is a guide, not a rule
6. Try to identify the flow by which the user will pass on Intro Project
your product

Time Thanks &

Intro Self
Wrap-up
 Creating a persona
Who?
John is a ______________________
What?
that needs ________________________________
How?
and wants the experience to be _____________________
Why?
because they value ________________________________
Stage 2
Define
 Define objectives

Define a strategy and analyze what’s the

best path to actually arrive at the solution
 The Golden Path
The Golden Path are the key steps that a user takes to find the value they
came to find in the first place.

Browse recommendations

User visit Receive & Love

Search View product Buy

Edit order
 How might we?

How assumes solutions may exist

Might says we don't have to find a

solution, but let's try.

We is all about finding creative

solutions together with your team.
 Zen Voting

Use the voting dots to

vote on the best ideas
 Metrics of success
Heart Framework Happiness: User attitude perception metrics.
Ex.: NPS
HAPPINESS Engagement: User involvement level. Ex.: Page
views
ENGAGEMENT Adption: New users of a product or
ADOPTION functionality. Ex.: Amount of saved cards last
week
RETENTION Retention: Rate of returning users. Ex.: How
many users opens your app for a second or
TASK SUCCESS third time?
Task success: efficiency, efectivity, error rate.
Ex.:People who completed or abandoned a
registration process
 Design principles

What three words would you like users to say about

your product? List all possible design principles and
reactions your team cares about individually, and
select the best ideas as a team.
Helpful

Easy to learn
Fun to use

Easy
The first tweet!

Imagine it's time to launch your product. What is

the first announcing tweet you would send out?
Material Design
by @nvasconcelos_
So… what is Material Design?
http://google.com/design/spec
Objective #1
Objective 1
Sintetize the classical
principles of design with
the innovation and
possibilities from science
an technology
Objective #2
Objective #2

Create a system that

allows an unified
experience across
platforms and view sizes.
Principles
 Principles

Material is the Bold, graphic, Motion provides

metaphor intentional meaning
Material is the metaphor
“ A material metaphor is the unifying theory of a rationalized
space and a system of motion. The material is grounded in
tactile reality, inspired by the study of paper and ink, yet
technologically advanced and open to imagination and
magic."
The paper and ink
The paper has elevation
The ink, not…
 Surfaces are intuitive and natural

Surfaces and edges provide

visual cues that are grounded in
our experience of reality. The
use of familiar tactile attributes
speaks to primal parts of our
brains and helps us quickly
understand affordances.
 Dimensionality affords interaction

The fundamentals of light, surface, and

movement are key to conveying how
objects interact. Realistic lighting shows
seams, divides space, and indicates
moving parts.
Bold, graphic, intentional
 Inspired on graphic design

The foundational elements of print-based

design — typography, grids, space, scale,
color, and use of imagery — guide visual
treatments.
 Color, surface, and iconography emphasize actions

These elements do far more than please the

eye. They create hierarchy, meaning, and
focus.
Cores
Color in material design is inspired by bold hues juxtaposed with
muted environments, deep shadows, and bright highlights.
50 #FFEBEE 50 #FCE4EC 50 #F3E5F5 50 #EDE7F6 50 #E8EAF6 50 #E3F2FD

100 #FFCDD2 100 #F8BBD0 100 #E1BEE7 100 #D1C4E9 100 #C5CAE9 100 #BBDEFB

200 #EF9A9A 200 #F48FB1 200 #CE93D8 200 #B39DDB 200 #9FA8DA 200 #90CAF9

300 #E57373 300 #F06292 300 #BA68C8 300 #9575CD 300 #7986CB 300 #64B5F6

400 #EF5350 400 #EC407A 400 #AB47BC 400 #7E57C2 400 #5C6BC0 400 #42A5F5

500 #F44336 500 #E91E63 500 #9C27B0 500 #673AB7 500 #3F51B5 500 #2196F3

600 #E53935 600 #D81B60 600 #8E24AA 600 #5E35B1 600 #3949AB 600 #1E88E5

700 #D32F2F 700 #C2185B 700 #7B1FA2 700 #512DA8 700 #303F9F 700 #1976D2

800 #C62828 800 #AD1457 800 #6A1B9A 800 #4527A0 800 #283593 800 #1565C0

900 #B71C1C 900 #880E4F 900 #4A148C 900 #311B92 900 #1A237E 900 #0D47A1

A100 #FF8A80 A100 #FF80AB A100 #EA80FC A100 #B388FF A100 #8C9EFF A100 #82B1FF

A200 #FF5252 A200 #FF4081 A200 #E040FB A200 #7C4DFF A200 #536DFE A200 #448AFF

A400 #FF1744 A400 #F50057 A400 #D500F9 A400 #651FFF A400 #3D5AFE A400 #2979FF

A700 #D50000 A700 #C51162 A700 #AA00FF A700 #6200EA A700 #304FFE A700 #2962FF
0 #FFF8E1 50 #FFF3E0 50 #FBE9E7 50 #EFEBE9 50 #FAFAFA 50 #ECEFF1

00 #FFECB3 100 #FFE0B2 100 #FFCCBC 100 #D7CCC8 100 #F5F5F5 100 #CFD8DC

00 #FFE082 200 #FFCC80 200 #FFAB91 200 #BCAAA4 200 #EEEEEE 200 #B0BEC5

00 #FFD54F 300 #FFB74D 300 #FF8A65 300 #A1887F 300 #E0E0E0 300 #90A4AE

00 #FFCA28 400 #FFA726 400 #FF7043 400 #8D6E63 400 #BDBDBD 400 #78909C

00 #FFC107 500 #FF9800 500 #FF5722 500 #795548 500 #9E9E9E 500 #607D8B

00 #FFB300 600 #FB8C00 600 #F4511E 600 #6D4C41 600 #757575 600 #546E7A

00 #FFA000 700 #F57C00 700 #E64A19 700 #5D4037 700 #616161 700 #455A64

00 #FF8F00 800 #EF6C00 800 #D84315 800 #4E342E 800 #424242 800 #37474F

00 #FF6F00 900 #E65100 900 #BF360C 900 #3E2723 900 #212121 900 #263238

100 #FFE57F A100 #FFD180 A100 #FF9E80

200 #FFD740 A200 #FFAB40 A200 #FF6E40

400 #FFC400 A400 #FF9100 A400 #FF3D00

700 #FFAB00 A700 #FF6D00 A700 #DD2C00

Dark Primary Color Primary Color Light Primary Color Text / Icons
#303F9F #3F51B5 #C5CAE9 #FFFFFF

Accent Color Primary Text Secondary Text Divider Color

#FF4081 #212121 #727272 #B6B6B6
Estrutura
“The organization makes a system of many
appear fewer.”
–John Maeda
Quando você relaciona os elementos de uma interface de usando
proporção e consistência, você reduz a quantidade de informação
não essencial e deixa o conteúdo mais claro e objetivo.
Column grid Modular Grid
Module: 8x8 pixels/dps
Tipografia
Iconografia
Moving to Material Design
z
Motion provides
meaning
 User initiates change

In the real world, forces should be applied to

make an object start moving.
Animation is
choreographed on
a shared stage
Stage 3
Diverge
 Diverge objectives

Let’s unleash our creativity to create as

many solutions as possible! :)
Crazy 8’s - 8 ideas in 5 minutes
Stage 4
Decide
 Decide objectives

Deliberate about the ideas you came up

with in Diverge stage, refine, and choose the
best one or some combination of the ideas
so that way you get a best possible product.
 Zen Voting

Use os voting dots para votar nas melhores idéias!

 Stage 5
Prototype
 Prototype objectives

You are going to create and build the

wireframes, mockups, or the prototype that
you’ll actually test with real users.
Stage 6
Validate
 Validate objectives

Let’s test with real users and get valid

feedbacks
 That’s it
What to do after?
 Gracias :P

Ana Paula Batista Nelson Vasconcelos

anapaulaazambuja@gmail.com nelson@nvasconcelos.com
@nvasconcelos_