Welcome to a new BetaKit bi-weekly series designed to help startup developers. Each article, TribalScale’s tech honchos tackle the tough questions facing devs today. Have a question you would like answered? Tweet them with the #askadeveloper hashtag, or email them here.
By: Andrea Barros and Ainan Ameen
When designers and developers work together, they create magic. Pair the stereotypical left-brained, logical-thinking engineer with the right-brained, creative designer, and the ensuing collaboration will produce an exceptional synergy that is geared to solving and creating unique digital products.
Designers and developers each bring different skills and perspectives to a project, but they do share the same goals. When the two collaborate, they can harness each others talents and methods to build digital products that are intuitive, functional, and seamless. So, instead of talking past each other, let’s come together.
First, what do designers and developers do, respectively?
The UX (User Experience) designer enhances user experience and interaction by improving the usability of a product through research. The UX work process is highly empathetic and may involve user-testing to best understand human behaviour and needs. The UI (User Interface) designer is primarily concerned with the emotional integrity of the product. The UI designer crafts the front-end look and feel of a product to ensure UX research is reflected and designed with consideration. Although, the distinctions between the two are often blurry and roles and responsibilities may be combined into one. In the end the UX/UI designer produces the wireframes, storyboards, and product mockups.
Marriage between designer creativity and the developer’s toolbox will lead to beautiful, strong product. Start from the beginning, communicate empathetically, leave your ego at the door.
The developer focuses on building, bringing the digital product to life. It is the developer’s responsibility to match the build with the intended features, and in the most appropriate way. The developer assesses project feasibility and timelines, writes, implements, and tests code, and then releases the product. At TribalScale, the developers practice an accelerated form of agile development: extreme programming. Extreme programming involves pair programming (two developer working on the same code), ongoing feedback, and rapid iterations. The process is collaborative and helps us build products that are validated and tested.
Designers and developers work closely with each other. Without a designer, the developer has no guidance to the product’s user flow, functionality, and user experience. Without the developer the designer’s envisioned product won’t come to fruition.
How to work together
In any project, the designer first conducts user research and delves into the space to understand user needs and the product journey. During the UX research phase, the designer validates how to best create an awesome product that actually fills the need of the target users. The aim is to first create a wireframe that showcases the product’s functionality, and then a high-fidelity design that will give the product some emotional life and breath. Through this stage, the designer will work with an engineer to review functionality and technical limitations.
Then, the designer will independently create the wireframes that capture business and user logic, and will review the wireframes with the engineer for technical validation. Lastly, polishing designs and adding animations in the hi-fi stage, which brings out the brand and adds character, polish, and delight.
At TribalScale, both devs and design collaboratively work with design mockups. They ease communication by exporting them into a platform that eases collaboration (such as Zeplin or Sympli), where developers can measure all visual blocks, text sizes, and other design specifications for build. Designs are also uploaded and linked into an app (such as InVision or Marvel) for functionality assessments, and easier visualization (i.e., you can see what would happen if you click a button). At this stage, developers have the chance to measure technical feasibility and see whether the design falls within the project’s scope, and provide the designer with feedback.
Once all mockups, prototypes, and design builds are finalized, the developer codes and works somewhat independently. However, the designer’s vision and ideas are always at the fore of the building process.
At TribalScale, we practice a unique form of Quality Assurance (QA), which directly reflects the rest of our principles — pair programming, feedback, and quick iteration. Rather than conducting design QA in the release candidate stage, and risk deprioritizing important pixel-based stories, we try to do design QA early and regularly. To do design QA, we suggest scheduling a separate designer-developer meeting to go through each feature. A one-on-one, face-to-face session is the most effective way to identify specific fixes and make the product pixel-perfect. It is so much easier to pinpoint issues while working on the product, and communication is streamlined as there are no notes passed back and forth.
It is also more efficient. Imagine the designer and developer pairing: one computer, two great minds, mutually revising and reviewing the same product. They can make the quick fixes together while the engineer focuses on the code and the designer focuses on the pixels and visuals. Together, issues can be caught and resolved early. It is also much easier to conduct QA when seeing the product on device, getting a sense of how it breathes and lives. Such interactive, collaborative QA will help the team build the best product, even if it already aligned with the mock-ups. The design QA process we practice at TribalScale is very iterative and ensures we ship a product we are proud of from both build and design perspectives.
Perhaps inevitably, the designer and developer may conflict over product ideas and priorities.
How to best work together
1. Communication
Open lines of communication are key. Designers tend to be imaginative and creative, coming up with unique, and maybe ambitious, product features. It’s possible that these features are unrealistic or even infeasible; communicating project direction and aims from the get-go will limit any unforeseen design needs or limitations down the road. Together and from the start, designers and developers should discuss approaches, features, and accurately scope the project to make sure they are on the same page and that the project meets user needs.
2. Time for feedback
Close collaboration provides both developers and designers with the chance to give feedback throughout the project. Since each may come in with a separate set of ideas on what’s right or logical based on their previous experiences and existing knowledge, it’s best to communicate ideas, challenge each other, and build on each others skill-sets for the best possible version of the project. In the QA stage, feedback is most important. Pairing through design QA provides both with the chance to review each feature set, and in detail from both design and development perspectives. Fixes can be made frequently and quickly, and then the team can move onto the next iteration of the project.
3. Leave egos at the door
For an optimal user experience, designers and developers need to leave egos at the door and give their team members the benefit of doubt. Keep in mind that someone else may have an alternative idea or experience-based suggestion that will deliver an improved product. Instead of making assumptions, listen to each other’s ideas. Designers: developers know the platform best; trust that their toolbox will help you figure out what is possible for the project scope. Developers: designers have spent ample time researching the user, they are empathetic, and are trained in usability and visual interfaces.
4. The earlier the better
To best combine the designer’s imagination with the developer’s toolbox, working together early on is the surefire way to create the best version of your product. Involve each other, listen and understand one another. Both the designer and developer are essential for a user-friendly, intuitive, top-tier product. So, from the beginning be open and communicate to limit misunderstandings and avoid blocks, and most importantly, to support each other.
The benefits of collaboration
Designers and developers ship better products when they work together, and isn’t this the shared goal?
Bringing both aspects of the team together will ensure that a functional product with a supreme UI and UX is built. Issues will be caught early and frequently with a paired design QA, and design issues won’t be deprioritized if there is a sudden crash. Plus, you won’t need overly robust teams: one designer and a pair of engineers will suffice!
In the end, designers are trained to think creatively and work outside of the box while developers are taught to apply their tools with precision and logic. Yet, for a great product in terms of both code quality and UX/UI, you need collaboration and communication. Marriage between designer creativity and the developer’s toolbox will lead to beautiful, strong product. So start from the beginning, communicate empathetically, leave your ego at the door, and prioritize feedback.
Andrea Barros is the Lead UX/UI Designer at TribalScale. She started her career in retail branding and exhibition design. She is constantly searching for new ways to create user centric experiences and execute solutions to create satisfying experiences. She is also an educator, sharing industry knowledge and best practices with clients and students.
Ainan Ameen is an Agile Engineer and People Manager at TribalScale, he focuses on iOS development. After studying nanotechnology engineering in university and working on the trade floor at a large bank, he realized the tech industry was a better fit for him. Ainan balances his work life with activities like snowboarding, soccer, and yoga.