1 of 42

GOOGLE’S DESIGN SPRINT WORKSHOP FOR MOBILE

Designed by

Carrie Mah

2016

Hi, my name is Carrie Mah and I’m here to guide you through Google’s Design Sprint and teach you mobile design principles.
You will be working on designing and developing a prototype for a persona with the people at your table. It will be an interactive and collaborative workshop, so take a few minutes to introduce yourself to each other at your tables:

Name
Location or where you study
What you do or study
How long you’ve been doing what you do
Favorite thing to do outside of work

ABSTRACT

When creating your own project, do you find yourself diving into code first? Designing is an essential part of creating a successful project - whether it is an application, website, or a school assignment. It's not just for the designers, but for developers as well. When working in an industry with multiple disciplines, it is part of your job to inform whether a design is feasible. When creating anything, it is important to focus on your users and expand your creativity by coming up with a lot of ideas.

Learn how to design for mobile using Google's Design Sprint framework (http://www.gv.com/sprint ) by understanding the user, ideating solutions, and prototyping within groups.

This workshop is intended for everyone of all disciplines and ages. Although it concentrates on mobile design, the steps you will go through applies to any platform. If you are interested in mobile development, learning what a design sprint looks like, or what a Google framework looks like; this workshop is for you! If you are still not sure, this is a quick but great way to familiarize yourself with User Experience Design and Human Computer Interaction. If you are currently a UI or UX designer or already in HCI, this is just another method you can add to your tool belt.

Disclaimer: Content used was based on the Google Design Sprint. The workshop format is based off the Google Women Techmakers Summit. Slides created by Carrie Mah.

2 of 42

WHAT’S A DESIGN SPRINT?

Agile Development & Design Thinking is iterative, time-boxed, and user-focused

Google Ventures 5-day Product Design Sprint was adapted to teach design principles

Background

Definition

Framework for teams to solve & test design problems

Definition: a framework that teams can use to solve and test design problems.

Before you start developing, you need to test your idea.

Background: Based on agile development and design thinking because it is iterative, time-boxed, and user-focused.

Google Ventures’ Product Design Sprint takes a product or feature from design through prototyping & testing.
The methodology was adapted to teach design principles for new form factors such as Android Wear.

I went through a condensed version of the Google Design Sprint at the Google Women Techmakers conference.
I learned a different way to design, and wanted to share this method with you guys.
I adapted Google’s workshop on the Android Wear design principles into mobile design principles.

Please note that all activities will be time-boxed. Do not feel discouraged from the time constraint - the goal is to learn and equip you with design skills.

3 of 42

THE PROCESS

These are a series of steps that alternatively flare out then focus back in.
We start by understanding our situation and learn about the design philosophy.
Next we’ll define a specific challenge, user, and user problem.

This step is merged with understanding when learning about form factors.

Our next step is to diverge and brainstorm all possible solutions to the problem.
We focus again by deciding on one solution to explore in depth.
Then we prototype all the ways the idea can manifest.
Finally we validate the design by presenting one fleshed out idea to a larger group and receiving feedback.
To refine your idea, these steps should be repeated...but we won’t be able to do that for this workshop.
We only have [[90 minutes]], so you’ll be under pressure and need to work quickly - pressure often inspires creativity. The goal of today is to fail quickly and not be committed to one idea.

Note: this slide deck provides time for a 2.5 hour version and a 1.5 hour version. Please reduce or expand activity times proportionally for a different overall length.
TickCounter is a simple timer to use.

4 of 42

UNDERSTAND

PHILOSOPHY

1

CHALLENGE

2

USER

3

5 of 42

How does mobile design apply to your user and their needs?

1. PHILOSOPHY

6 of 42

Frame your ideas as “How might we?…” questions

Goal Ideas that utilize mobile design patterns

THINK ABOUT MOBILE

7 of 42

Users, users everywhere

WHY MOBILE?

Separate mobile design

Mobile optimization

There are a lot of users: 80% of internet users own a smartphone and 89% of their time spent on media is through mobile apps. That means tons of of people use mobile.
Mobile and desktop users need a separate design. Neither can be ported to each other, as factors such as interaction techniques, how people read, context of use, and what can be grasped at a glance, differ.

Mobile users get a better user experience from a well-designed mobile site. They may encounter a slight delay when going to the full site, but it is acceptable.
A mobile design for desktop users creates a suboptimal experience as they have bigger screens and better input devices (ie. a mouse is more precise than a finger).
With that, the UX should be the same throughout different platforms, but the UI should be different - utilize the design guidelines with the specific platforms.

As of April 21, 2015, Google Search ranks sites on mobile optimization. If your user is on mobile, automatically direct them to the mobile design. However, give your users the option to go to the full site for easy maneuverability.

8 of 42

Personal

MOBILE IS...

Always with us

Always on

Integrated

Improving

Phones | TechStage | CC BY 2.0

Compared to desktops, mobiles have smaller screens, intermittent connections, and lower battery lives. Despite this, mobile is still quite powerful as it’s:

Personal: Phones are connected to our lives and how we share information. We also customize them to our tastes.
Always with us: portable, fits in the hand, and follow us everywhere. Whether we go out or we’re at home, we often check our phones once a day...hour...minute.
Always on: even when we stop looking at our phones, it constantly notifies us - email, SMS, social media - we’re always connected.
Integrated: our phones have powerful sensors that integrate seamlessly with our lives and needs. It can detect location, movement, acceleration, orientation, proximity, environmental conditions, and more.
Improving: hardware and features continue to improve - Moore’s Law is still relevant to this day.

9 of 42

Allow customization

SERVICE

Learn behaviors

Save states

Photo | Eelke | CC BY 2.0

10 of 42

Bored, busy, lost users

CONTEXT AWARE

Easy learning curve

Recover from interruptions

You also want to consider the users and the context in which they use their mobile device:

Bored: Typically on their couch at home who want to kill time. They require immersive and delightful experiences as they use their devices for long periods of time. Interruptions are likely to occur, so allow your app to pick up where you left off.
Busy: Typically on-the-go and juggling several things at a time. They need to accomplish micro-tasks quickly and reliably with one hand in hectic environments. The user will have tunnel vision, so large targets (for call to action items such as buttons) and bold design are important.
Lost: Typically in transit, in unfamiliar surroundings, or in familiar surroundings but interested in something unknown. Key concerns include intermittent connectivity and battery life, so offer some level of offline support and use battery hogs such as geolocation sparingly.

Apps are easy to learn when you can recall previous interactions instead of learning new things. Oftentimes users try something (e.g. pinch) and expect a common reaction (e.g. zooming in).

Make your app easy to learn by leveraging visual patterns and muscle memory from other apps.

Interruptions from the external environment often divert our attention away from the small screen. Attention is often fragmented and sessions cut short.

Recover from interruptions by resuming where they left off and allow users to save their progress. Users might transition to the desktop counterpart, so make this process as smooth as possible so the user doesn’t have to redo work done before an interruption.

11 of 42

Necessities

SIMPLE

Concise content

Minimal graphics

Sony Mobile | Vernon Chan | CC BY 2.0

Simplicity is another key factor:
Necessities: Prioritize the essential as users get overwhelmed when they see too much. Break tasks and information into small, simple chunks. Hide options that aren’t essential, and teach people as they go.

Users want to find information or accomplish a task, so concentrate on the content. Minimize the interface chrome - essential elements when using a software such as buttons, navigation, and checkboxes. Make space for essential content while accommodating a high content-to-chrome ratio.

Concise content: Use short phrases and simple words as it is easier to scan information. Mobile users want to access information quickly, and will often skip walls of text.
Minimal graphics: Pictures are more efficient than words. Consider using them to explain ideas to get people’s attention. Ensure they are simple as complicated pictures are just as troublesome as walls of text.

12 of 42

Navigation

ACCESSIBLE

Orientation

User input

The Hunt | Laura Torre | CC BY 2.0

“Fat finger” problem

Although many people own mobile devices, not all of them have high-end devices (flip phones are still a thing). If users who own low-end devices are part of your key users, minimize the bells and whistles. Don’t forget about digital accessibility for the color blind or visually impaired.
Navigation: Users should always know where they are. Make places in the app look distinct, and use smooth transitions between screens.

Pick a navigation model that makes sense. You may need to separate primary and secondary navigation if your desktop counterpart is complicated.

Orientation: Portrait mode is the most popular orientation as it is less awkward to interact with one hand. If your app invites a lot of typing, support landscape mode so people can access a larger keyboard.
User input: When your user needs to type, make it easier for them by displaying the most useful keyboard (text, number, email, URL). Consider whether auto-correct, auto-capitalization, or auto-complete should be enabled.
“Fat finger” problem: You’re likely to use your thumbs when interacting with your phone, which are imprecise for targeting tiny regions on the phone. Enlarge interface elements and be conscious of where you place elements relative to each other. For example, putting ‘enter’ and ‘back’ in an SMS app would be a bad idea.

13 of 42

Responsive feedback

COMMUNICATIVE

Alerts & confirmations

Clear instructions

You also want to communicate to your user through:
Responsive feedback: Your app needs to provide instant feedback for every interaction, either tactile (vibrations) or visual (highlighted buttons). If requests take a while, display a spinner or progress bar to let them know you’ve heard them but need them to wait.
Alerts & confirmations: Only interrupt users if it’s critical, time-sensitive, and important. Confirmations are also acceptable alerts as they are less intrusive and responding to user actions. They might also be in context or expected such as confirming a delete action. In this case, the default should be the safest choice to avoid inadvertent destructive actions.
Clear instructions: Break complex tasks into smaller steps that can be easy to accomplish. When a user encounters a problem, be gentle in how you correct them. Give clear recovery instructions and spare users the technical jargon.

14 of 42

INTERACTIVE

Touch Gesture Icons | Jascha Brinkmann

One of the most unique things about modern touch screens is that it supports gesture-based interaction. These come with some guidelines:

Invisible: Since gestures are hidden, users may have a hard time discovering them. You need to find a good way to reveal their existence. Usually a ‘how-to’ is displayed at the beginning of an app which can be accessed at any time.
Two hands: Multi-touch gestures require two hands, but it can be frustrating when you only have one hand free and want to do something like pinch or spread. Google Maps includes zoom in and out buttons to solve this problem.
Optional: Gestures are nice-to-have, much like keyboard shortcuts. Although most people won’t use gestures, power users will be annoyed without them.
Supplementary: Although there are common gestures (see diagram), a universal vocabulary doesn’t yet exist. Include visible controls such as buttons to follow the two hand and optional guideline.

15 of 42

Accessorize

CONVENIENT

Complete actions

Utilize phone features

16 of 42

MULTIFACETED

App vs Web | Lohith Ramachandra

Mobile also allows users to access the web or download apps. Here are some of the differences:
Mobile Web

Quick to access: Insert a URL and you’re there; apps need to be downloaded and installed.
Compatible: Although HTML renders different across browsers and devices, it can function for the most part. Apps are limited to the platform they’re created on.
Easy to search: Finding a website is simple through search engines; although most popular apps have a website landing page, searching tends to be restricted to app stores.
Easy to share: URLs can be easily shared; only content within an app can be shared through connected platforms, but that is still limited.

Mobile Apps

Interactive: When playing a game on mobile, an app is the superior platform. Once a social media app is installed, it is quicker to update and post content rather than waiting for a website to load.
Personalized: An app can access data about the user and tailor their experience. Apps are the way to go if people use them on a regular basis in a personalized and private way.
Integration: Apps can access your phone’s features with more accuracy than websites.
Offline support: If users benefit from offline support (remember Lost user types?) then an app makes sense.

17 of 42

IMPRESSIONABLE

18 of 42

In a world with no laptops or desktops, how can you use mobile to solve your computing needs?

2. DESIGN CHALLENGE

19 of 42

Hypothesize & generalize to create valuable personas

3. USER

Young Chef | Chris Ford | CC BY 2.0

20 of 42

Céline needs a way to…

& wants the experience to be… because she values…

USER EXAMPLE

Photo | chandlerchristian | CC BY 2.0

21 of 42

Your user needs a way to

& wants the experience to be

because they value

Goal Identify users’ needs

IDENTIFY USERS’ NEEDS

To help you build applications for people, these personas are for you to use. During the sprint, you are designing for the person at your table.
By the end of this time, your team should define the users’ needs in the form of this product statement.

Rules are meant to be broken, so if you have another way to express their needs in a specific and concise way, feel free to use it.

You are not given much information about this person, so you need to assume things.

This means concentrate on a specific aspect of this person - think about what their needs are.

ACTIVITY

10 minute activity (2.5 hour version)
6 minute activity (1.5 hour version)
Individually review your persona, then as a group, discuss what you identified as the users’ needs.

As a group, agree on a need to fill out the product statement.

Goal: Fill in the blanks and identify users’ needs.

MATERIALS

Personas (written by Carrie Mah, photos under CC license from Flickr).

22 of 42

DIVERGE

Exploring an Idea | Jonathan Parker-Jones | CC BY 2.0

23 of 42

Defer judgment
Go for quantity
Encourage wild ideas
Build on others’ ideas
Be visual

BRAINSTORMING RULES

24 of 42

Accept & build on ideas by rolling it out. Throw skepticism off board: you’re never wrong in this phase.

“YES, AND!”

25 of 42

IDEATE TO HELP THE USER

In a world with no laptops or desktops, how can you use mobile to solve your computing needs?

Goal Ideas that answer the design challenge & user needs - go crazy!

26 of 42

Design Thinking work in groups

Design Sprints work individually then as a group

SHARING TIME

27 of 42

ORGANIZE IDEAS

Technical Complexity

User Value

Hackathon

Startup

28 of 42

x-axis: technical complexity

y-axis: user value

Goal Categorized ideas - be realistic this time

CATEGORIZE IDEAS

29 of 42

DECIDE

Dot Voting | Alan Levine | CC BY 2.0

30 of 42

Dot-mocracy: given a set number of dots, vote on the idea you like most

Goal Choose an idea with the highest number of votes

VOTE ON AN IDEA

It’s now time to choose an idea to build by voting.

Dot voting is a fast and simple way to pick an idea.
You are given a fixed number of votes (1/3 of the options + 1).
You can vote multiple times on the same idea, or split them up - your choice.
For more information, Dotmocracy.org and Michael Dennison wrote guides.

Remember you aren’t committing to this idea for the rest of your lives; you are deciding which idea you want to prototype as a team for the remainder of the design sprint.

The purpose of this sprint is to experience the process and understand how to make great user experiences using the design principles behind great mobile apps.

ACTIVITY

5 minute activity (2.5 hour version)
3 minute activity (1.5 hour version)
Vote on one idea (or a group of similar ideas).

You can vote independent of others’ opinions or narrow down your choices with brief discussion.

Goal: Choose an idea with the highest number of votes.

RESOURCES

Dot vote stickers (or markers)

31 of 42

PROTOTYPE

Paper Prototype | Betsy Weber | CC BY 2.0

32 of 42

PAPER PROTOTYPE

Paper Prototyping | Paper Prototyping | Paper Prototyping | Samuel Mann | CC BY 2.0

Workshop | Samuel Huron | CC BY 2.0

33 of 42

HOW TO FOLD PAPER

Baseline

34 of 42

KEY MOMENTS

Steps in user experience or interaction

Not a storyboard, but ideas

Independent actions or situations:

Screen: how does it look?

Interaction: how is it used?

Use case: when & where is it used?

35 of 42

Goal 8 key moments on user experiences & interactions

CREATE KEY MOMENTS

What are key moments?

Steps in a possible user experience or interaction with your service.
Not a storyboard as they do not need to be connected or tell a cohesive narrative. They can be 8 completely different ideas.
Independent actions or situations. Specifically:

A screen: what does the service look like?
An interaction: how does the persona use the service?
A use case: when & where does the persona use the service? When does the service intervene with the persona’s life?
Examples: what it looks when it asks a question, the user swiping or the screen notifying the user.

ACTIVITY

10 minute activity (2.5 hour version)
6 minute activity (1.5 hour version)
Fold a blank piece of paper into 8 so when you unfold it, you end up with 8 rectangles.
Sketch or describe 8 different key moments that help define the solution for this user experience.
This exercise is about pushing yourself to think quickly & visually.
Goal: 8 key moments on user experiences and interactions.

RESOURCES

Piece of blank paper (only one side needs to be blank)

36 of 42

Provide meaningful feedback

Goal Your favorite key moment with feedback & then selected to expand further

CHOOSE A KEY MOMENT

How do you give meaningful feedback?

Avoid being vague. If you have an opinion on something, be specific (e.g. ‘this idea would be great for everyday use’, not ‘I like this’).
Recommend your favorite ideas and explain why.
Ask questions, especially:

How practical is the solution? Does this actually solve the users’ needs?
How usable is the solution? Can the user easily understand how to do something?
How feasible is the solution? Can it be designed and built within a reasonable time frame with existing technologies?
How viable is the solution? Is this just a band-aid solution or a one-use app? Can this be extended or maintained for a long time?

Zurb University’s Ben on How to Give Meaningful Feedback

Zurb University’s Ben on Get the Real Picture from User Feedback
Zurb University’s Jordan on Summarize Customer Feedback through Affinity Diagrams

Emily Wray on RISE Model for Meaningful Feedback

ACTIVITY

10 minute activity (2.5 hour version)
6 minute activity (1.5 hour version)
As a group (or in pairs) share your favorite key moment and get feedback from your teammates.

If you can’t decide, briefly explain your key moments and use others’ feedback to help you choose one.

Once everyone has shared their key moment, you will all decide one key moment to expand further.

You can all expand on the same key moment (you can vote on the best idea), or choose one separately.

Goal: Give feedback to someone’s favorite key moment. Once you’ve received feedback, select one to expand further.

RESOURCES

Optional dot vote stickers (or markers)

37 of 42

CREATE A UI FLOW

Goal A user interaction flow based on the key moment you chose

What is a User Interaction flow?

You now have enough information to start a user journey - a story that involves your persona and key moment.
A UI flow are specific interactions with the app and feedback to the user - we are now interested in specific screens and relationships between them.
Pick a path - it needs a starting point (why does your user need your app, and when), an end goal (what does your user want to achieve), and everything in between (how the user gets to their end goal).
The UX Review’s Chris Mears on User Journeys - The Beginner’s Guide
Peep Laja on Build it With the User in Mind: How to Design User Flow
Will Little on How to create a user experience flow chart (UX Flow Chart)

ACTIVITY

15 minute activity (2.5 hour version)
9 minute activity (1.5 hour version)
Individually, expand the one key moment you’ve decided on (either as a team or alone) into a UI flow using mobile templates provided to you.

Sketch a mobile flow - draw in arrows or label screens to guide a reader on your UI flow.

Goal: A user interaction flow based on the key moment you chose.

RESOURCES

Interface Sketch (interfacesketch.com)

Using their template, I created my own mobile template for an 8x11’’ sized paper.

38 of 42

VALIDATE

Panel Feedback | Brandon Schauer | CC BY 2.0

39 of 42

Present a fleshed out idea.

Goal A short presentation of your favorite/modified UI flow

SHARE A UI FLOW

40 of 42

RESOURCES

Google Sprint

gv.com/lib

nngroup.com

smashingmagazine.com

developers.google.com/design-sprint

developer.android.com

developers.google.com

Mobile

41 of 42

WORKSHOP MATERIAL

goo.gl/JR6oQ8

goo.gl/jNbzFE

goo.gl/WdRRHW

Mobile Template:

Personas:

Slide deck:

misscarriemah.typeform.com/to/MuZKFO

Feedback Survey:

42 of 42

THANK YOU

Google Design Sprint Workshop for Mobile by Carrie Mah licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Based on work at Google.

goo.gl/WdRRHW