Patent Application

I had the pleasure of revamping the visual UI, iconography, pattern libraries, and front-end code for a patent administration software tool based out of Oakland, CA.

  • UI, HTML/CSS

The Problem:

The existing application was functioning yet in dire need of a visual update. This pixelated screenshot shows the utilization of default WYSIWYG plugins with no thought given to the approachability of the experience.

The target users were patent staff who were technically savvy yet also desired a pleasant approach. We believed that our visual updates could increase usability and decrease fatigue.


Design Exploration

My first pass at a concept UI system focused on a blue color scheme. I also felt it was appropriate to add bold button labels, subtle secondary and tertiary colors, and a font family powered by Google Fonts.

Accessibility Requirements

After this first concept, I learned that all color schemes needed to comply with the 508 accessibility requirements for users who experience color-blindness. This low-contrast UI would have to be reworked to ensure that we did not alienate any users.


Next Iteration: Friendly & Approachable

My next UI concept simplified the components even further, increasing the padding and contrast to ensure compliance.


Additional UI


Application Mock-Up


Custom Icons

Final Thoughts

After design approval, I developed these components utilizing an existing CSS framework comprised of Bootstrap and SCSS. I then coordinated with the engineering team to implement the new UI elements into React templates. The initial feedback from the client was extremely positive.

If I were to do this project over today, I would do more research to understand how modern document applications have innovated new methods instead of staying within my current understanding of web-based software.