beta.telus.com: Responsive, iterative, collaborative

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

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 !

Te c h n o l o g i s
t + E d u c a t o r I ’ M A … Karma Laboratory

C a s e s t u d y B
E TA .T E LU S .C O M Responsive. Iterative. Collaborative.

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

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 oﬃces in Toronto, Vancouver, Montreal, and more

T h e o l d T E LU S
B E TA .T E LU S .C O M

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 + +

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

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

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

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 .

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 diﬀerent 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/

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.

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 oﬄoad will save TELUS billions of dollars. • The less time a customer spends on the website, the more successful we can call it!

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 */  }

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%; }  }

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: <html>  <head>  <meta name="viewport"   content="initial-‐scale=1.0, width=device-‐width">  </head>  </html>

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

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

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

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

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

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

P h o t o s h o p g
r i d R E S P O N S I V E

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

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

Ho w t o d r aw a p o
r t r a i t I T E R AT I V E

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

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 ﬁxate on details too early  — they will slow you down. • Get the base structure right ﬁrst  — 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.

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.

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!

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

1 . L o - f i p ro t
o t y p e s I T E R AT I V E Lo-ﬁdelity HTML & CSS prototypes

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.

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.

2 . H i - f i p ro t
o t y p e s I T E R AT I V E Hi-ﬁdelity HTML & CSS prototypes

2 . H i - f i g o a
l s I T E R AT I V E • Iterate on the lo-ﬁ prototypes and add visual elements from the comps. • Re-structure CSS and HTML more eﬃciently  (but code optimization not the point of this round.) • Prepare for backend integration.

2 . H i - f i w hy '
s I T E R AT I V E • Better designer/developer workﬂow. • No need to wait until designs are "ﬁnal" to start building. • Identify systems that need to be created/optimized  e.g. component libraries and framework

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

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-ﬁ prototypes but diﬀerent under the hood!

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.

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!

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

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.

C u s t o m e r r e
s e a rc h I T E R AT I V E

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

Fu t u r e ? I T E R
AT I V E macaw.co

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

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

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

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

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

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

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.

T h e f i n a l w o
r d

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

beta.telus.com: Responsive, iterative, collaborative

beta.telus.com: Responsive, iterative, collaborative

More Decks by Pearl Chen

Other Decks in Business

Featured

Transcript