DESIGN + DEVELOPMENT r #RELATIONSHIPGOALS Speakers: Stephanie Sell & Ben Hong ConnectTech 2019
A presentation at Connect.Tech in October 2019 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
