beta.telus.com: Responsive, iterative, collaborative

F6c4a7544807fe0b8a874e83eb84b481?s=47 Pearl Chen
April 02, 2014

beta.telus.com: Responsive, iterative, collaborative

In early 2013, a skunkworks team of designers, developers and strategists came together to rethink the website of one of Canada's largest telcos. Beta.telus.com was the first project to come out of the TELUS Digital Labs, and there were many lessons learned along the way, such as how to implement Lean methodology in an Enterprise-loving company, how to get designers and developers rapid prototyping together, and more. What worked and what needed re-work in this large mobile-first, responsive redesign? Get a behind the scenes look into some of the processes, tools and technologies used to get beta.telus.com off the ground in only four months, with updates almost every week.

Presented at DevWeek 2014: http://devweek.com/talks/52?type=Talk

F6c4a7544807fe0b8a874e83eb84b481?s=128

Pearl Chen

April 02, 2014
Tweet

Transcript

  1. 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
  2. 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 !
  3. Te c h n o l o g i s

    t + E d u c a t o r I ’ M A … Karma Laboratory
  4. C a s e s t u d y B

    E TA .T E LU S .C O M Responsive. Iterative. Collaborative.
  5. 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
  6. 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
  7. T h e o l d T E LU S

    B E TA .T E LU S .C O M
  8. 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 + +
  9. 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
  10. 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
  11. 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
  12. 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 .
  13. 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/
  14. 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.
  15. 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!
  16. 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  */
 }
  17. 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%;  }
 }
  18. 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>
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. P h o t o s h o p g

    r i d R E S P O N S I V E
  26. 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
  27. 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 .
  28. 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
  29. Ho w t o d r aw a p o

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

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

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

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

    r t r a i t I T E R AT I V E
  34. 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
  35. 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.
  36. 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.
  37. 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!
  38. 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
  39. 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
  40. 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.
  41. 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.
  42. 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
  43. 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.
  44. 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
  45. 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
  46. 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!
  47. 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.
  48. 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!
  49. 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
  50. 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.
  51. C u s t o m e r r e

    s e a rc h I T E R AT I V E
  52. 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
  53. Fu t u r e ? I T E R

    AT I V E macaw.co
  54. 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 .
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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.
  62. T h e f i n a l w o

    r d
  63. 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