John W Hancock
Delighting users one interface at a time.
Front-End Developer with UI/UX expertise
There are a lot of applications out there, many of which are painful for users. We all have enough to worry about in life, why make the users worry about how to use an app? It is my goal to improve upon the user experience of these web applications.
Custom framework consisting of HTML/CSS elements as well as Angular components used by Washington State DSHS. Old, antiquated apps are being rewritten as modern web apps at DSHS and I was tasked to create a framework that each of these apps can use to provide a consistent look and feel between apps. So far 3 separate, large applications have been rewritten to use this new framework.
I was involved in both the creation and maintenance of the framework as well as the front-end developer in charge of deciding the UX and UI of each application with oversight of another UI designer. The framework is not only just CSS elements but also an Angular plugin published to a private NPM registry.
UX for each application involved working directly with the business groups, end-users, developers, and testing teams. Mockups, and prototypes were used for several portions of the apps and presented to Business and end-users.
A styleguide was created for the framework that details all the available elements and how to use them, complete with code samples. Training was performed to all the developers on how best to utilize the framework and how to ensure accessibility. Special attention was given to accessibility by following WCAG standards and a high-contrast version is available in each app that users can toggle on.
As a UI designer at NBC, I helped design various elements for a redesign of the Today Show website. One area in particular that I was in charge of was the design and function of the slideshow component used on the site, ensuring a fully responsive slideshow that provides the best viewing experience for users. Also was tasked with creating the search UI, ensuring ease-of-use and mobile-first viewing. One trick to this project was ensuring a great experience for users as well as providing optimal advertisement opportunities. Designs were guided by established styleguides and requirements from Stakeholders.
What was once a web app that looked like a simple, yet confusing website was redesigned to be an accessible, easy-to-use, mobile friendly, modern web app. Taking some complex concepts, they were restructured to be approachable and understandable at a glance. The interface was carefully setup to be functional no matter the device you used whether that be a mobile phone or a 4k monitor.