• About Me
  • UI Design
  • Writing
  • Graphics
  • Résumé
karenlouiseallen.com

Mobile Web App

A web application designed for remotely monitoring the performance and status of a scientific instrument console. Built with Bootstrap/HTML5/CSS and JavaScript. Targeted for Android devices.

Touch Interface Prototype

Flash Site

A promotional and portfolio site designed and developed in Flash for a New York fashion designer and entrepreneur. This site was later expanded to include an online store.

CSS Frameworks Site

Informational and online catalog site produced using CSS frameworks for an industrial equipment refurbishing company. This site was designed to allow new content to be easily updated by the client.

Flash Banner Ad

Banner ad used to promote a charity campaign. Animation transformed pause, fast-forward and rewind icons into house icons for a Habit for Humanity recruiting and fundraising ad.

Hardware Toolbar

Custom widget designed to provide real-time feedback about the status of the instrument's temperature, spin rate and lock level, as well as provide access to popover windows with more detailed feedback and user controls to adjust those values.

The control on the far left includes an animated icon that indicates whether the air flow that lifts the sample out of the instrument is on or off.

Study Queue Popover

Example of a popover window opened from a toolbar widget. This window gives the user feedback about the status of the experiments being sent to the instrument. The color of the circle adjacent to each experiment changes in real time; yellow if the experiment is in progress, green if the experiment is finished and red if an error occurs.

The colors used to designate each phase of the experiment (sample prescan, experiment prescan, data acquisition) correlate to the colors used in the status bar on the toolbar, so that when the popover is closed, the user still receives valuable information.

Popover with Expanding Log Viewer

An additional level of information is disclosed when the user clicks the Log button at the top of the popover. A slideout panel reveals a detailed log of all the experiments in the queue. Since this level of detail is not often needed, this interface was designed to make it easily available in a way that does not take space away from the primary focus of the application.

Autotune Panel

The software includes an interface panel that allows the user to make adjustments to the instrument. The layout provides feedback and allows the user to adjust values with minimal eye movement and mouse gestures.

Sample Changer

Keeping track of the position and status of samples in the magnet is vital to the user's workflow. This interface dynamically updates the status of the experiment in each position of the sample changer and is linked to the queue widget. A right click on any sample position gives more details about the experiment.

Preferences Dialog Window

An example of a basic dialog window with accordian navigation control.

Shim Interface

Dial control designed to facilitate the art of shimming a magnet. This interface provides access to more than twenty dimensional shim coils and allows the user to see the results on the dial display and save and retrieve favorite settings.

Context-Sensitive Help

Example of a dialogue window with a progressive disclosure popover that unobtrusively provides context-sensitive help.

Control Design Prototypes

Example of proposed artwork for the look and feel of a new interface.

Contour Levels Widget

Highly specialized control to customize the contour levels in 2D spectroscopy. The colors indicate the depth of the contour and correspond to the colors used in the contour maps in the data representation. The user can specify the number of levels to see, enter values for upper and lower limits and choose whether to link positive and negative values by clicking the chain icon at the bottom of the widget.

Wizard Interface

Overlay wizard interface designed to guide novice users through the submission process of a basic experiment.

Lock Level Popover

Popover window that opens from the hardware toolbar and allows the user to quickly adjust lock values without losing access to the data viewer.

Prototype of Phase Dial with Notes

An example of how artwork for a user control is presented to software engineers for development. The mock-up is submitted with detailed notes of requirements.

Applications Directory Manager

Design for a dialog window that allows the user to specify which file directories the application should access. By clicking the button with the arrow icon, the user can swap which set of directories the application accesses first.

Toolbar Prototype

Example of a toolbar used to interact with arrayed data. The various controls affect how the array is displayed.

Help Overlay Page One

Welcome screen and help overlay that provides new users with basic information about the layout of the software.

Help Overlay Page Two

Help overlay that walks new users through the setup of a basic NMR study through submission.

Interface Skins

Mock-up showing proposed design for an interface that offers "light" and "dark" workspace options. Each control is optimized to be attractive and readable in its respective environment.

© 2017 Karen Louise Allen
TOP