In the fast-paced world of web and app development, creating smooth user experiences requires strong collaboration between user experience (UX) designers and software engineers. It’s not just about handing over design files; it’s about ongoing dialogue to create a shared understanding of a product’s vision, goals and constraints.
In this blog, I’ve partnered with San Basnayake, a software engineer from our iSolutions team, to share insights on how our effective collaboration drives better outcomes, strategic breakthroughs, and enhanced accessibility for all users.
The importance of dialogue
Following a recent show and tell, we were asked how much communication was required to achieve this outcome. The answer is, always, A LOT! I’d say that 80% of our time is about communication.
We’ve seen it many times before: simply sending over static files during the initial design handover stage can lead to confusion and missed opportunities. It’s crucial to facilitate dialogues to prevent this.
One clear example is our discussion about the scalability of components, such as our block card system, which currently accommodates 3 cards. Let’s be honest, users’ needs change over time, as do the needs of the business. So, what if we needed to add more down the line? By discussing scalability early on, we can anticipate future technical requirements. Designers can provide insights into the rationale behind design decisions, while developers like San can propose optimisations to ensure smooth functionality.
This collaborative approach from the outset helps us create a more adaptable product capable of evolving without extensive revisions.
Enhancing design clarity
When immediate discussions aren’t possible, we start by sharing Figma designs for developers to review asynchronously. To enhance clarity, we use annotations to provide additional context to our design files. Personally, I’ve found Figma’s Dev Mode invaluable for labelling and clarifying variables. We’ve also recently integrated Stark, a useful Figma plugin that streamlines the annotation of elements such as tab order, landmarks, and ARIA labels. These tools are instrumental in providing engineers like San with the necessary context to quickly grasp design specifics.
Additionally, screen recording is an invaluable tool for designers. It allows us to conduct detailed walkthroughs of the design file, which can then be shared as a resource across the team for future reference.
Welcoming feedback during development
Collaboration shouldn’t be limited to the UX and development team. Feedback and engagement from the whole Digital User Experience team is welcome. Take our content designers, for instance: they recently faced a user interface (UI) issue in Drupal where they had to scroll down the entire page to find the section they needed to edit.
By working together and discussing the problem, we came up with a solution: a left-hand menu for easier navigation. This small but effective fix made a big difference and showed how teamwork can enhance the overall user experience.
Screen-sharing for enhanced UX/Dev accessibility work
As we get to the final stages of the UX/Dev handover, screen-sharing sessions become crucial. San and I often use screen sharing to go through content management in the live environment and make sure all accessibility features—like landmarks, ARIA labels, and focus states—are correct.
And it’s not just a one-time thing; we use screen sharing throughout the process. San’s ability to make quick UI changes on the spot allows us to catch any issues early on and make necessary adjustments in real-time. Due to our restricted access to the codebase, observing a developer’s screen offers insights that we wouldn’t otherwise have.
Testing
During testing in Pre-Production (PPRD) before releases, we uncover any bugs and simulate the end-user experience. As humans, we’re prone to making mistakes and overlooking things, so having another person’s perspective is essential. Knowledge sharing is key: UX designers know site components well, so we’re able to efficiently cross-check areas that might’ve been affected, while engineers’ backend expertise ensures smooth integration and performance. This thorough testing phase ensures our site is ready for launch, minimising the risk of potential issues when live.
Testing occurs continuously and extends beyond the release phase. We regularly assess the UI and functionality of our site, utilising JIRA as our ticketing system to address any issues promptly. This approach ensures the ongoing upkeep of our website, encompassing both our code base and design system.
Recently, we encountered an inconsistency with fonts: while our design system specified only 4 fonts, the code base included over 60. This discrepancy resulted in slower loading times and a cluttered backend. Upon San’s feedback, we standardised the fonts across the code base and design system to resolve the issue.
This brings us to another important issue…
Maintenance and continuous improvement
In the world of design and engineering, not all tasks are created equal. In the words of Kurt Vonnegut: “Another flaw in the human character is that everybody wants to build, and nobody wants to do maintenance.”
We design, we prototype, we work with end-users and the business to ensure we create something better and more valuable to what was there before. Anything that falls into the category of ‘new stuff’ or ‘innovation’ always feels a lot more exciting. Maintenance and continuous improvements are undervalued, but they are most important – because they tend to offer more value to the end user and ultimately the organisation.
I enjoy pairing with engineers and other disciplines such as user researchers, content designers, and product experts because it allows us to have a conversation about design choices. It helps to reason my decisions and what considerations we’re making for any future iterations, whether they are design-orientated or more technical aspects of the product. This knowledge helps us, as a team, to build empathy with one another and a more supportive environment.
Final thoughts
Effective UX and engineering collaboration goes beyond traditional handoffs. By maintaining open communication, anticipating future needs, and conducting thorough final checks, teams create adaptable, user-friendly products that align with strategic goals. Embracing this approach ensures systems evolve alongside user needs and business objectives.
There is a lot more to say on this topic. One thing that I would like to echo is that it makes a lot of good business sense. Many practitioners would advocate for this kind of ongoing collaborative work – it’s better for your users, and better for the organisation’s reputation. In its own way, it also supports innovation.