UI

interactive prototype: N.C. Farmworkers’ App

Screencap of NC Farmworkers' App (Interactive Prototype)

The interactive prototype for the N.C. Farmworkers’ App was created using rapid prototyping techniques, HTML5, and the Bootstrap JavaScript/CSS framework.

It placed first out of five entries at the Hackcess to Justice (NC) Competition in Raleigh.

web application: DSP Wizard

I conceived, designed and coded the DSP Wizard to boost interest in an existing product, the Decision Style Profile (DSP) assessment.

Start Message for DSPW

The DSP Profile® evaluates the appropriateness with which participants include others in decision-making processes, as well as the extent to which participants consider five critical factors in those processes. By developing the DSP Wizard as an in-house, mobile web application, we were able to save a lot of $$$ in native development costs.

Responsive Design

I designed this application to be usable on practically anything — iPhones, Android phones, desktop PCs, Blackberries — there was even a facebook version of the app.

Everything about the app is designed for ease of use.  For example, I sized the fonts in ems instead of pixels to take advantages of users’ default system settings.

The application is coded in JavaScript, HTML5, and CSS.  The only server-side code is the copyright date stamp (PHP).

I developed a version using jQuery UI; however, the buttons were slow to respond, so the final version is pure JavaScript.

web application: Online Assessment Center

I re-designed the front end of a customer-facing application, the Online Assessment Center (OAC), to bring it into the current, responsive, post-PC era.

The Old Way

For example, here is the existing login screen:

Old OAC Login (I didn't do this!)
Old OAC Login (I didn’t do this!)

The existing login screen was designed for desktop PCs with screen sizes that haven’t been popular since the 1990s.

Like many legacy applications, it was developed using the standards of the day, and it performed well for many years.  Time passed, and a need arose for it to become more responsive to new devices.  Pre-overhaul, all of the font sizes, widths, etc. are fixed, so it will not expand to fit today’s larger screens, and it is practically unusable on smaller tablets and phones.

My Solution

New OAC Login
New OAC Login

I designed (and coded!) an elegant, responsive solution that will work on practically any device.

More Responsive Design

Again, I sized the fonts and controls in ems to ensure that they are always readable.  I also updated the color palette and reduced the “noise” distracting from the user experience.

I also fixed UX problems throughout the site  — most notably, one of Jakob Neilsen’s famous UX design heuristics requires that we always show users the system status.  Accordingly, the new version states “You are not logged in.” prominently (but not obtrusively) at the top of the screen to show system status. (When you do log in, the system displays “Welcome, {{your name}}.).

New OAC with Completed Menu Item
New OAC with Menu Item Dynamically Marked “Completed”

Although this was a UI project, it required extensive editing of server-side code. For example, the system-status text is stored in a PHP array so that users will see this message in their own language — French, Spanish, German etc. Front end languages were HTML5, CSS, and JavaScript/jQuery.

In fact, practically all of the text in the application is generated dynamically by PHP.  For example, when a user completes an assessment and returns to the main menu, that PHP generates the HTML with a “completed” CSS attribute on that item.

My overhauled version of this web application is fully functioning on our development server. Translation: “It works!”.

web application: The Exchange

Large corporations and government agencies will often use business simulations to teach their employees to work together better.

I served as lead front-end/UI developer and second back-end developer for the web application supporting a simulation called “The Exchange“.

The Exchange Web App
The Exchange Web App

This web app features PHP on the back end and extensive jQuery.