REACT
PROTOTYPES
Why sometimes a product UI does not like the design at all?
From the Dev's point of view, the design handoff file (no matter in Figma, Sketch, or InVision) does not have all the specs Dev needs; When I was a Dev, I have to do a lot of guesswork on the paddings and layouts. It's like repainting Mona Lisa. No matter how hard I try, there will always be some details missing.
From the Designer's point of view, putting everything in its place pixel-perfectly is a lot of work. As a designer, I hope the developer who rebuild my UI design will rely on default CSS styles and respect those rules. I don't want developer to copy everything directly from design handoff and override every component to match design.
However, most of designers do not have coding background and most of developers do not have an eye to catch all the design details. Since I got experience working on both sides, I know what a designer wants in design, as well as what developers need for code. I start to create those HTML/React Prototypes to bridge the gaps between Dev and Design team.
Noodle Soup Recipe Generator
This is a fun project. UIUX team decide to share a recipe from everybody's hometown. In order to make my recipe more intuitive and more fun, I decided to combine what I learn from UIUX design, React prototyping, and video shooting/editing to make Recipe Generator and a YouTube Video.
ConnectWise Blue Left Navigation
ITS Portal has redesigned the left navigation from Teal Theme to Blue Theme. This prototype is to reduces the guesswork for developers since they can inspect the CSS and HTML directly.
ConnectWise Roadmap
Our VP sends me an excel file and asks me to create a prototype to show the partners our roadmap. Instead of copying and pasting content from excel to the design file, I used React to parse newly uploaded excel. I also provided filters for the results and made the website responsive.
Drag & Drop Policies in Package for ITS Portal
The design was made in Sketch and exported to InVision. I was asked to build a prototype to show how drag and drop interactions could be used here.
Role Creation in ConnectWise Home
The prototype shows a form on the role creation flyout. There are 3 tables under 3 tabs, select the "User Roles" tab and click on the "Add Role" to bring up the role creation flyout.
