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 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.
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.
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.
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.