{"id":1411,"date":"2024-08-21T09:45:57","date_gmt":"2024-08-21T09:45:57","guid":{"rendered":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/?p=1411"},"modified":"2024-08-21T09:45:57","modified_gmt":"2024-08-21T09:45:57","slug":"harnessing-the-power-of-cross-collaboration-between-designers-and-engineers-for-great-experiences","status":"publish","type":"post","link":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/2024\/08\/21\/harnessing-the-power-of-cross-collaboration-between-designers-and-engineers-for-great-experiences\/","title":{"rendered":"Harnessing the power of cross collaboration between designers and engineers for great experiences"},"content":{"rendered":"

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\u2019s about ongoing dialogue to create a shared understanding of a product\u2019s vision, goals and constraints.<\/p>\n

In this blog, I\u2019ve 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.<\/p>\n

The importance of dialogue<\/strong><\/h3>\n

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\u2019d say that 80% of our time is about communication.<\/p>\n

We\u2019ve seen it many times before: simply sending over static files during the initial design handover stage can lead to confusion and missed opportunities. It\u2019s crucial to facilitate dialogues to prevent this.<\/p>\n

One clear example is our discussion about the scalability of components, such as our block card system, which currently accommodates 3 cards. Let\u2019s be honest, users\u2019 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.<\/p>\n

This collaborative approach from the outset helps us create a more adaptable product capable of evolving without extensive revisions.<\/p>\n

\"Screenshot<\/p>\n

Enhancing design clarity <\/strong><\/h3>\n

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\u2019ve found Figma\u2019s Dev Mode invaluable for labelling and clarifying variables. We\u2019ve 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.<\/p>\n

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.<\/p>\n

Welcoming feedback during development<\/strong><\/h3>\n

Collaboration shouldn\u2019t 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.<\/p>\n

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.<\/p>\n

\"Screenshot<\/p>\n

Screen-sharing for enhanced UX\/Dev accessibility work <\/strong><\/h3>\n

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\u2014like landmarks, ARIA labels, and focus states\u2014are correct.<\/p>\n

And it\u2019s not just a one-time thing; we use screen sharing throughout the process. San\u2019s 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\u2019t otherwise have.<\/p>\n

Testing <\/strong><\/h3>\n

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\u2019re able to efficiently cross-check areas that might\u2019ve been affected, while engineers\u2019 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

\"Screenshot<\/p>\n

This brings us to another important issue…<\/p>\n

Maintenance and continuous improvement <\/strong><\/h3>\n

In the world of design and engineering, not all tasks are created equal. In the words of Kurt Vonnegut: \u201cAnother flaw in the human character is that everybody wants to build, and nobody wants to do maintenance.\u201d<\/p>\n

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 \u2018new stuff\u2019 or \u2018innovation\u2019 always feels a lot more exciting. Maintenance and continuous improvements are undervalued, but they are most important \u2013 because they tend to offer more value to the end user and ultimately the organisation.<\/p>\n

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\u2019re 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.<\/p>\n

Final thoughts<\/strong><\/h3>\n

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.<\/p>\n

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 \u2013 it\u2019s better for your users, and better for the organisation\u2019s reputation. In its own way, it also supports innovation.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019s about ongoing dialogue to create a shared understanding of a product\u2019s vision, goals and constraints. In this blog, I\u2019ve partnered with San […]<\/p>\n","protected":false},"author":263,"featured_media":1416,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[17,38,21,22],"tags":[],"class_list":["post-1411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-dev","category-team","category-ux"],"jetpack_featured_media_url":"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2024\/08\/Screenshot-2024-08-16-100852.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paLsBb-mL","_links":{"self":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/users\/263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/comments?post=1411"}],"version-history":[{"count":20,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1411\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1411\/revisions\/1438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/media\/1416"}],"wp:attachment":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/media?parent=1411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/categories?post=1411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/tags?post=1411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}