Project: Application Product Interface

Customizing an off-the-shelf application interface

My responsibilities: review screens and modals, design color scheme and typography options, and write css styles to override framework settings

Challenge

The application had to use a default template while the next generation was in development. The template didn't match brand standards and wasn't adaptable for the different use cases, so the client wanted a quick way to enhance the interface.

Goals

  • Use only css and icons because the html and data could not change
  • Design a clean look to focus on the information
  • Allow developers to easily change color scheme when needed

Results

  • Provided css, color schemes, and design pages
  • The understated coloring and typographic hierarchy allow the user to focus on the current work area
  • Colors can be easily updated using sass or css

Using screenshots from the app, I first developed quick mockups. Because the html could not be edited, the screens had limitations to what could be changed.

The finished packet included screenshots, css files, and design sheets for the developers with details and samples of color, typography, and element treatments.