PACER

Design and Front-End Development

The tool was created by a psychometrician who wanted to make psychometric analysis easy for non-developers.I was brought on to showcase the tool's personality, with engaging colors, intuitive interface design, and fine-tune the over-all layouts from homepage to generated results.

Homepage

Please scroll in this computer to view the whole image.

Interface

Example of Interface Design for PACER.

The application was built in R code and Jquery for the front-end. The base is a Shiny App and Bootstrap. My contributions includes:

  • Developing graphics - open source images modified to fit branding.
  • Over-all design identity - logo, fonts, color-palette, homepage layout.
  • Developed HTML layouts for all pages.
  • Custom CSS theme, including light and dark modes.
  • Used Javascript to trigger light/dark modes and tab navigation in the tool.
  • UI/UX direction for application.
Logo
Primary Color
Secondary Color

Hover or tap the Logo, Primary, and Secondary Colors.

Visit PACER Website