We are France Wang and Yu Ling Cheng, a duo of a lead designer and a lead developer who have been working separately and together on many projects. We believe that by understanding each other's motivations and problems, designers and developers can work more happily and build better products.
This manifest explains what the DevUx Culture is as we envision it. The purpose is to setup collaboration fundamentals between the product, the design and the development teams:
Anyone can spark the DevUx culture in their team and grow it.
To begin, you must have the right mindset to create team spirit. When is the last time you had lunch with the whole team, or that you had a beer?
Team building and retrospectives are precious moments where you can build empathy and understand each others motivations and problems.
Each role has a part to play. We'll explain what each should keep in mind when trying to reach greater levels of DevUx collaboration.
From our compiled experience on projects (around twenty), we've mapped out 4 levels of DexUx collaboration:
We'll describe here for each the common problems and solutions to reach the next level.
Problems and solutions are categorised under the three moments of a product iteration:
At this point there is no common language between the product, designers and developers. The team is regularly blocked and cannot deliver the product.
Very often the design team and development team work separately in a linear flow: designers make the mockup, then developers integrate them.
⏳ Mockups are not approved in time
🚫 Mockups are not shared / impractical for development
🔍 Assets are missing
🤔 Developers are on their own to find functional solutions / interpret mockups
To get the basics and reach Level 1, you must overcome Level 0's common issues. Here are the guidelines you need to follow in order to achieve it.
⏩ Define a process that involves the right people at the right moment
📋 Define what needs to be delivered alongside mock-ups
📬 Centralize mockups and assets with a design handoff tool
👭 Designers and developers work close to each other and their roadmaps are synced
Don't forget involving stakeholders during validation steps if you need approval. Invite the designer during planning so they know what mockup needs to be ready, warn if they are not so you can adapt, and answer questions on upcoming tasks.
When you reach level 2, the common friction points in the delivery process are addressed. Congratulations! It's already quite an achievement 🥳Do not forget to celebrate with your team 🍹
📊 Provide real data for basis of design
👩💻 Involve developers in features definition to challenge feasibility
🧩 Provide a styleguide for behaviour and states of common components
📬 Define break points and provide screen layouts for each, use a userflow to explain the navigation
🧩 Learn to use the tools provided by the designer (styleguide, layout, userflow, handoff tools)
Involve developers during the features definition so they can give technical insights and help provide real sets of data before mockup creations.
At level 3, the team designs and develops hand in hand to iterate very fast. The product is also more polished and more consistent.
If you get there, YOU ARE AWESOME.
🧪 Involve developers before feature definition (user interviews, usability testing…)
🔬Team spend as much time as possible on the product to suggest improvement
🍻 Involve developers during mock-up design and find solutions together
📚 Designers and developers share common design patterns (designers know basic code pattern when making mockups)
💺 Sit down with designer and implement minor corrections on the fly
📚 Designers and developers share common design patterns (developer know basic design patterns when developing)
At this stage, designers and developers work hand in hand throughout the product development process. They find smart solutions together during mockup creations and polish the app together during development. All these synchronisation moments don't have to be meetings. You can pair-program, have an informal conversation at the others desk or around lunch/coffee break. You can exchange asynchronously through your favorite chat or design handoff tool.
Here is an interactive quiz to assess your collaboration.
Depending on your context, set up your target.
Are you in a very siloed situation? Do you work in a team but don’t get along ?
If that's the case, aim for Level 1: Basics
Does your team have delays? Lots of back and forth?
In that case, focus to reach Level 2: Efficiency
Do your user have high expectations on your product’s UX? Do you want to have fun working in a multi-profile team?
The answer is clear, target Level 3: Symbiosis
Note: If you are starting to grow a DevUX culture from level 0, you might want to consider having a team building to create trust within the team and start having contructive discussions. If you are struggling with building trust within your team, we recommend you read The Five Dysfunctions of a Team by Patrick Lencioni (or checkout this summary from Talentsquare) and check the Tools section for example of ice breaking games and more.
Check out the Toolbox to help you solved common problems on each DevUx level.