To empathise with developers is to learn the basics of coding

Have you been in a situation where the development team would push back on designs?

Published in

UX Collective

6 min readMar 25, 2020

In the early years of my career as a UX designer, I often heard them say it would take too long to build this and build that or this design is too intricate or impossible, especially in design agencies. As a designer, I never understood why building certain prototypes can be difficult. So I decided to find out, by taking a step into the coding world.

I started off by paying more attention to the technical vocabulary. I attended tech team meetings to understand how they break down a design into components to build, and generally the process and best practices to maintain code. But this wasn’t enough, I still didn’t understand how coding works and why it’s often too complicated to bring a design to life.

I wanted to take it to the next level and really see what it’s like to put myself into the developer’s shoes; to truly see how coding works and to empathise with them. So, I decided to learn code for a few end goals. One obvious goal is to see how difficult it is from taking design into code, to design with coding in mind and visualise how it’s going to be built. Also, to have a better working relationship with developers.

In early 2019, I started a Codecademy online course to learn the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Every evening after work I would go through each lesson. Let me tell you — it was painful. I didn’t understand any of it. Why did things have to be done a certain way? Why can’t code be much simpler? I just didn’t get it. I didn’t get why coding works the way it does. For example, why do you need to add a Float property to push pixels around the screen? It is very difficult to transition from a UX to a Front End mindset. After a month of the course, I still understood very little and would have no idea where to start if I were to put it into practice.

A few weeks after the course, I discussed my need to understand more about coding with a former colleague named Rodolfo, (who is now a good friend) and has agreed to be my mentor, and from then on, things started to change drastically. He agreed to teach me how to code everyday for 1 hour after work including some weekends. I am thankful for that.

To kick things off, I started with a website prototype from one of my personal projects as the best way to learn how to code is to put myself in a real life situation. The first two weeks didn’t go down well, I struggled to understand the technical terms, the structure of HTML. Nothing made sense. I started to question myself if this is really for me? I began to empathise with developers in terms of how complex coding really is. To add insult to injury, working 10 hours a day and spending 1 to 2 hours of learning code is soul destroying to say the least.

At this point, I was frustrated that nothing was going in my head, I was tired, brain-fried and I almost gave up on learning how to code. But my mentor encouraged me to go on further and I agreed to give it an extra week.

Then on week 4, a switch flicked inside my head and the codes started to make sense. Finally I get how the HTML and CSS work together to form components of a website. How HTML is like a skeleton, a structure or a scaffolding, whereas CSS is like clothes that you dress the HTML to look good by adding a class selector to style an element. It’s a wonderful feeling. It has also taken me some time to learn the naming conventions and technical terms in the coding world. This is important because going into a tech meeting, you are able to speak the developers’ language which helps a lot.

Weeks go by, my coding ability goes a little further with the dedication from my mentor. I am starting to understand a lot more about coding. So my mentor decides to go further with the lessons. As I dive deeper into the next steps of learning Flexbox, I feel as though I have started in the beginning again. Learning Flexbox was a lot harder to understand and at this point, I almost gave up again and wanted to stick to using Floats property instead to move elements around the screen. However, I will need to learn Flexbox in order to understand how codes truly work to help me become a better UX designer.

I ended up spending 4 weeks or so just focusing on Flexbox — including buying a course on Udemy to learn Flexbox to progress further. With determination I isolated myself most evenings as well as weekends. Many nights and days of frustration, pain and exhaustion.

But it all truly paid off. I figured how to use Flexbox! Now I felt invincible. This has given me huge confidence and slowly but surely, I am able to code web pages.

Around September 2019, my mentor had commitments so it was all down to myself if I want to keep learning. At this point, I have gained extensive knowledge about coding and I was able to empathise with developers, which has helped me a ton for my day to day job as a UX designer. With the ability to design for code during the UX process. I decided to continue to self study and explore more. Therefore, I attend coding workshops on a monthly basis which has really helped inspire me to keep going.

11 months on, learning to code has been a difficult journey but worthwhile. All the hours I have put in between work and social life has paid off.

What I have learned

Thanks to my mentor, I have finally understood the complexity of how coding works and there’s so much more to it than pushing pixels across the screen. Having empathy for developers and indeed acknowledging how difficult it can be to code designs on a time frame and the effort it takes, with all the other stuff to consider like maintaining code and the best practices when coding. There will be some sort of manual developers will need to follow if code is going to be scalable and sustainable. Therefore, is it really feasible to build complex designs for what it’s really worth?

Having experienced it myself at first hand, this has resulted in a much better working relationship with the developers and working effectively as a team to produce the outcomes of projects. Being able to build webpages and still learning, it’s now an option for me to use prototypes in my UX work to build pages and test, to see how it actually looks in a web environment.

Key takeaways

I encourage all UX designers to learn to at least understand the fundamentals of coding. You don’t have to learn how to physically code but to understand how it works to empathise with the developers will form a dream team. It will make you a better designer and more able to speak the technical language
Always involve the development team in the design process
As you design you’ll have the train of thought in terms of how that prototype is going to be built in the back of your mind
Lastly, It’s a great skill to know