Slide 1

Slide 1 text

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