6/3/2016

Collaboration and interdisciplinarity on product development

with

Design

Posted

Opinion

Technical

Collaboration and interdisciplinarity on product

development
Thiago Victorino

June 1, 2016 (Updated on June 1, 2016)

A common way to describe a product development process is with the Design Front-end
Back-end stack. This approach takes into account the disciplines involved on the
process, and though it helps making things understandable, the distinction enforces the
idea that the process is linear and phase-dependent.
This linear ow can also be dened as the waterfall model, and its rather common in the
web industry. All pages are designed upfront, then a set of mockups are handed o to be
translated into front-end code, and then, after all of that, the back-end logic is created. This
causes an isolation of professionals on each phase, which leads to a series of
implementation issues, mostly due to the diculty of foreseeing all details and use cases
on the early stages.
It also leads to the notion that theres my work and your work. Its not rare to hear
developers saying: Designers cant touch my code! or designers complaining that The frontend developer messed up my layout!. This creates barriers to the process. As obvious as it
might sound, everyone is working towards the same goal: building outstanding products.
And a more collaborative process is the way to achieve that.
A collaborative process is based on two main factors: interdisciplinarity and iteration.
https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

1/10

6/3/2016

Collaboration and interdisciplinarity on product development

Interdisciplinarity is the combination of two or more disciplines to create something new

or promote an exchange of knowledge. Iteration is the technique of building and
delivering incremental parts of functionality repeatedly. So, the basic idea is to work
closely and build the product in short cycles.

User Interface and Application layers

When we shift the scope from the disciplines themselves to the outputs of the process a
User Interface and an Application interdisciplinarity becomes clearer.

User Interface and Application layers with their related disciplines.

These layers can be considered the core parts of a digital product. The User Interface is
the visual part, where users interact with the product to perform actions, input data,
control elements, access information etc. The Application runs in the background, and is
responsible for bringing functionality to the product. Contains the business logic and rules
that make everything work. It bridges the communication between user input and data
storage.
Looking at the diagram, its possible to see how disciplines overlap and how responsibilities
are shared across the layers. For instance, we can see that the User Interface is a
combination of both designers and developers work. It might start as a prototype on a
graphic design software, but its important to notice that its nal form will be Front-end
code running in the browser.
It also helps us see that Front-end development can have two dierent mindsets: one that
works closely with the Back-end discipline on the Application layer, writing JavaScript logic
and integrating client-side with server-side code using a framework such as AngularJS or
https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

2/10

6/3/2016

Collaboration and interdisciplinarity on product development

ReactJS; and another that works building the User Interface, in collaboration with the
Design discipline. This mindsets led to the creation of new roles in some teams: the
Application Developer and the UI Developer.
Of course, there are developers that work seamlessly across both layers. But its important
to notice that the front-end discipline is getting more specialized year after year. In the very
beginning, HTML, CSS and JavaScript were used to build a website interface and its
interactions. And that was it. Nowadays, front-end technology can be used to build entire
applications, from the client-side logic to back-end logic. UI code is getting complex as well.
Methodologies for architecting CSS thats reusable, scalable and maintainable are here to
prove it.
Should designers learn to code? Should front-end developers learn back-end programming
languages? A way to answer that is by analyzing on which layer youre working on. If youre
a designer, youll probably be working within the UI layer, so its important to know basic
HTML/CSS and its constraints, or how responsive design works on the browser, for
example. If youre an UI Developer, its good to understand design principles and
techniques, such as information architecture, and whats its purpose on the project. The
same for interaction and visual design. If youre an Application Developer, then knowing
how Back-end code is structured and basic software development principles will make you
a better professional. And for everyone involved on the process, knowing how the User
Interface and the Application relate to each other is also essential.

Collaboration in practice
Weve seen the importance of interdisciplinarity and how present it is on a product
development process. Now lets see how to approximate the disciplines in practice, within
two contexts: on a UI level between Designers and UI Developers and on a product
level bridging the gaps between the User Interface and the Application.

Collaboration on a UI level

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

3/10

6/3/2016

Collaboration and interdisciplinarity on product development

Collaboration within the User Interface layer.

Early validation of design concepts

Design concepts should be validated as soon as possible to address feasibility. Feedback is
important, and can save a lot of the teams time. This also keeps everyone on the same
page from the beginning.

Constant deliveries and participation

Even in a lean workow, you cant escape having design ideas prototyped before front-end
implementation. But it can be done on small and iterative cycles. Build the product
gradually, starting from content, to structure, to look and feel, and so on. That way,
development will start sooner and the design can be tested on its real environment (the
browser) early on. Improvements and adjustments can be done over time, with
participation from both designers and developers.

Flexibility and autonomy

Deliverables are just communication tools. A set of static mockups will hardly have all the
answers for building a complex UI, because theres a lot of factors to consider:
responsiveness, modularity, component states, behavior, implementation constraints, etc.
Designers and developers should work together to address all scenarios and edge cases
https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

4/10

6/3/2016

Collaboration and interdisciplinarity on product development

together, sharing responsibilities. If theres a better approach to a problem on an

implementation point-of-view, developers should have autonomy to propose solutions
along with designers.

Collaboration on a product level

Collaboration across the entire product.

Map out the objects together

A digital product is a system of entities that usually relate to real life objects. In an ecommerce, for instance, we have products, users, a shopping cart. Those entities have
attributes and relationships between each other: users can save products on a wish list,
products can be added on the shopping cart, and so on. This paradigm object-oriented
programming has been applied on software development for years during architecture
and database modelling phases.
Although it is a paradigm from the Application layer, it can also benet the User Interface.
As Sophia Voychehovski states on her excellent article Object-oriented UX: Dening objects
that mimic the mental model of your users provides a scaolding for team communication. It
gives you a shared language.. So, in addition to enforcing a shared language between the
team, it also improves user comprehension over the product functionality.
Designers and developers should work together to map out the objects beforehand to
guarantee cohesion on the entire product experience and avoid having dierent names for
the same object, for instance: using the word users on the UI and members on the
https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

5/10

Collaboration
interdisciplinarity
on product
development
the same object, for instance: using
the and
word
users on
the UI
and members on the
Application. This might seem like a minor detail, but can save some overhead.

6/3/2016

Discuss product denitions together

A product with well-dened concepts will guarantee a cohesive experience from the UI to
the Application. First, its necessary to understand and dene problems together, with
complementary point-of-views. That way, its more likely that the team will come up with
solutions that cover most scenarios and use cases. This has a big impact on the way a
product is built. A bad scoped solution can lead to a bad software architecture which can
cause headaches in the future.
Understanding how things work on all layers is also essential. For instance, knowing how a
process takes place on the Application can help designing a more robust experience on
the UI. The inverse also applies: familiarizing with design principles and objectives can give
dierent perspectives to how developer solve a problem on code.

Share this
Compartilhar

Tweet

Share

55

Need a team for your projects?

We'd love to hear your ideas!

Connect with us!

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

6/10

6/3/2016

Collaboration and interdisciplinarity on product development

Related Posts

Working with a virtual team: 7 best practices

Trendiest 2015 Mobile Looks and Feels

Cakers Review: Development Challenges and

Expectations for Android M

CSS Architecture: First steps

About the author

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

7/10

6/3/2016

Collaboration and interdisciplinarity on product development

A digital product designer that enjoys writing awesome UI code and works to
shorten the gaps between design and engineering on product development. View
all posts by Thiago Victorino

0 Comments

Cheesecake Labs

Recommend 2

Share

Login

Sort by Best

Start the discussion

Be the rst to comment.

ALSO ON CHEESECAKE LABS

Top 12 Mobile App Marketing Agencies

in the US

7 Apps for the Perfect Prank on

Halloween

3 comments 6 months ago

1 comment 7 months ago

Johnas_Cohen Guys.. you forgot some

Leonardo Farage Lol for the "Dude, your

industry leaders such as IronSource,

Persona.ly and Adaction while listed one
men show companies..

car!".. awesome!

CSS Architecture: First steps

2 comments 2 months ago

Kevin R Great write up! I've been stuck in

Dont blame the framework: my

experience with AngularJS and ReactJS
9 comments 20 days ago

the old-school way of doing things and

really need to learn and embrace this way
of thinking. Will denitely use this

Subscribe

Add Disqus to your site Add Disqus Add

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

DonAbrams I actually found React

equally good for teams that have a

HTML/CSS split. The overhead of learning
JSX is similar to them learning all the ng-*
Privacy

8/10

6/3/2016

Collaboration and interdisciplinarity on product development

Services

Company

Full-stack Engineering

Portfolio

UI/UX Design

Projects & Partners

Decision Support

Tools

Press

Noticrash

Press Kit

Cheesecake Labs is a full-stack web and mobile app development company that is reiventing the
meaning of collaborative development with remote teams. Working with passion and clarity, we partner
with disruptive companies, providing support for decision making and developing systems that are true
to the core ideas.

Lets work together!

Get an estimate

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

9/10

6/3/2016

Collaboration and interdisciplinarity on product development

We're hiring
Join the team that is reinventing how software is developed. Check out our open positions!

Open Positions

Cheesecake Labs
260 Desembargador Vitor Lima Ave, 10th oor
Florianpolis - Brazil
+55 48 3206-5246

Copyright 2016 Cheesecake Labs LTDA. Top mobile app development company - Android, iPhone, mobile web & more.

https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/

10/10