A interação entre designers e desenvolvedores é essencial na hora de construir um bom produto. Nessa talk falamos um pouco dos dois pontos fundamentais que facilitam a colaboração e possibilitam o compartilhamento de mindset entre designers e desenvolvedores. ____ The interaction between designers and developers is essential to build a good product. We talk about some of the two fundamental points that facilitate collaboration and enable the sharing of mindsets between designers and developers.

1. Designing for developers,
developing for designers.
Natália Medina & Guilherme Rodrigues
Brazil JS 2018
The
True Cloud
Commerce™
Platform

2. @GUIDIAZR
Guilherme Rodrigues
DEVELOPER
Natália Medina
@NT_MEDINA
DESIGNER

3. Brazilian company
eCommerce platform
2000+ brands
320+ people

5. Why arewehere?
The
True Cloud
Commerce™
Platform

6. The
True Cloud
Commerce™
Platform
The
True Cloud
Commerce™
Platform
The
True Cloud
Commerce™
Platform
WEB APIs
CLOUD
V8
AMP
AR
BLOCKCHAIN
REACT

7. Build great products
that cause large impact

8. What's a
great product?
Solves a hard problem
Delivering high quality

10. High performance
Portability
Display
Usability
Engineering
Design

11. JONY IVE | APPLE CHIEF DESIGNER OFFICER
”It couldn’t exist without
invention across many
disciplines”

12. Great products
combine great design
and great engineering
to solve hard problems

13. CMS
Allows non-technical users
to customize a website
and add content to it
Content Management System
Allows technical users to
extend it with new
functionalities
"Friends don’t
let friends
build CMS's"

14. Storefront
Allow store owners to customize
their stores using components
created by partner developers
Content Management System

15. The journey to
build the product
Lots of fails,
Some wins

16. Conditional
Content
Add content for
specific campaigns
(Valentines’ Day) or
specific audiences
(Buscapé)

17. The data structures we
created to persist conditional
configurations didn't foresee a
blatantly obvious use case:
letting the users see all
configurations for a
given component!
ENGINEERS DIDN'T INTERACT
ONE WEEK LOST 😧

18. Custom React
Components

19. Configurable React
Components

20. The designers asked for a
floating button over each
section to add adjacent
components. However, we
had a hard constraint of not
adding "relative" divs around
user's components as to not
break their styles.
DESIGNERS DIDN'T INTERACT
ONE WEEK LOST 😵

21. What you
see is what
you get

23. The same constraint of not adding relative
divs forced us to re-implement the
component selection overlay as a single div
that was absolutely positioned. This turned
out to enable a better usability by allowing
the overlay to animate between hovers!
ENGINEERS & DESIGNERS
SOLVED IN ONE DAY 😋

24. Great products are built when
designers and developers
interact

25. Mindset
Effectively employ
different strengths

26. SystemUsers
Designers
Interface
How will the user
behave?
What are the
possibilities?
What's the actual
problem?
How will the system
behave?
What are the
limitations?
How do I implement
the solution?
Developers

27. How will the user
behave?
What are the
possibilities?
What's the actual
problem?
How will the system
behave?
What are the
limitations?
How do I implement
the solution?
Designers Developers&
SystemUsers Interface

28. How will the user
behave?
What are the
possibilities?
What's the actual
problem?
How will the system
behave?
What are the
limitations?
How do I implement
the solution?
Designers Developers&
Research
& Ideation
Build
Launch
Learn

29. Culture
An environment of trust
that allows for exchange
Toolset
Make collaborating
the easy choice

31. Culture
Trust
they feel comfortable
to challenge their peers
Purpose
they care deeply
about the problem
Courage
they thrive outside
their comfort zone

32. BRIAN CHESKY | AIRBNB FOUNDER
”Having a clear mission and making
sure that it comes through to the
company is probably the most
important thing you can do for
both culture and values”

34. Culture
Trust
they feel comfortable
to challenge their peers
Purpose
they care deeply
about the problem
Courage
they thrive outside
their comfort zone

35. Make hard decisions
Original ContentVideos by mail Streaming
20131998 2007

36. Celebrate failure

37. Celebrate failure

38. Think big

39. Culture
Trust
they feel comfortable
to challenge their peers
Purpose
they care deeply
about the problem
Courage
they thrive outside
their comfort zone

40. Feedback early and often
https://www.inc.com/sam-hodges/3-ways-to-build-a-feedback-friendly-culture-at-your-company.html
1. Leaders set the tone
2. Feedback should be a part of daily life
3. It's a skill, not a talent

41. When giving feedback...
1. Be prepared, give concrete examples
2. Be descriptive, not judgemental
3. Be constructive, offer an alternative

42. When receiving feedback...
1. Be thankful! It's a gift
2. Be attentive, take notes and listen
3. Don't be defensive, don't justify yourself

43. Collaboration rituals
Promote admiration
and empathy with

44. Go out and have fun together

45. Culture
Trust
they feel comfortable
to challenge their peers
Purpose
they care deeply
about the problem
Courage
they thrive outside
their comfort zone

46. Culture
An environment of trust
that allows for exchange
Toolset
Make collaborating
the easy choice

47. Is collaboration facilitated
by your physical workplace?

48. Lots of white boards,
meeting rooms and spaces
Meeting spaces

49. Open spaces

50. Whiteboards

51. Can you easily
communicate with
your peers?

52. Chat tool
Everyone in
the company
within reach

53. Can your developers
easily interact with
the design tools?

54. Designers can share
their projects with
developers by simply
sending a link
Figma

55. Collaboration is
incentivized across
multiple channels
Figma

56. Are the design patterns
easy to reuse and evolve?

57. Styleguide
A set of reusable
components that
help deliver consistent
interfaces, faster

58. Can designers easily
interact with the code?

59. That feeling when you have
to set up a new environment JEST
NODE
ESLINT
WEBPACK
SASS
TSLINT
LESS
YARN

60. Automate and
document your
setup to help
newcomers
Organize your npm
scripts and keep your
README up-to-date
to enable autonomy

61. VTEX IO
With VTEX IO, users
can create workspaces to
interact with code in an
isolated development
environment and send a
simple URL to their peers

62. Culture
An environment of trust
that allows for exchange
Mindset
Effectively employ
different strengths
Toolset
Make collaborating
the easy choice
+ =

63. The
True Cloud
Commerce™
Platform
careers.vtex.com