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

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.

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.

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.

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)