Designers & Developers: #RelationshipGoals

DESIGN + DEVELOPMENT r #RELATIONSHIPGOALS Speakers: Stephanie Sell & Ben Hong ConnectTech 2019

STEPHANIE SELL Principal UX Designer at CapitalOne @stellcreates

BEN HONG Senior Frontend Engineer at GitLab @bencodezen

SLIDES WILL BE AVAILABLE ONLINE So no need to rush to copy down things https://www.twitter.com/stellcreates

DESIGNERS & DEVELOPERS

DESIGNERS DEVELOPERS

WE SHOULD BE ON THE SAME TEAM.

WHAT ARE SOME COMPLAINTS YOU’VE HEARD OR ENCOUNTERED?

COMMON THEMES

1 HANDOFF

“ Developers didn’t build the design correctly.

“ Developers didn’t build the design correctly. Designers forget things & leave us to fill the gaps.

2 BLAME GAME

“ Developers are the gatekeepers.

“ Developers are the gatekeepers. Designers have no regard for how hard something is to build.

3 VALUE

“ Developers are seen as “more valuable” than design.

“ Developers are seen as “more valuable” than design. Designers get all of the glory & we are often forgotten.

THE SOLUTION IS SIMPLE RIGHT?

DESIGNERS SHOULD LEARN TO CODE DEVELOPERS SHOULD LEARN TO DESIGN

UNDERSTANDING THE OTHER SIDE

DESIGNERS Goals ➤ Create beautiful designs ➤ Create the optimal experience for users

DESIGNERS Obstacles ➤ Multiple stakeholders to make happy ➤ No guarantee of project viability / investment ➤ Everyone thinks that they can do your job ➤ Creative process is not linear

DEVELOPERS Goals: ➤ Build cool stuff ➤ Write bug-free features ➤ Build accessible experiences

DEVELOPERS Obstacles: ➤ Specifications are inadequate ➤ Often unreasonable deadlines ➤ Browser compatibility ➤ Third-party contractors

😐

DEVELOPERS Obstacles: ➤ Specifications are inadequate ➤ Tight deadlines ➤ Contractors ➤ Browser compatibility

WHAT CAN YOU DO?

SOLUTION: COUPLES THERAPY

SOLUTION: COUPLES THERAPY

SOLUTION: MORE TOOLS

Image from: https://blog.zeplin.io/introducing-zeplin-2-0-components-and-a-ton-moregoodies-7c09dacc1f48

SOLUTION: MORE TOOLS (Even though tools are great!)

WHAT CAN YOU REALLY DO?

1 OPEN THE LINE OF COMMUNICATION

MEET & GREETS Purpose ➤ Get to know who you’re working with

MEET & GREETS Meeting Framework ➤ 1 on 1 ➤ Keep it casual ➤ ➤ Tip: Your work’s dining area typically works well if you aren’t sure where to go Length: 15 - 20 minutes

MEET & GREETS Meeting Framework ➤ Set expectations in a calendar invitation ➤ And, again at the beginning of the meet & greet ➤ Why: Developers thought that I was interviewing them ➤ You’re here to make their life easier, not harder ➤ Makes it easier for them to reach out

MEET & GREETS Calendar invitation Here’s an example of a message: • Hey ____! Since I just joined, it’d be great for us to meet, so I can more about your work and the team.

MEET & GREETS Conversation starters ➤ How long have you worked at [company name] and with [project name]? ➤ What has your experience been so far with the [project name]? ➤ What’s been your experience working with design thus far? ➤ Is there anything that could be improved?

MEET & GREETS It will take some effort Even though it requires a bit more effort with developers, the pay off makes it worth it in the long run.

MEET & GREETS This is worth prioritizing No matter how tickets you close, there will always be some new feature or bug to squash. Don’t flake on your designers.

COMMUNICATION 2 THROUGH DOCUMENTATION

DESIGN FILES Basic Checklist ➤ User flow is the clear ➤ Logic is included and decision points are properly noted ➤ Functionality and brief notes are included ➤ If something is missing, ask questions early

FEATURE NAME DATE Success Brief description of action (i.e., taps continue) Error

DESIGN FILES Basic Checklist ➤ All nine states of UX are included ➤ Nothing ➤ None ➤ One ➤ Some ➤ Loading ➤ Too many ➤ Incorrect ➤ Completed ➤ Done https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85

UI KIT Document including the following: ➤ Color ➤ Type ➤ Spacing ➤ Patterns ➤

UI KIT Design tools help you do this automatically.

CLEAN UP FILES Checklist ➤ Remove random elements in your design that aren’t supposed to be there ➤ ➤ Tip: Command + A to see extraneous stuff Quickly read through all of your content (including your headers!)

CLEAN UP FILES Checklist ➤ Get your illustrations/icons ready for export ➤ Remove extra spaces

KEEP TRACK 3 OF WHAT’S HAPPENING

KEEP TRACK Next Steps ➤ Follow tickets with your designs attached ➤ Find out timeline for when these designs will be built ➤ Find out who is building your tickets ➤ Get designs access to staging ASAP

KEEP TRACK Make it easy for developers to reach out. ➤ Once you’ve delivered a file send a message, like the following to your developer: ➤ ➤ “Hi ____! I saw you’re going to be working on the [feature]. If you have any questions, please let me know!” Check in later on if you haven’t heard from them.

KEEP TRACK Feeling stuck? ➤ If the designs are still not coming out the way you want, don’t despair! Sometimes this happens. In fact, it’s inevitable. ➤ Take a deep breath. ➤ Create a deck of the current state of the designs and the desired state, noting the differences.

4 BE COMPASSIONATE

BE COMPASSIONATE How to achieve this ➤ Leave your ego at the door ➤ Respect the expertise that each person brings to the table ➤ Always remember that we are making the best with what we have ➤ If the product succeeds, everyone wins

IN SUMMARY

SUMMARY ➤ Open the line of communication - early! ➤ Don’t forget to to communicate through your documentation ➤ Keep track of what’s happening after delivery ➤ Be compassionate

Q&A

@stellcreates THANKS! @bencodezen

DESIGN + DEVELOPMENT r #RELATIONSHIPGOALS Speakers: Stephanie Sell & Ben Hong ConnectTech 2019