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.

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):

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.

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)

Storyboard Sample

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.

User Personas

Primary and Secondary User Persona Examples

Personas are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product. Personas are most often used as part of a user-centered design process for designing software or online applications, in which the goals, desires, and limitations of the user are considered when designing the product.  The above link provides a pdf with a primary and a secondary user profile I created while working on the FalconNet project for Bentley University.