Learning to work with people in other disciplines is essential to getting ahead in your tech career.
The world is fast coming to realize the importance of user experience (UX) design, with developers and UX designers expected to work together to produce the best possible results. In this week’s special guest post, Claire Rackstraw from CareerFoundry dives into the different ways web developers work with UX designers.
Take it away, Claire!
—-
If you’re thinking about learning to code, or breaking into a career in UX design, knowing how developers work with UX designers is a fundamental part of your learning curve.
It’s a codependent relationship; without a UX designer the developer has no wireframes, designs or prototypes to work from and the user’s experience has not been taken into account, and without the developer the UX designer can’t see the results of his designs or physically build any of his great user-focused ideas, let alone predict timelines or have realistic expectations of the final product.
In this article I’m going to outline how UX designers work directly with developers throughout the design and implementation process, taken directly from my own experience working as a UX designer in a medium-sized startup. So whichever of the two careers appeals to you — UX designer or web developer — you’ll know exactly what to expect when joining your first product team!
So how do web developers work with UX designers? Let’s take a look.
1. Talking to your team — what exactly are you building?
In general, the first point of contact a web development team will have with a UX designer or design team is when a new product feature, or even a new product, is proposed for implementation. When this feature has been proposed, perhaps by the CTO of your company, the web development team will come together with the design team to discuss initial ideas for how the project should be approached.
Despite the name ‘designer’ a UX designer’s role consists of far more than simply creating the physical designs for a product. From the outset of a project, a UX designer is hands-on with research, testing and keeping the team focused on the needs of the user. Despite the fact that UX is more typically associated with ‘design’, the actual wireframing and prototyping phases come a lot later on, and are no more important than these earlier stages.
If you’re thinking about becoming a UX designer, let me tell you, it’s certainly not an easy job role to explain to the uninitiated! In my role I am as much a researcher as I am a designer, and as much a user tester as I am a usability expert.
It can be all too easy for the project lead to create a product or feature specification that has been put together without any input from the design or development teams. By joining forces at a very early stage in the project, the development and design teams can discuss possible approaches to the project to ensure that it is realistically scoped out, is technically feasible, and actually meets the needs of its intended users.
As my team’s UX designer, I am bringing the product team back to considering the users time and time again.
The UX and UI designers will develop some initial ideas about how they would like to approach researching and designing the product or feature. The UX designers in particular are likely to have some ideas about different approaches they would like to explore further with potential users.
You may have guessed, but we UX designers love getting our hands on real users as much as possible in these early stages! The more information we can get out of them via surveys, questionnaires, and in-person interviews, the better informed our product will be, which will ultimately make for a better user experience. The better the user experience, the more successful the product, which keeps our bosses happy too.
For the web development team, it is essential to understand the possible approaches being proposed by the design team in order to gain an early awareness of the direction the project is likely to take. It also gives the web development team the opportunity to a) estimate the capacity that will be required for completing the development phase of the project, and b) to give feedback on what they see as being technically feasible within the scope of the project.
From the very beginning, communication between designers and developers is absolutely key to your project’s success – so be transparent with your team about your fears, concerns and potential roadblocks. Put simply, get talking!
2. Researching your users — what’s in it for them?
Once initial ideas for the product have been discussed, user research is conducted to help inform the exact feature specifications of the product. If you like talking to people and understanding their behaviour and psychology, then this bit’s for you!
User research enables designers to better understand user problems, needs, motivations, and behaviours — the very things that get us UX designers all excited. Subsequently, user research helps to inform product or feature requirements.
There are many methods that can be employed to conduct user research, such as surveys, interviews, focus groups, card sorting, and more.
The method chosen will be dependent on several factors, including the nature of the product being designed, the intended user group, and the budget allocated for the project. If, for example, your target user group is based in Iceland, sending out a survey will be a good deal easier than an in-person interview.
The UX designers will plan and conduct user research; however, it is beneficial for the web development team to understand the nature of the research the UX designers are planning and give input to help answer any open questions they might have.
What might your web development team wish to know from the research?
- How a user is likely to behave when using a particular feature
- A user’s expectations of how they are able to interact with a particular feature
- How a user might move through the site
By working with UX designers while they are planning and setting up user research, the web development team can ensure that they’ll get answers to any open questions they have regarding user needs that may influence the build specifications. Sounds good, right?
3. Presenting your findings — what have you learned?
Once user research has been completed, it’s time for the UX team to compile and present their research findings to the team.
Why?
The web development team can gain insight into understanding users’ needs, goals, and pain points in the context of using the new feature or product. I find these sessions are great for ironing out any assumptions the team may have had about the user. If there’s one thing UX designers can’t stand, it’s an unsupported assumption!
With user research complete, the feature requirements for the Minimum Viable Product (MVP) can be further refined with input from all members of the project team. At this stage, user needs, design specifications, and technical requirements can all be considered alongside each other.
With user research completed, the UX designers can begin creating initial sketches and wireframes. Wireframes are basic designs that indicate the structure, layout, and navigation of content on a website or app.
At this stage it is likely that more than one approach will be explored by the UX designers and shared with other members of the project team for review and feedback. Involvement of the web development team at this stage is essential, as they can give the UX design team input on the technical feasibility of the initial designs. In addition, the web development team may also be able to offer alternative design solutions that still offer an excellent user experience while making implementation more straightforward from a development perspective.
Ultimately, by getting input and advice from the web development team early in the project, we’ll be able to avoid creating a set of designs that are either not feasible within the scope of the project or that require large, unexpected changes or additions to the existing codebase.
Basically, more input at this stage means fewer revisions — and headaches — further down the line!
4. Tweaking your wireframes — how could they be improved?
It’s definitely not the most exciting stage in the project, but refining wireframes based on technical feedback from the developers is pretty important.
After the project team has reviewed the initial set of wireframes and the web developers have given input on the technical feasibility of the designs, the UX designers will further refine the wireframes before going on to create more detailed prototypes.
Prototypes are higher-fidelity mockups of the final design and give an indication of what the user interface (UI) of the website or app will look like. Prototypes can be turned into clickable, interactive designs using various prototyping tools.
Once the UX design team creates a set of prototypes for the product, they can be tested with potential users. As with creating the initial wireframes, when refining the designs to turn into prototypes, collaboration between the design and development teams is key to ensure that the designs align with the capacity and capabilities of the web development within the scope of the project.
5. Testing your design — does it work like you thought it would?
Testing is much more fun than refining. As a UX designer you’ll get to interact with real people again and see their first reactions to your designs.
When prototypes are ready, usability testing can be conducted.
Usability testing can be carried out in-person or remotely, and can utilise either paper or digital, interactive prototypes. It is designed to assess how easy the product is to use and the overall experience the user has when interacting with the product. It can be extremely revealing about the success of your designs!
Often, usability testing requires the user to complete a series of tasks set out by the researcher, who then observes and takes notes about the user’s experience and any difficulties they faced with using the product.
The results of usability testing can then be shared with the project team to inform them of the changes that need to be made to the product designs.
And what happens next?
You guessed it. More tweaking, refining, and re-tweaking the design in response to the user feedback. From a developer perspective, it’s also important to ensure that the designs can still be realistically implemented within the scope of the project and the MVP.
6. Creating your final design — is it ready to implement?
Once usability testing with prototypes is complete and the last revisions have been made to the designs, the UI designer can begin creating the final, high-fidelity user interface designs for the product.
It may have felt like it took a long time to get to this point, but the amount of preparation that goes on before coding actually begins will save a heap of time for the whole team after.
At the end of this process, the UI designer will hand over the designs to the web development team for building and implementation. However, before this happens, there needs to be — yep, you guessed it — further discussions between the UI designer and the web developers.
Firstly, the UI designer needs to find out from the web developers how they should hand over the designs. For example, consider these questions:
- If the UI designer is working with design software such as Sketch or Illustrator, do the developers also have access to this software so that they can open the relevant files?
- Is there a standardized style guide detailing font usage, color palettes, button styles etc. that both the UI designer and the development team can refer to, or does the UI designer need to add detailed notes to their designs?
- Do the developers prefer using a collaborative tool for the design-to-development handover process, such as Inspect by InVision or Zeplin?
In order to make the handover of designs from UI designer to web developers as smooth as possible, the web development team needs to clearly set out their requirements for being able to work with and implement the designs. The UI designer, meanwhile, needs to provide the designs in a format that meet the web developers’ requirements, and (as with the earlier stages of the design process) check in with the development team to assess the best technical solutions for particular user interactions.
7. Implementing correctly — are there more obstacles to overcome?
If you thought that was the end of discussions between the designers and the developers, then you were sorely mistaken!
As the web developers begin building the product or feature, inevitably there will be certain elements of the design that don’t function in the way that was envisaged by the design team. Therefore, the designers need to be on hand to work alongside the developers to find alternative solutions that maintain an optimal user experience.
The UX and UI designers also need to check in regularly with the developers while they are building the product to ensure that the designs have been correctly interpreted and implemented as intended by the designers. This is also why a thorough and collaborative handover process between the designers and the developers is essential.
Once the product or feature is built, a period of user testing should take place to determine what changes need to be made to the next iteration of the MVP, along with any immediate bug fixes or severe usability problems. At this time, both the design and development teams need to come together to address the feedback gathered from initial user testing and prioritize potential changes to make to the product. As with the earlier stages of the design and building process, collaboration between the design and development teams at this stage permits both teams to go back and forth on design proposals and technical feasibility to arrive at well-thought-out decisions on which changes to make and how best to implement them.
Conclusion
I hope that from this article you now have a clearer idea of not only the individual roles of UX (and UI!) designers and web developers, but how they work together and depend upon one another throughout the whole process of building a product, as well as how each coordinates and prioritizes their tasks for the benefit of the other (and ultimately the whole team). It’s clear how important effective communication between UX designers and web developers is, as well as maintaining transparency on tasks and timelines and nurturing a feedback culture within the team as a whole.
Want to learn more about UX design? Check out UX Fundamentals from CareerFoundry, and discover the world of user experience design.
About The Author
After a ten-year nursing career in London, Claire Rackstraw felt it was time for a change. After coming across an ad for CareerFoundry she signed up for their UX Design Course the same day. After graduating from the course Claire moved to Germany where she was promptly hired by CareerFoundry at their Berlin headquarters as an in-house UX designer.