This diagram was created to illustrate the menu process flow and available features for 3 different cellular phones being developed which would used shared software. You can view the implementation of these by looking at the wireframes which are also part of my portfolio.
The above link is a drawing tha was created as an as-built version of a local New England area hospital. This PDF is one of two floors that were created based on existing blueprints that needed updating and digitization for future planning.
This drawing was produced as a new layout for the expansion of a Massachusetts based medical device manufacturer. The roughly 160K sq ft building was designed for end-to-end production flow efficiencies. The layout was created to be a macro/micro view of the facility as well as equipment assests and product flows.
The above information graphic was created as part of a project to develop a watch which assisted in the use of birth control pills to help prevent user error. The information graphic is meant to illustrate how to change pill cartridges in the watch.
Information graphics or infographics are visual representations of information, data or knowledge. These graphics are used anywhere where information needs to be explained quickly or simply, such as in signs, maps, journalism, technical writing, and education.
I created these wireframes as part of my senior capstone design project for Northeastern University. The wireframes were meant to be upgraded interfaces for 3 user profiles: The Grandma, The Dad and The 20-Something College student. The motorola flash interface was created to mimic a popular phone at the time so that user testing sessions could be used to create baseline task completion times and usability ratings.
You can use the flash menus below as you would a normal cell phone basically. The Motorola version however has limited functions to specific tasks that were required for the usability sessions.
This wireframe was created to illustrate a concept for a usability portal to be used as a central hub for UI/IA experts. To show basic interactions post-it notes were used which showed how different widgets in the interface changed based on simulated interactions. The blue numbers represent annotations that explained different aspects of the wireframe for users.
FalconNet Visio Wireframes (PDF Version)
The above show visio clickthrough wireframes that were developed to illustrate suggested imnprovements to Bentley’s FalconNet website. The PDF version is provided for viewers who don’t have Visio access but it is not interactive.
This prototype is meant to show the registration process for signing-up to use a GreenT Card™. The GreenT Card™ is a new design concept that would be used by Boston area inhabitants to pay for public transportation while at the same time earning discounts to local businesses and to public transportation by displaying Green tendencies (e.g., using public transportation, walking, car-pooling, etc…). Users earn points based on their ‘greenness’ which allow them to gain access to the discounts. The website is used to create a profile to track your greenness versus other users as well as to view discounts that become available at different point thresholds. This was created as a project for a prototyping course at Bentley University as a part of a team of 4.
You can download the wireframe powerpoint file using the link below, but note that not all functionality has been built in as the wireframes were meant to illustrate the process of registering for a GreenT Card and showing some basic features.
GreenT Card Website Wireframes (*.zip format with powerpoint show inside)
This example is a simple storyboard created to illustrate the key uses of a special task logging tablet PC application that could be used during usability test moderation to facilitate easy session note capture.
Storyboards are graphic organizers such as a series of illustrations or images displayed in sequence for the purpose of previsualizing a motion graphic or interactive media sequence, including website interactivity.
GOMS-KLM Digg.com Registration Process Report
This above example shows the application of GOMS-KLM to the Digg.Com registration process. The first version analyzes the project as-is with a simple use-case. The second analysis shows an improved process flow to reduce task time with he same use-case. This was created as a sample of the GOMS methodology for a class I took at Bentley.
KLM (or KLM-GOMS) stands for Keystroke-Level Model, a hard science approach to human–computer interaction (HCI), based on CMN-GOMS. The Keystroke-Level Model is an 11 step method that can be used by individuals or companies seeking ways to estimate the time it takes to complete simple data input tasks using a computer and mouse.