Why having a product designer who can code is beneficial

Improved communication: A product designer with coding skills can communicate more effectively with developers, fostering better collaboration and reducing misunderstandings. They can better understand technical constraints and opportunities, which helps in creating more feasible designs.
Rapid prototyping: A designer who can code can create high-fidelity prototypes that are closer to the final product, allowing for more accurate user testing and feedback. This can speed up the design process and help identify potential issues earlier.
Bridge the gap: A designer with coding skills can act as a bridge between the design and development teams, facilitating a smoother transition from design to implementation.
Increased efficiency: When a product designer is familiar with coding, they can create designs that are easier to implement and require fewer revisions, ultimately saving time and resources.
Versatility: In smaller organizations or startups, a product designer who can code may take on additional responsibilities or fill multiple roles, making them more valuable to the team.

Here are some examples of my work where being able to code was extremely helpful.

Mayo Clinic Research Top Level Page Navigation

Research Top Level Page Figma design

Problem:

Figma has a limitation of only one interaction per mouse hover/over event that can triggered. We needed to have the menu items both change its highlight color and be able to open up the second level menu. Therefore, the menu items that allowed you to open up the secondary menu on hover, was not able to change the highlight background color.

Figma design | Figma prototype

Solution:

So I came in and wrote the navigation menu prototype in basic HTML/CSS/JS.

Launch Prototype

Mayo Clinic Intranet Home Page Redesign 2022

Exploring mobile table and desktop layouts for Intranet top level page

Using code, here is some early stage work I did for the Intranet homepage design refresh, exploring responsive and dark mode layouts using CSS Grid and 12 column / 16 column grid, as well as the overlay for unsupported browsers.

Launch Prototype

Launch Prototype (Mayo internal or VPN users)

Mayo Clinic Enterprise Search Results Page

Exploring mobile table and desktop layouts for Intranet search results page

There was the idea I brought up to the product team to have a sliding drawer menu for the search filters when users were using mobile. In order to validate this concept with our users, I created a web prototype using code.

Launch Prototype