Why having a product designer who can code is beneficial
Here are some examples of my work where being able to code was extremely helpful.
Mayo Clinic Research Top Level Page Navigation
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
So I came in and wrote the navigation menu prototype in basic HTML/CSS/JS.Launch Prototype
Mayo Clinic Intranet Home Page Redesign 2022
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 (Mayo internal or VPN users)
Mayo Clinic Enterprise 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.