Procrastinate

I have found myself lacking motivation to focus on my academics lately.  I attribute this to a sense of (temporary) closure to many arcs of my research work.  For example, my joint research on qualifying human observation accuracy was recently presented at the CogSIMA conference in Miami Beach.  So rather than get back into work that was started a while back (or work on my dissertation proposal which still needs a defined topic) I decided to create the “Son of Grumm” paper toy seen above.  Ironically he is standing on a paper that I should probably have been reading instead.

I got the template for the model from an amazing book I picked up at Urban Outfitters on sale.  Grumm isn’t the first model I’ve created, but he’s my favorite so far, especially because he didn’t have any curved cuts.  I find that putting together these models is quite enjoyable; it’s a nice combination of relaxing + rewarding (when you’re done).  My next step is to assemble the Howl’s Moving Caster model; however, I’m also reading up on creating my own models using pepakura designer freeware.  I’ll need to come up with a good idea for what to design first though.   I also think that from a usability/human factors standpoint, if I can get this software to work out well it could become a useful tool for rapid prototyping of 3D objects.   Excelsior!

Back to reading the paper for now though – Son of Grumm has taken his spot guarding my trackball.

Read More...

Design of an eTextbook

This project was completed as a requirement for cognitive engineering course in my Ph.D. program.  It was a team project focused on developing early design requirements for an eTextbook (i.e., a digital solution to physical textbooks).  Because of the many tasks that current physical textbooks support (e.g., annotation, bookmarking, highlighting, etc.) and the many different ways students (and faculty) interact with them, our team adopted a work domain analysis to develop an abstraction hierarchy.

Work domain analysis is part of the cognitive work analysis (CWA) methodology which is unique compared to more traditional engineering methods as it focuses on identifying the requirements, constraints, and affordances for cognitive work in a domain.  CWA was originally proposed by Rasmussen et al. (1994) and further refined by Vicente (1999) as a means to support the design of complex systems that would be more adaptable under unanticipated operating conditions.   Since its original application to the design of process control systems, CWA has been adapted and successfully applied to other complex domains and systems.  Across these domains and systems, CWA has effectively been shown to support the design of novel interface displays through its ability to produce models of work objectives combined with constraints and affordances that inhibit or support those objectives.  Additionally, as Bisantz and Roth (2003) illustrated, CWA is particularly effective for design of novel systems requiring adaptability based on unanticipated domain conditions.

The final report generated by my team, along with a design process overview and final recommendations, can be viewed below.

Read More...

Classic IE for the Win.

With my first dissertation committee meeting behind me, my latest research project all written up and submitted to CogSIMA 2011, and my consulting work in a momentary lull I’ve found myself without any pressing deadlines to motivate a strong focus on work.  The result of this state is a shift towards finding little problems to solve around my world.  For example, rather than reading a few extra journal articles I need to read, I took a 25 minute break to create a shadowboard (YEAH CLASSIC IE) in my desk drawer using corkboard, a sharpie, and some paperclips.  The main purpose of this endeavor was to keep all my desk stuff from flying all over the place when I shut/open the drawer which drives me crazy.

So, today I solved this problem and am pleased with the result.  Also, on a side note, the white-out is for painting white stuff- not because I make mistakes ;)

Read More...

Wireframes and Site Architecture

As one of the larger projects i’ve taken on in my freelance work, I expected the task of designing a product customization wizard for a company like Staples to be dominated by business minded persons focused only on their requirements.  I am pleased to say however, that after working for several months on designing a comprehensive suite of tools, the team was a pleasure to work with and was one of the most enjoyable projects i’ve had the opportunity to be a part of.  Everyone was open to out of the box ideas, and took the time to understand the usability considerations that need to go into designing a consumer facing application, especially given the complexity of this one.  It really made the project an enjoyable and just downright fun experience thanks to the people and process that was followed.

The project consisted of planning and designing a web-based application used by consumers or businesses to purchase personalized promotional products (you can see the live version here, but need to select a product and choose “customize” to get into the application).  I lead the information architecture, site design & wireframing efforts from the project’s early stages through the first couple rounds of usability testing and hand-off for initial developing.  It was a great experience to be able to inject usability and user experience considerations right from the start, which made my life a lot easier throughout the project.   Key tasks that I was responsible for during the project included the following:

  • Competitor evaluation to determine best practices, common usability issues, and opportunities for differentiation
  • Lead white board sessions to sketch out low fidelity wireframes with a cross-functional project team
  • Directed the information architecture of the site and created a detailed site flow combining wireframes and interactions to ensure a positive user experience
  • Worked with Staples’ usability/user experience team to plan and conduct usability testing on two rounds of site prototypes
  • Designed click-through HTML prototype using Dreamweaver for use in usability testing

You can view a sample of the wireframes embedded within a site flow/interaction document using the plug-in below (requires flash):

Read More...

Cell Phone Menu Structure – Visio

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.

Read More...

Information Graphic – BC Watch

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.

Read More...

Flash Wireframes/Prototypes – Cellular Phone UI

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.

 

Read More...

Hand Drawn Wireframe – Usability Portal

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.

Read More...

Visio Wireframes – FalconNet

The below tool shows Visio clickthrough wireframes that were developed to illustrate suggested imnprovements to Bentley’s FalconNet website.  Unfortunately the dynamic aspect of the wireframes can not be utilized with the preview tool below;  however they were designed to allow for interactive usability testing, allowing users to select links and interact with forms as if they were a live site.

Read More...

Powerpoint Wireframes – GreenT Card

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)

Read More...