b e t a . t e l u s . c o m
Re s p o n s i v e , It e r a t i v e , C o l l a b o r a t i v e
@ P e a r lC h e n
Notes: go.klab.ca/devweek-telus
Slide 2
Slide 2 text
My n a m e i s Pe a r l C h e n .
H E L LO !
T h a n k s ,
D e v We e k !
Slide 3
Slide 3 text
Te c h n o l o g i s t + E d u c a t o r
I ’ M A …
Karma Laboratory
Slide 4
Slide 4 text
C a s e s t u d y
B E TA .T E LU S .C O M
Responsive.
Iterative.
Collaborative.
Slide 5
Slide 5 text
T E LU S q u i c k f a c t s
B E TA .T E LU S .C O M
• One of Canada's largest telcos with 13.3 million
customers
• 3G/4G wireless network across Canada
• Home internet & digital cable in some regions
• You know them by the critters
Slide 6
Slide 6 text
T E LU S q u i c k f a c t s
B E TA .T E LU S .C O M
• Employs 41,000 people with offices in Toronto,
Vancouver, Montreal, and more
Slide 7
Slide 7 text
T h e o l d T E LU S
B E TA .T E LU S .C O M
Slide 8
Slide 8 text
T E LU S D i g i t a l L a b s
B E TA .T E LU S .C O M
+ +
Slide 9
Slide 9 text
Fu l l y r e s p o n s i v e , m o b i l e f i r s t
B E TA .T E LU S .C O M
Slide 10
Slide 10 text
L e s s t e c h n i c a l , m o r e p ro c e s s
B E TA .T E LU S .C O M
"Wait, I'm confused.
You're a developer?
You speak like a manager."
- identity protected
Slide 11
Slide 11 text
S o f t w a r e i s a b o u t p e o p l e
T E LU S
"The complexities that come
with dealing with people far
exceed technology problems."
- I wrote this in "There is no "I" in coding"
medium.com/better-humans/2e2ed4daeb99
Slide 12
Slide 12 text
Re s p o n s i v e .
It e r a t i v e .
C o l l a b o r a t i v e .
Slide 13
Slide 13 text
W hy g o r e s p o n s i v e ?
R E S P O N S I V E
• Shared customer experience across different devices.
• Share similar experiences across consumers,
customer service reps, and in-store retailers.
I also wrote labs.telus.com/blog/inside-the-lab/responding-to-the-new-mobile-landscape/
Slide 14
Slide 14 text
W h a t i s " m o b i l e f i r s t "
R E S P O N S I V E
• Embrace changing usage contexts and devices.
• Focus, focus, focus.
Slide 15
Slide 15 text
Me a s u r i n g s u c c e s s
R E S P O N S I V E
• Call centre offload will save TELUS billions of dollars.
• The less time a customer spends on the website, the
more successful we can call it!
Slide 16
Slide 16 text
C S S m e d i a q u e r i e s
R E S P O N S I V E
At the heart of responsive design is the media query:
• Single:
@media ([feature property]: [value]) {
/* css */
}
• Chained:
@media ([feature property]: [value]) and
([another feature property]: [value]) {
/* css */
}
Slide 17
Slide 17 text
C S S m e d i a q u e r i e s
R E S P O N S I V E
• iPhone-ish:
@media (max-‐width: 320px) {
img { max-‐width: 100%; }
}
• iPad-ish:
@media (min-‐width: 321px) and (max-‐width: 768px) {
img { max-‐width: 60%; }
}
Slide 18
Slide 18 text
C o n t e n t v i e w p o r t
R E S P O N S I V E
Important gotcha! Update your page's viewport:
Slide 19
Slide 19 text
Re c o m m e n d e d Re a d i n g
R E S P O N S I V E
Slide 20
Slide 20 text
C S S g r i d f r a m e w o r k s
R E S P O N S I V E
getbootstrap.com
Slide 21
Slide 21 text
C S S g r i d f r a m e w o r k s
R E S P O N S I V E
foundation.zurb.com
Slide 22
Slide 22 text
C S S g r i d f r a m e w o r k s
R E S P O N S I V E
susy.oddbird.net
Slide 23
Slide 23 text
C S S g r i d f r a m e w o r k s
R E S P O N S I V E
Slide 24
Slide 24 text
P h o t o s h o p g r i d
R E S P O N S I V E
guideguide.me
Slide 25
Slide 25 text
P h o t o s h o p g r i d
R E S P O N S I V E
Slide 26
Slide 26 text
S i m p l i f y c o m p l e x i t y
R E S P O N S I V E
V I S U A L
D E S I G N
C O D E
C O M P L E X I T Y
Slide 27
Slide 27 text
Re s p o n s i v e .
It e r a t i v e .
C o l l a b o r a t i v e .
Slide 28
Slide 28 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Steps from thehelpfulartteacher.blogspot.co.uk/2012/07/drawing-and-shading-faceslearn-from.html
Slide 29
Slide 29 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Slide 30
Slide 30 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Slide 31
Slide 31 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Slide 32
Slide 32 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Slide 33
Slide 33 text
Ho w t o d r aw a p o r t r a i t
I T E R AT I V E
Slide 34
Slide 34 text
P ro c e s s v s f i n a l p ro d u c t
I T E R AT I V E
Slide 35
Slide 35 text
T h i n k b i g p i c t u r e f i r s t
I T E R AT I V E
• Don't fixate on details too early
— they will slow you down.
• Get the base structure right first
— it'll make everything else afterwards easier.
• Set goals and learn from each step.
• The less time you invest in something,
the easier it is to throw it away and start over.
Slide 36
Slide 36 text
Pa p e r p ro t o t y p i n g
I T E R AT I V E
Photo credit: davewrightjr.com/work-npr-planet-money.html
Our sketching
sessions involved
everyone — not just
designers.
Slide 37
Slide 37 text
C l i c k a b l e p ro t o t y p e s
I T E R AT I V E
Use PowerPoint/Keynote, UXPin, or inVison and
put it in front of customers asap!
Slide 38
Slide 38 text
3 s t a g e s o f d e v e l o p m e n t
I T E R AT I V E
L O - F I H I - F I
P R O D U C T I O N
R E A D Y
Slide 39
Slide 39 text
1 . L o - f i p ro t o t y p e s
I T E R AT I V E
Lo-fidelity HTML & CSS prototypes
Slide 40
Slide 40 text
1 . L o - f i g o a l s
I T E R AT I V E
• Structurally markup blocks of content.
• Do proof of concepts of any interactive elements.
• Time cap this HTML "sketching" period
— 1/2 a day or a full day should be enough.
Slide 41
Slide 41 text
1 . L o - f i w hy ' s
I T E R AT I V E
• Getting started is the hardest part!
• Developers get involved with design process earlier.
• Better time estimates.
• User testers have something that is interactive for
validation and feedback.
Slide 42
Slide 42 text
2 . H i - f i p ro t o t y p e s
I T E R AT I V E
Hi-fidelity HTML & CSS prototypes
Slide 43
Slide 43 text
2 . H i - f i g o a l s
I T E R AT I V E
• Iterate on the lo-fi prototypes and add visual
elements from the comps.
• Re-structure CSS and HTML more efficiently
(but code optimization not the point of this round.)
• Prepare for backend integration.
Slide 44
Slide 44 text
2 . H i - f i w hy ' s
I T E R AT I V E
• Better designer/developer workflow.
• No need to wait until designs are "final" to start
building.
• Identify systems that need to be created/optimized
e.g. component libraries and framework
Slide 45
Slide 45 text
U I c o m p o n e n t l i b r a r y
I T E R AT I V E
Slide 46
Slide 46 text
3 . P ro d u c t i o n r e a d y
I T E R AT I V E
Same as hi-fi prototypes but different under the hood!
Slide 47
Slide 47 text
3 . P ro d u c t i o n g o a l s
I T E R AT I V E
• Wrap up all remaining dev tasks
• Refactor and clean up code as per style guides, etc.
• Do a pre-QA test such as making sure it's working on
all target devices and speed/performance tests
• Write unit tests and documentation.
Slide 48
Slide 48 text
3 . P ro d u c t i o n w hy ' s
I T E R AT I V E
• Better build quality since it's already gone through 2
rounds.
• But
sometimes it's okay to launch rough code!
Slide 49
Slide 49 text
D a t a - d r i v e n d e c i s i o n s
I T E R AT I V E
Using analytics from Clicktale
Slide 50
Slide 50 text
D a t a - d r i v e n d e c i s i o n s
I T E R AT I V E
It's okay to throw things away.
Slide 51
Slide 51 text
C u s t o m e r r e s e a rc h
I T E R AT I V E
Slide 52
Slide 52 text
3 4 s t a g e s o f d e v e l o p m e n t
I T E R AT I V E
H I - F I
P R O D U C T I O N
R E A D Y
F E E D B A C K
L O O P
Slide 53
Slide 53 text
Fu t u r e ?
I T E R AT I V E
macaw.co
Slide 54
Slide 54 text
Re s p o n s i v e .
It e r a t i v e .
C o l l a b o r a t i v e .
Slide 55
Slide 55 text
C O L L A B O R AT I V E
This is what most people think of
when they hear the word "programmer".
S t e r e o t y p e s
Slide 56
Slide 56 text
C O L L A B O R AT I V E
We need to think of programmers
(and the act of programming) more like this.
S t e r e o t y p e s
Slide 57
Slide 57 text
S i t n e x t t o y o u r d e s i g n e r ( s )
C O L L A B O R AT I V E
Slide 58
Slide 58 text
A l w ay s t h i n k ( & t y p e ) o u t l o u d
C O L L A B O R AT I V E
Slide 59
Slide 59 text
Au t o m a t e A L L t h e t h i n g s
C O L L A B O R AT I V E
The Secret to Safe
Continuous Deployment
by Brett Slatkin
Slide 60
Slide 60 text
T h e r e i s n o ro o m fo r e g o
C O L L A B O R AT I V E
Slide 61
Slide 61 text
T h e r e a l e n d u s e r s …
C O L L A B O R AT I V E
of your code are your teammates, not website visitors.
Slide 62
Slide 62 text
T h e f i n a l w o r d
Slide 63
Slide 63 text
TWITTER @PearlChen
GOOGLE+ klab.ca/+
P E A R L C H E N
T h a n k y o u !
F I N