THE CURIOUS INCIDENT                               OF THE DEVELOPER                               ON THE DESIGN TEAM      ...
DANIELLE LEONG                    DEVELOPER                    @tsunamino                    NINA MEHTA                   ...
TWILIO IS CHANGING COMMUNICATIONS BY                     EMPOWERING SOFTWARE PEOPLE TO BUILD                    VOICE AND ...
SHIPPINGDanielleAt Twilio we need to ship things quickly in order to get new material into the hands of salesand marketing...
A DEVELOPER ON DESIGN                                              @tsunamino @ninamehtaDanielleWhy put a developer on des...
PLAY ON THE SAME TEAM                                              @tsunamino @ninamehtaDanielleBut what if you can’t hire...
/* CAROUSEL CLASS DEFINITION                                           * ========================= */                     ...
CRITIQUE EARLY & OFTEN                                                @tsunamino @ninamehtaNinaWe make sure to have formal...
HIRE PEOPLE YOU WANT TO WORK WITHNinaSo find people you want to work with.Bring on someone who not only has the right techn...
OUR PROCESS
OUR POINT                                                               @tsunamino @ninamehtaBothOk, so what’s the point?T...
OH YEAH                       SHOULD DESIGNERS CODE?NinaShould designers code?This is debated in all kinds of Quora thread...
BUT                    DEVELOPERS SHOULD DESIGNDanielleBut! Developers should design.Whether or not you design for your jo...
QUESTIONS
THANKS!@tsunamino @ninamehta
Upcoming SlideShare
Loading in …5
×

Swanky talk

814 views

Published on

The Curious Incident of the Developer in the Design Team: Thinking in the Same Language
Are you spending more time arguing than implementing? Gain insight into the inner workings of Twilio’s unique cross-functional team of designers and developers who can talk the same language. Danielle and Nina will illustrate how they compliment each others’ skill sets and leverage their differences to benefit the user. This talk will showcase how they collaborate and build a great product from sketch to ship.

Danielle Leong - Twilio, Front End Web Developer
Nina Mehta - Twilio, Interaction Designer

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
814
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Swanky talk

  1. 1. THE CURIOUS INCIDENT OF THE DEVELOPER ON THE DESIGN TEAM THINKING IN THE SAME LANGUAGEWe are here today to talk about improving developer/designer relationships. This talk, TheCurious Incident of the Developer on the Design Team, is how we approached the issue ofbeing able to think in the same language.This talk was held on Tuesday, February 26, 2013 at Twilio HQ, 501 Folsom Street, San Francisco, CA at 6:30p.http://www.eventbrite.com/event/4537648228
  2. 2. DANIELLE LEONG DEVELOPER @tsunamino NINA MEHTA DESIGNER @ninamehtaDanielle Leong is a Front End Web Developer at Twilio. After graduating UC Irvine formarketing, she taught herself to code and joined the Twilio design team as the companys firstfemale engineer. She specializes in responsive site and email creation, company branding,and fights the good fight for better cross-browser compatibility. In her off time, she teacheslatin dance and bakes gourmet cupcakes. Follow her on Twitter at http://twitter.com/tsunaminoNina Mehta works and plays at Twilio as an interaction designer. Shes worked with startupsdisrupting translation, investing, travel bookings and even the modern web browser. With aformer career in journalism and a Masters in HCI, Nina has done design work and research inTokyo, London, Cape Town and around the Bay Area. She does live visuals at clubs to explorethe broader meaning of experience and physical space design. Follow her on Twitter at http://twitter.com/ninamehta
  3. 3. TWILIO IS CHANGING COMMUNICATIONS BY EMPOWERING SOFTWARE PEOPLE TO BUILD VOICE AND MESSAGING INTO ANY APPLICATION @tsunamino @ninamehtaDanielleTwilio is changing communications by empowering software people to build voice andmessaging into any application.Some examples of how people use Twilio:- Uber & Taskrabbit text notifications- Zendesk and Hulu’s help desk call centers- Airbnb & Match.com calls in the browser
  4. 4. SHIPPINGDanielleAt Twilio we need to ship things quickly in order to get new material into the hands of salesand marketing. The design team sits between Marketing (the owners of the message) andEngineering (the owners of the website). It’s our job to make sure quality things ship on time.This created a need to bring a developer on the design team to usher the message throughfrom start to finish.Photo: http://www.flickr.com/photos/automaton_be/4477406732/sizes/l/
  5. 5. A DEVELOPER ON DESIGN @tsunamino @ninamehtaDanielleWhy put a developer on design? Why not hire someone on engineering?We needed someone to care about the message and how it was implemented on ourwebsite. If you’re working with a developer from another team to implement designs, theirteam’s priorities will always be first.http://octodex.github.com/
  6. 6. PLAY ON THE SAME TEAM @tsunamino @ninamehtaDanielleBut what if you can’t hire a developer on your design team? What are some ways that you canimprove communication between your existing developers and designers? In order to workwell together, you need to learn your teammates’ working styles and motivators. We spenttime doing a few studies and reading about working styles of introverts and extroverts tofigure out how we all fit together as a team. Some people need certain things in order to work.As an introvert, I need some time to focus on a problem before I present it. As an extrovert,Nina sometimes needs to talk her ideas out loud to a person. Some common motivators wefound at work were deadlines, data, collaboration, and technical challenges.photo: http://www.flickr.com/photos/deanmccoyphotos/5795006771/sizes/l/
  7. 7. /* CAROUSEL CLASS DEFINITION * ========================= */ var Carousel = function (element, options) { this.$element = $(element) this.$indicators = this.$element.find(‘.carousel- indicators’) this.options = options this.options.pause == ‘hover’ && this.$element .on(‘mouseenter’, $.proxy(this.pause, this)) .on(‘mouseleave’, $.proxy(this.cycle, this)) } Carousel.prototype = { cycle: function (e) { if (!e) this.paused = false if (this.interval) clearInterval(this.interval); this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) return this } , getActiveIndex: function () { this.$active = this.$element.find(‘.item.active’) this.$items = this.$active.parent().children() return this.$items.index(this.$active) } , to: function (pos) { var activeIndex = this.getActiveIndex() , that = this REAL TALK if (pos > (this.$items.length - 1) || pos < 0) return if (this.sliding) { return this.$element.one(‘slid’, function () { that.to(pos)Danielle })For our design team to work well together we also really need to understand each others’ } toolsand technical skills. This helps us ask the right(activeIndex == pos) something doesn’t look or if questions when {work properly. Asking the right questions and return this.pause().cycle() understanding each others’ processes allow us }to understand better when something just isn’t right. Though I don’t design things at Twilio, Istill understand creative suite, typography, layout and a good ux.NinaThough I don’t get into the codebase at Twilio, I know HTML, CSS and Javascript. I can workthrough a complex flow with backend engineers and find out what’s possible to build andthrough all phases in a design cycle. Our creative director even codes in python on theweekends.Knowing each others’ skills gives us a shared language that gets us through stickyroadblocks and helps us empathize when something just isn’t working like it should.
  8. 8. CRITIQUE EARLY & OFTEN @tsunamino @ninamehtaNinaWe make sure to have formal and informal critiques every week. Because we understandeach others’ skills, it’s much easier to articulate ourselves and when looking over a project.This help iterate on designs much faster. When a design is in the process of being built, wecan look at it together and quickly tweak details to ship something we like.Danielle attends all design reviews so she knows how the project is supposed to look andwhat it’s supposed to do before she ever starts coding. But we all have lots of meetings, so itmight not makes sense to bring developers to your design reviews. See if they can pop inwhen going over one specific part of your project. Or do short but frequent recaps at designmilestones throughout the creative process.Doing this helps everyone tell the same story and see the message through from start tofinish.But this starts by hiring people who want to work like that.Photo: http://farm3.staticflickr.com/2494/3742918775_f3b2aee5be_z.jpg?zz=1
  9. 9. HIRE PEOPLE YOU WANT TO WORK WITHNinaSo find people you want to work with.Bring on someone who not only has the right technical skills but also someone you can see onyour team. This sounds obvious, but a collaborative team knows and wants to talk each other.This is important because you’ll need to trust they’ll do their job well but also will be willing towork together as a team instead of in a black box. There’s no room for unicorns, gurus orninjas.We found some people who applied for positions on the design team wanted to use it as astepping stone to other kids of work or weren’t very collaborative. We were patient and foundpeople with great talent that also cared about design and shared our values.You’ll likely spend more time with these people than with your partner or roommate. Be patientwith hiring, no matter how many things are on fire. Waiting to finding great talent who wantedto work with, was a big win for us.
  10. 10. OUR PROCESS
  11. 11. OUR POINT @tsunamino @ninamehtaBothOk, so what’s the point?The point is not to be able to do each others’ jobs.The point is to know enough about each others’ to ask the right questions. When everyonehas their own specialities but shared knowledge, it becomes easier to make thoughtfuldecisions faster.Some things you can do:• Start by communicating. Let people on your team know you want to understand theirprocess. Danielle helps me understand our codebase and frameworks, we share ourknowledge about the shipping process with marketing and our sales engineers let me sit oncalls (with permission) to learn about where our customers are getting stuck. And developerson our engineering team now know it’s ok to ask, “how can I make this less ugly?”• Designers, invite developers to your design reviews. The design process is often seen as ablack box. It seems like we somehow get an idea, draw a bunch of doodles, scratch our heada few times, click and drag a few thousand times and out the other end comes “the design”.Debunk the black box and show what’s happening in those doodles and clicks. It helpsdevelopers understand how the design got where it is and what elements are important forwhich reasons.• Developers, pull in designers while you’re building. It’s your job to keep the project on trackbut doing this can save lots of ‘design bug’ fixing at the end. It will help designers on theteam understand why and how their work gets implemented. While it sounds like it costs more
  12. 12. OH YEAH SHOULD DESIGNERS CODE?NinaShould designers code?This is debated in all kinds of Quora threads and all kinds of blogs and talks.But we say yes. Whether or not you code for your job, you should code. Some even say,unless you work at a very small startup, it doesn’t even make sense for designers to shipcode. But knowing how to do it can help you make prototypes to communicate your ideasand above all ask your developer smart questions.
  13. 13. BUT DEVELOPERS SHOULD DESIGNDanielleBut! Developers should design.Whether or not you design for your job, you should be able to understand the creativeprocess.
  14. 14. QUESTIONS
  15. 15. THANKS!@tsunamino @ninamehta

×