Published on | Prototyping: From UX to Front End — Medium Sasha Ward Illustration courtesy of http://somanglee.co.uk/ for Red Badger

This time 3 months ago (give or take) I didn’t have much of an understanding of how to code. I’d been working with digital products for two years by then but my background in product/industrial design meant that I had been focussed on creating models with my hands, using physical materials to visualise and prototype my designs rather than delving into software and programming.

I decided to take a 10 week front-end web development course to gain a deeper understanding of the tool we use to build our products and to understand what we can and can’t do with code, in order to help make better design decisions when thinking about a particular product/feature (the course covered HTML, CSS and a little bit of JavaScript). This illustrates my point…

I’m not saying that in 10 weeks I’ve become a superstar front-end developer, not at all. What I can say is that my understanding of the basic front-end languages has helped me a heck of a lot and I’d like to share with you how it’s helped and why I think it’s important that UXers have an understanding of how we build the products we design.

1) More productive conversations with developers

By gaining an understanding of how code works, I’ve become better equipped to communicate a design or certain functionality as I’m talking the same language as my fellow developers. Understanding the nitty gritty details of how the design is going to be built in code will help you as the UXer to understand whether or not the design is feasible.

2) Helps create a common/shared vocabulary

Using the same language and understanding of elements of code allows us to communicate our designs in a more detailed manner. It gets rid of the potential miscommunication that may occur if you’re creating flat jpeg designs or wireframes, especially if you’re not co-located with your development team.

3) Prototype more effectively

If the project/client has pre-existing front-end toolkits or code snippets making prototypes that look and feel like the real thing are a matter of copying and pasting, making any necessary changes and running the code on your machine. With coding knowledge, you can use these toolkits and actually understand what’s going on.

This knowledge helps with code based prototyping tools like Framer as they work in the same way that developers speak but are not as complex as the raw code itself. This allows you to create detailed prototypes that are made up of useful snippets of code that a developer can use to inform their production ready code.

If you want to test realistic interactions then a coded prototype is a great route to go down. It’s important to remember that it’s a prototype so the code doesn’t have to be 100% production ready so getting hung up on the details as it isn’t massively important at this stage. You want to aim to keep it as light as possible, you’re trying to prove or disprove a design/idea so moving quickly is a priority.

4) Prototype in the browser — Chrome DevTools are your best friend

Tweaking designs in the browser is a useful way to prototype/visualise how a change to the design will look in the browser. You’re using the code that you’ve written as a medium to discuss how the design should look and how it could be built which engages your developers and creates useful conversations. This has by far been one of the most useful tools that I’ve learned how to use which I’ve used on projects to communicate copy and colour changes.

How to do it… well rather than opening up a sketch file, open up Chrome (or download it if you haven’t already), inspect element on the part of the design you’re looking to edit, make changes locally to the HTML or CSS in the styles pane and see the result there in the browser as the user would see it. It’s a super useful tool! See here for more information

5) Sharing the workload

I recently merged my first pull request. :micdrop:
I took a story from the backlog of the project I was working on (a simple copy change). I reworded the two lines of text and was happy for it to move to development. I created my own branch, made the changes, pushed them and created my first pull request. The next day, the changes were merged and the story was done.

As a UXer, being confident to implement these simple changes greatly benefits the team as it reduces the workload for the dev team who can then focus on the larger, more complex pieces of work. How much more productive can our devs be when the designers or UXers are picking up these very straightforward pieces of work, coding them, committing them, getting them reviewed and merging them to master.

6) Make better decisions

As a UX designer, you are at the intersection of the business requirements, user needs and technological feasibility, which is an important place to be in as you are responsible for understanding each one of these facets, facilitating discussions and creating viable solutions that satisfy the three players. Therefore, the more knowledge you have about each one of these areas better equips you to make better decisions for the product and ultimately the user.

An example where this knowledge really came in handy was on a recent client project where we were working with form inputs. Knowing how form inputs are built allowed me to more accurately explain what behaviour we wanted to create by using the correct terminology and syntax.

For example, if a requirement is “we need to capture the number of times the user exercises per week”, as the UXer I can say, let’s use:

<input type="tel">

As it allows the user to enter a numeric value but also brings up the numeric keypad on mobile which is useful as it saves the user from having to switch keyboards.

7) Confidence

It’s not just me who’s been through this experience. At Red Badger, our product designers are not just fantastic visual designers but are also skilled in front-end development so I asked them what changed for them since learning how to code.

“Confidence. I am 100% more confident in the designs I suggest now I know more about the technical feasibility and build time.”
— Clementine Brown, Product Designer

A common theme emerged…

“I’m more confident communicating designs with greater certainty that I’m providing the most useful information to developers. ”
— Jun Taoka, Product Designer

Having a better understanding of the core front-end languages (HTML, CSS and JavaScript) certainly has its benefits. The key one for me is reducing the knowledge gap between design and development which in turn helps create a shared language allowing for more productive and efficient communication of designs that helps to speed up the development process, reducing waste where necessary.

Hats off to you developers was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hats off to you developers

Cool stuff, every week

More Articles