A presentation at Connect.Tech in in Atlanta, GA, USA by Ben Hong
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
When it comes to working on any product, the interactions between designers and developers can be a contentious one. Yet at the end of the day, we all know that the best products are built when the two teams work in harmonious. In this talk, you’ll get to hear from a designer and developer duo on their experience and their ideas on how you can create a positive working relationship.
for free. You
can too.