COLLABORATING EFFECTIVELY WITH DEVELOPERS

image: http://www.cre8ivecommando.com/web-designers-vs-web-developers-6831/

A BIT ABOUT ME• Web Designer

• Front-end Developer

• UX Designer @ Dominion Enterprises

• Work with a Remote Team

THEY ARE NOT THE ENEMY

WHAT’S THE PROBLEM?• Product that doesn’t

match up with our designs.

• Workflows are wrong.

• Added/deleted functionality.

• Lots of frustration.

BAGGAGE

BadDesigners

BadDevelopers

BAGGAGE

BadDesigners

BadDevelopers

GoodGood

BAGGAGE

BadDesigners

BadDevelopers

GoodGood

THINGS STILL GO SIDEWAYS

BAGGAGE

BadDesigners

BadDevelopers

GoodGood

LACK OF RESPECT

BAGGAGE

BadDesigners

BadDevelopers

GoodGood

LACK OF TRUST

BAGGAGE

BadDesigners

BadDevelopers

GoodGoodPOOR

COMMUNICATION

UNICORNS? PFFFTTT• Develop empathy for your

developers.

• Understand the basics of code (html/css).

• If you’re feeling gutsy even javascript - variables & functions.

PROCESS FOR COLLABORATION AND PARALLEL DEV/DESIGN

• Agile / SCRUM

• Epics

• Stories

• Tasks (design, dev, qa)

• Daily Stand Ups

MY FAVOURITE TOOLS• Google Docs

• Wireframes - Axure

• JIRA / TFS

• Video Chats

• Google Hangout

• Slack

• Screen Share

• Email? Meh

• Phone? Meh

GETTING BUY IN FOR NATIVE APPS (IOS, ANDROID, WINDOWS 8)

• Understand the UX Guidelines.

• Understand the available UI components.

• Research difficulty level of certain asks.

• Ask lots of questions.

• Iterate & compromise.

EXAMPLE: IOS• iOS Human Interface Guidelines

• Research solutions for dev problems.

• Example: iOS change navbar color

• Give examples of working apps that have the same functionality.

• Create Interactive Prototypes

INTERACTIVE PROTOTYPE TOOLS• Axure

• Flinto

• Invision

• Keynotopia

• Pop Prototype

• PaintCode

TESTING BUILDS• Test Flight

• XCode

EXAMPLE STYLE GUIDE PARTS

LADIES LEARNING TO CODE