Should designers code?

81
Tami Evnin Product Designer, NASDAQ OMX tamiiiiiiiiiiii Should designers code?

description

More and more designers are becoming empowered to build interactions through code. Rather than delivering wireframes that only describe proposed interactions, designers can deliver artifacts that developers can actually use in the product being created. Sounds great, but how does this process fit into traditional product development? Does it slow development down if designers are concerned with writing clean, production-ready code? Does it distract design from focussing on user goals and vetting solutions? Are designers getting in their own way? Presented at WebVisions NYC 2014.

Transcript of Should designers code?

Page 1: Should designers code?

👤 Tami Evnin🏢 Product Designer, NASDAQ OMX tamiiiiiiiiiiii

Should designers code?

Page 2: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Should designers code?

Page 3: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 4: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

http://www.waynegreenwood.com/unicorn-shmunicorn-be-a-pegasus/

Page 5: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://medium.com/p/8821e7ac6207

Page 6: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://generalassemb.ly/

Page 7: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

http://unicorninstitute.com/

Page 8: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Daqground

Page 9: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 10: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 11: Should designers code?

💬 📢 💰

Page 12: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Prodaqground

Page 13: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 14: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 15: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 16: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 17: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 18: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 19: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 20: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Should designers code?

Page 21: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

What happens when designers code?

Page 22: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Designer to designer

Page 23: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Tools

Page 24: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 25: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 26: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Compare email queue to JMS

queue

Monitor job queue

Add indirect jobs to queue

Assign release job to editor

Notify team of self-claim

system at 6pm PST

Claim release job

Immediately alert team of

mistakes

Monitor job status

Ensure all jobs are processed

Update job status

Manage Job Queue

Claim Jobs

Manage Job Completion

Set distribution options

Add job to distribution

queue

Distribute Release

Confirm release distribution with client

Confirm Job

Provide client support

Transfer tasks to correct team

Answer client calls

Forward support

messages to CAMs

Support Client

Sta! editorial desk

Generate job report

Allocate sta"ng resources

Manage Editorial Team

MANAGEJOBS

PROCESSJOB

INTERACTWITH CLIENTS

MANAGE EDITORIAL TEAM

Process job in a timely manner

Coordinate Tasks

Coordinate Tasks

Proofread release content

Edit release content

Process release in a timely

manner

Format release content

Process Job

Coordinate Tasks

NASDAQ OMX / GLOBENEWSWIRE EDITORIAL WORKFLOW MENTAL MODEL

Service TypeJob Entry Tracking Queue

Job Information

Job Scheduler

Job Utilities

Metadata

Wire release workflow

Job Editor

Job Inspector

Workflow

Translation Services

Yahoo EPR

News Archive

Search Messaging

Customer Notes

Control Panel

Homepages

Logins

System Configuration

Changes

Editorial Tracking

Earnings Calendar

Content Views

Content Creation

API Transactions

Report Processing

System Usage and Activity

Editorial or Management

Task

Other Task

Editor Task

Conceptual Group

LEGEND

MENTAL SPACE

Job

Portal

Tools

Auditing/Logging

Page 27: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

”The VIsITorThe eDITorIt’s my responsibility to ensure that a press

release best represents the intentions of

our client.

Justine begins her day at 7:00 AM, typically a busy time of day because press release requests await distribution before the morning bell. She logs into GlobeNewswire and reviews the job queue. Before she begins work on a new release, Justine must meet with her colleagues in a web chat room where, throughout the day, all editors claim jobs as they come in. Claiming a job requires several disjointed steps. Justine claims a job in the employee chat room, then changes its status in a separate online queue. She calls the client to FRQ¿UP�WKDW�WKH�UHOHDVH�LV�UHDG\�IRU�GLVWULEXWLRQ�DW�DQ�DJUHHG�XSRQ�WLPH�

Before editing a release, Justine prints a physical copy of it and reviews a best practice checklist that is taped next to her monitor. She knows the list by heart, but she must be sure that every release has no errors. She edits the printed content line-by-line before copying/pasting and formatting the text into a web based text editor. Justine is often frustrated because so few clients follow the suggested best practices, but a printed copy makes it easier to catch common errors.

This press release includes several earnings tables. Each table requires thorough work on Justine’s part to ensure that the tables are correctly formatted for the newswire.

JUsTINe EDITOR, GLOBENEWSWIRE

Goals: Submit error free news releases; follow best formatting practices; stay on top of the job request queue and process any recent requests.

Pain Points: Each press release requires redundant formatting; many requests do not follow best practices; earnings tables require

Page 28: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 29: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 30: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 31: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 32: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 33: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 34: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Process

Page 35: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 36: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 37: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 38: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 39: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 40: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 41: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 42: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 43: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 44: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 45: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 46: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 47: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 48: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Challenges

• Varying experience levels

• Distributed teams

• Complex projects

Page 49: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Designer to developer

Page 50: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 51: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 52: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

sidebar(collapsable)

main content

details preview(collapsable)

section header

Template (primary page elements)

sidebar

Utility Bar

company logo, name, ticker symbol, current

stock price, next report date, multi-listed link

Recommendation(static chart)

Price Target(static chart)

Scrolling

Estimates Nav (see Filters page)

Estimates Nav

A $798,000.99

E $698,000.99

Estimates Consensus

Indicates recently changed (up / down)

R $798,000.99

E $698,000.99

indicates Restated Actual

A $798,000.99

E -100,000.00

R $798,000.99

E $698,000.99

normal hover

% difference between Estimate & Actual

Slides up from utility bar

High 45

Low 35# Analysts 20

We are free to explore better

options :)

Not % - that's Surprise

sidebar company logo, name, ticker

symbol, current stock price, next

report date, multi-listed link

ChartRecommendation (static chart)

Price Target(static chart)

Estimates Nav (see Filters page)

12 Month Change (chart)

12 11 10 9 8 7 6 5 4 3 2 1 0Time

Chart shows measure value over previous 12 months (from date selected)

measure by broker

Clickable(reveals breakdown

by Analyst in sidebar)

Scrolling

Scrolling

Sidebar

Estimates Consensus11:15AM, 1 April 2014

Clickable(reveals

breakdown by Analyst in sidebar)

add Up and Down arrows by Estimate

thead

data table

currency & view controls

data table

currency & view controls

USD

L2R: Currency, Recently Changed,

Supplimentary Data, Historical Data

Notesand Accounting Practices

Estimates Consensus with Preview panel (right) expanded

Table header fixed (not to scroll out of

view)

6 March, 2014Previous Actual

has been ditched

sidebar(collapsable)

main content

section header

Utility Bar

--

Estimates / Summary

-- --

sidebar(collapsable)

main content

section header

Utility Bar

--

Estimates / Broker

-- --sidebar(collapsable)

main content

section header

Utility Bar

--

Estimates / Detailed

-- --

Shorter header

linking to Estimate Details

Contact Vendor - follow guidance from

Profiles

25 March, 2014

Recently changed (highlighting)

has been ditched

See Filters / Sidebar page

for details

-- --

-- -- -- --

Page 53: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Page 54: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 55: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 56: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Guidelines

• File structure & sharing

• Naming conventions

• Timelines and deadline

• Prototype vs. Production

• QA

• Access & understanding

Page 57: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

What else happens when designers code?

Page 58: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Working with product mgmt

Page 59: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 60: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 61: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 62: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 63: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 64: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 65: Should designers code?

Product Owner

We will want to get designs in from of clients as soon as feasible... This is one where I think users really will need to click around and try to use the tool rather than view a sketch. [This] is one of the top testing priorities, so I would want to test that broadly.

Page 66: Should designers code?

Product Owner

We will want to get designs in from of clients as soon as feasible... This is one where I think users really will need to click around and try to use the tool rather than view a sketch. [This] is one of the top testing priorities, so I would want to test that broadly.

Page 67: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

What is the value of designers who code?

Page 68: Should designers code?

A Vice President

Does have a product design team code these prototypes help us ship faster?

Page 69: Should designers code?

Another Vice President

It provides better direction. More clarity. And much cleaner code. But the speed isn’t really the big advantage.

Page 70: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Clarity

Page 71: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

https://www.thinkgeek.com/product/e5a7/?srp=1

Sustainability

Page 72: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

What happens when designers code?

Page 73: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

How can organizations support designers who code?

Page 74: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Trust.

Page 75: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Page 76: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

Should designers code?

Page 77: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

What have you seen happen when designers code?

Page 78: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

How can your organization support designers who code?

Page 79: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

How can designers help organizations support designers?

Page 80: Should designers code?

👤 Tami Evnin tamiiiiiiiiiiii

How can designers help organizations support designers who code?

Page 81: Should designers code?

👤 Tami Evnin🏢 Product Designer, NASDAQ OMX tamiiiiiiiiiiii

Thanks!