Design Day Workshop

2:00 pm: Welcome
2:10 pm: Introduction
2:15 pm: Design Sprint
3:15 pm: Break
3:20 pm: Visual and Product Design
4:00 pm: Technical Architecture
4:30 pm: Wrap Up
Agenda

Introduction
What is Design Day?
● Way to help explain the solution design process
● Hands-on practice with iterative design
● Guide on how to get started on a Solution Challenge
project

Solution Design 1:
Design Sprint

UNDERSTAND DEFINE SKETCH DECIDE PROTOTYPE VALIDATE

design sprint: five part workshop
Part 1
[10 mins]
Part 2
[8 mins]
Part 3
[5 mins]
Part 4
[20 mins]
Part 5
[20 mins]
Part 6
You’ll identify
the user and
map out their
problem
You’ll sketch
competing
solutions on
paper
You’ll make
difficult
decisions and
turn your
ideas into a
testable
hypothesis
You’ll hammer
out a realistic
prototype
You’ll test it
with real life
humans
Demo and
Celebrate

the problem: it’s hard to buy hats and glasses
virtually and ensure that they look and
feel good while being worn

Solution Design 2:
Visual and Product
Design

Visual design is...
(write it down!)

visual design
establish credibility
communicate a
brand/personality
enhance usability

information hierarchy is used to guide
the user’s attention

Vision AI Derive insights from your images in the cloud or at the edge with AutoML Vision or use
pre-trained Vision API models to detect emotion, understand text, and more. Industry-leading
accuracy for image understanding Google Cloud offers two computer vision products that use
machine learning to help you understand your images with industry-leading prediction accuracy.
AutoML Vision Automate the training of your own custom machine learning models. Simply upload
images and train custom image models with AutoML Vision’s easy-to-use graphical interface;
optimize your models for accuracy, latency, and size; and export them to your application in the
cloud, or to an array of devices at the edge. Vision API Google Cloud’s Vision API offers powerful
pre-trained machine learning models through REST and RPC APIs. Assign labels to images and quickly
classify them into millions of predefined categories. Detect objects and faces, read printed and
handwritten text, and build valuable metadata into your image catalog.
information hierarchy: very bad

Vision AI
Derive insights from your images in the cloud or at the edge with AutoML Vision or use pre-trained
Vision API models to detect emotion, understand text, and more.
Industry-leading accuracy for image understanding
Google Cloud offers two computer vision products that use machine learning to help you understand
your images with industry-leading prediction accuracy.
AutoML Vision
Automate the training of your own custom machine learning models. Simply upload images and train
custom image models with AutoML Vision’s easy-to-use graphical interface; optimize your models for
accuracy, latency, and size; and export them to your application in the cloud, or to an array of devices
at the edge.
Vision API
Google Cloud’s Vision API offers powerful pre-trained machine learning models through REST and
RPC APIs. Assign labels to images and quickly classify them into millions of predefined categories.
Detect objects and faces, read printed and handwritten text, and build valuable metadata into your
image catalog.
information hierarchy: bad

Vision AI
Derive insights from your images in the cloud or at the edge with AutoML Vision or use pre-trained Vision API
models to detect emotion, understand text, and more.
Google Cloud offers two computer vision products that use machine learning to help you understand your
images with industry-leading prediction accuracy.
AutoML Vision
Automate the training of your own custom machine learning models. Simply upload images and train custom
image models with AutoML Vision’s easy-to-use graphical interface; optimize your models for accuracy,
latency, and size; and export them to your application in the cloud, or to an array of devices at the edge.
Vision API
Google Cloud’s Vision API offers powerful pre-trained machine learning models through REST and RPC APIs.
Assign labels to images and quickly classify them into millions of predefined categories. Detect objects and
faces, read printed and handwritten text, and build valuable metadata into your image catalog.
information hierarchy: okay

information hierarchy: good
Vision AI
Derive insights from your images in the cloud or at the edge with AutoML Vision or use pre-trained Vision
API models to detect emotion, understand text, and more.
Google Cloud offers two computer vision products that use machine learning to help you understand your images
with industry-leading prediction accuracy.
AutoML Vision
Automate the training of your own custom machine
learning models. Simply upload images and train
custom image models with AutoML Vision’s easy-to-use
graphical interface; optimize your models for accuracy,
latency, and size; and export them to your application in
the cloud, or to an array of devices at the edge.
Vision API
Google Cloud’s Vision API offers powerful pre-trained
machine learning models through REST and RPC APIs.
Assign labels to images and quickly classify them into
millions of predefined categories. Detect objects and
faces, read printed and handwritten text, and build
valuable metadata into your image catalog.

color is used to communicate a
brand/personality

facebook spotify
twitter google

grid systems break up space into regular units

grid systems organize information on a page

grid systems: an old example
Vision AI
Derive insights from your images in the cloud or at the edge with AutoML Vision or use pre-trained Vision
API models to detect emotion, understand text, and more.
Google Cloud offers two computer vision products that use machine learning to help you understand your images
with industry-leading prediction accuracy.
AutoML Vision
Automate the training of your own custom machine
learning models. Simply upload images and train
custom image models with AutoML Vision’s easy-to-use
graphical interface; optimize your models for accuracy,
latency, and size; and export them to your application in
the cloud, or to an array of devices at the edge.
Vision API
Google Cloud’s Vision API offers powerful pre-trained
machine learning models through REST and RPC APIs.
Assign labels to images and quickly classify them into
millions of predefined categories. Detect objects and
faces, read printed and handwritten text, and build
valuable metadata into your image catalog.

grid systems provide clarity, efficiency,
economy, and continuity

activity: information display
Get the text here:
bit.ly/2JWt1dM
Jane Doe
1600 Amphitheatre Parkway, Mountain View, California
jane.doe@fakeemail.com
Software Engineer
Career Objective
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id
sapien ullamcorper, pellentesque magna volutpat, tempus purus.
Qualifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Skills
Programming Languages
C++, C, Java, Python
Spoken Languages
Spanish, Japanese
Professional Experience
Software Engineer, Google Cloud
Mountainview, California
5/1/19 - present
Software Engineer, Nest
Sunnyvale, California
2/4/18 - 4/20/19
Education
Bachelor of Science in Computer Science
Graduated from Example University 2019

Product design is the
act of designing a
product

A product is...
(write it down!)

A product is a solution
to a problem

A product is a solution
to a user’s problem

What are typical
problems for a new
product team?

A lack of time, funding,
and understanding of
the customer
What are typical
problems for a new
product team?

Build Efficiently
Measure Success
Learn
...and repeat!
How can we
mitigate these
problems?

“That version of a new product or
service which allows a team to
collect the maximum amount of
validated learning about customers
with the least effort”
- Eric Reis
What do we build?

Minimum
Viable
Product
What do we build?

Wireframing
Landing Page
Demo Video
Wizard of Oz
Working Prototype
What do we build?

Submit
3. You “automatically”
schedule a delivery
2. Email sent to you
1.
“wizard of oz”

activity: build an MVP
BUILD
MEASURE
LEARN

Solution Design 3:
Technical Architecture

Front-end (client)
Back-end (server)
Running Code
Data Storage Other Services
...
...
...

example:
photo-sharing app
Front-end (client)
Back-end (server)
Running Code

example:
photo-sharing app
Front-end (client)
Back-end (server)
Running Code
Cloud
Functions
Firebase
Firestore
Firebase
Storage
Web

Front-end (client)
Back-end (server)
Running Code
Cloud
Functions
Firebase
Firestore
Firebase
Storage
Web
Cloud Vision
API
example:
photo-sharing app

Front-end (client)
Back-end (server)
Running Code
Firebase
Firestore
Firebase
Storage
Web
Cloud Vision
API
App Engine
Standard
w/
Django (Python)
Express.js (Node.js)
Ruby on Rails (Ruby)
Spring (Java)
...
example:
photo-sharing app

Front-end (client)
Back-end (server)
Running Code
Firebase
Firestore
Firebase
Storage
Web
Cloud Vision
API
App Engine
Flexible
w/
Django (Python)
Spring (Java)
...
example:
photo-sharing app

Front-end (client)
Back-end (server)
Running Code
Firebase
Firestore
Firebase
Storage
Cloud Vision
API
App Engine
Flexible
w/
Django (Python)
Spring (Java)
...
example:
photo-sharing app

How can we do this?
1) Considerations
2) Research
3) Design

step 1:
considerations
What does my application require?
How many people are on my team?
How experienced are we?
What languages / tech are we comfortable with?
What is our budget?
What is our timeline?
How accelerated is our timeline?
How much load does this service have to provide?
What security considerations must we make?
What compliance considerations must we make?
What technologies do we have to integrate with?
…

step 2: research
bit.ly/google-cloud-4-words

workshop:
e-commerce ,
food-delivery,
productivity app,
(insert your idea here)
Front-end (client)
Back-end (server)
Running Code

Website Discord Linkedin YouTube Twitter

Design Day Workshop

Recommended

Recommended

More Related Content

Similar to Design Day Workshop

Similar to Design Day Workshop (20)

More from Prottay Karim

More from Prottay Karim (14)

Recently uploaded

Recently uploaded (20)

Design Day Workshop