portfolio

sample user experience deliverables

wireframes:
a grayscale skeleton of the proposed page design.
A wireframe can be a basic sketch of a design solution, or a fully annotated and highly detailed specification. Wireframes sometimes indicate preferred interaction design (i.e. “open a popup layer”), but they do not dictate visual design.

Wireframes are a very efficient way to collect and synthesize design requirements, and obtain high-level approval, before investing time in visual design and programming.
flow diagram:
illustrates the path/s the user can take through an application or site. Flow diagrams account for user actions (clicking on navigation elements) as well as application behaviors, such as the messaging that is presented when a user tries to access a protected page without being signed in.

Flow diagrams are helpful for illustrating the number of steps required for the user to complete an action. Creating a flow diagram of an existing site can be a useful exercise for illustrating inefficient flows or accidental loops in the user experience.
“wireflow”:
a hybrid of a wireframe and a flow diagram. Shows mini-wireframes of some page elements — like buttons or forms — within the context of a flow diagram.

a selection of site designs (2007 and prior)

Click thumbnail to view larger; hover mouse over image and click Next to view sequence.

Interactive model of tobacco control, for University of Arizona/ERDU, 2007.
Designed model in Flash, with wiki and threaded comments to invite practitioners to contribute.
Virginia Westray, mixed media/enamel artist and custom bookbinder, 2007 redesign.
Revamped previous design to spotlight new artwork. Created animated Flash galleries for art collections, plus a streamlined table-less CSS layout.
AABH Association of Ambulatory Behavioral Healthcare, 2007.
Created graphic design and site structure for association website. I set up the site using WordPress, an open-source CMS (content management system) which will allow the association staff to make site updates themselves. Members can register and, with an approved username and password, access a members-only section.
Joanna Carichner Joanna Carichner, Singing Hands Body Therapy, 2007.
I used WordPress to create a simple, easy-to-use content management system for Joanna’s bodywork and yoga practice. She can update her site easily, and she can extend its functionality as her practice grows.
University of Arizona, 2007.
In order to make research reports available to audiences across the state, I created a document repository site (using Dreamweaver and PHP/MySQL). The limitation to an online collection of PDFs is reduced browsability, so I created a dynamic popup preview (CSS) for each file that draws a thumbnail image from the database.
Arizona Smoker’s Helpline, 2006.
Complete redesign of website, including graphic design, information architecture, navigation, and Javascript interactivity.Where possible I try to provide users information that doesn’t require extra clicks or page redirection. For example, a definitions list provides a CSS tooltip on mouseover, and on the Frequently Asked Questions page, the answer can be opened or closed by clicking on the question; the desired view is maintained for multiple questions, even if the user prints the page.
University of Arizona, 2006.
User interface design for data entry applications. The form includes embedded user assistance (CSS tooltips) as well as PDF documentation.
Intermountain Centers for Human Development, 2005.
Redesign of site for nonprofit agency. Project included graphic design, information architecture, web content development, and user authentication for a staff-only section.
Virginia Westray, bookbinder and enamel artist, 2005.
Graphic design, information architecture, JavaScript image gallery.
Sunnyside Unified School District, 2003.
Created interactive statistics website that presents school district data via database. I included a dynamic bar graph under each data table–based on Edward Tufte’s concept of “sparklines” –to make the data easier to visualize.
GroupSystems.com, 2002.
Corporate website redesign. Created new information architecture and new graphic design elements. I also created a customer support website with searchable knowledgebase, tutorials and documentation.