Role: Development Manager and UI Designer of the start-up company BigTreeTop. I created, along with the founder Christian Briggs, the design specification documents and coordinated the development stages with our contractor Recursive Function.

Timeline: May 2006 through September 2007

Details: The UI Design for the BigTreeTop platform evolved along with the business plan. BigTreeTop is a social network for small businesses and their customers. The information architecture is founded on the principle that any user can have multiple roles: business owner, customer or advisor to a business. The interface had to be flexible enough to shift a user between these roles without abrupt context changes.

The design was informed by frequent discussions with local small business owners and customers. The design went through 7 distinct iterations over 1 year. Each iteration was released to a small set of testers and evaluated in terms of usability and concept efficacy.

Client: Center for Innovation in Assessment (web page)

Timeline: July 2007 to August 2007

Process: I was rehired by the Center for Innovation in Assessment to conduct a usability study of their existing I-LRN search service.

I designed a study consisting of four search scenarios of 5 tasks each. Sessions were conducted over the phone with individual participants from across the state of Indiana. Participants were asked to find specific items using the existing interface and to describe their actions aloud as they performed the task.

The tests revealed several points of difficulty in the interface. I delivered the report as a series of recommended changes illustrated by mocked-up screen shots of how the improved interface would appear.

To the left is an image illustrating an non-ideal form design. Link interactive elements are separated across the screen, the order of the list boxes was not intuitive and the search examples suggested erroneous patterns to the users.

Client: Center for Innovation in Assessment ( web page)

<-- Updated UI and UX design

Timeline: May 2007 through July 2007

Process: As a usability consultant on this project, I started by interviewing all relevant stakeholders either in person or over the phone: two Kindergarten teachers, a reading coach, an application trainer and two customer service reps. After the interviews, I arranged an affinity diagramming session with the project lead, the developer and the customer service reps. We identified the most pressing issues that had to be addressed in the redesign.

The conceptual design was tested with a group of current system users and the insights from testing informed a final redesign before QA testing.

<-- UI and UX design before I was contracted

Technology: HTML prototypes in Dreamweaver, CSS style sheets and information diagrams in Visio.

Problems identified : The old web site design (pictured to the left) did not utilize space well. The page must be optimized for 800 by 600 screens because the majority of users are working from small school budgets. All tasks in the old interface were equal in terms of presentation -- infrequent task buttons are located to the most frequent task button in seeming random order. Links styles are inconsistent as well.

Improvements: Through insights gained during interviews, tasks were grouped and presented within these groups using tabs. Infrequent tasks were de-emphasized in the interface. The link styles were standardized as well. Infrequent tasks are supported with click-through, trained wizards. Knowledge of location within the system is now supported with a dynamic breadcrumb that allows for quick context switching, de-emphasizing the need for backing out of pages using the browser.

Client: Indiana University School of Public and Environmental Affairs/ Kelley Business School Program in Social Entrepreneurship, web page

Timeline: Ongoing from May 2006

Collaborator: Nick Quagliara, Graphic Designer

Process: Before designing the site, I had the associate director and organizer participate in a card sort activity with me and my business partner to establish the information architecture of the site.

My partner and I developed five design variants that the program director and organizer could evaluate. The final design is a modification of one of those variants and incorporates the program colors and triangle logo.

Technology: HTML templates in Dreamweaver and CSS style sheets.

Client: United Way of Bloomington

Timeline: Ongoing from October 2006

Details: This is a pro-bono project form my company, Splendid Noise. I am providing suggestions for improving the organization's membership database, newsletter handling and newsletter archiving within a severely restrained budget.

Process: After an initial meeting with the assistant director, I drafted a solutions proposal that suggested three budget-level solutions for every required technology upgrade.

I presented the technology options to the director and associate director in the beginning of December.

Next, I will meet with their tech staff to determine if the desired solution can be implemented on their existing server.

In the future, I will assist with the solution implementation and training.

Client: Center for the Study of Global Change, Indiana University, web page

Timeline: May 2006 to August 2006

Details: The Indiana University library system hosts a League of Nations archive. The site contained a small, static HTML sample of a larger 5000+ citation bibliography.

Process: I was asked to transform the citations from a propriety database format so that users could access the information online.

To complete this project, I consulted with library staff to determine the optimal search criteria. The final design is based on the visual style of the original static page.

Technology: PHP and basic database development in MySQL. The visual design of the site appropriates the former design, but uses CSS instead of tables.

Purpose: Final project for a graduate level course in interface design using the Java Swing library.

Timeline: March 2006 to May 2006

Collaborator: Jacki Bauer, UX Designer

Details: The typical search engine assumes that the user has a clear idea of what they would like to find. But often we define the object of our search through the act of searching. To facilitate this search method, an HCI student and I teamed up to build a search engine in Java (using Google's search API) to assist "vague searches".

Process: The process for this design was quick and iterative. We started with a paper prototype and user feedback evaluations sessions that informed the design of the initial Java prototype. The prototype was again tested with users to determine if the concept was useful and the search style understandable.

Insights: I learned from this project that my initial assumptions regarding usability and utility will not necessarily be shared by other people. The design evaluation sessions were enlightening and, in the end, critical to the evolution of the final product.

Technology: Java and Web Services

Client: Western European Studies Department, Indiana University, web page

Timeline: November 2006 to December 2006

Details: The department asked me to help their staff design a database, search functionality and interface for a movie database they constructed. The dynamic page needed to conform to the existing style of the site.

Process: I established the requirements, the basic structure of the database and the relevant search criteria over two consecutive meetings with the program director and graduate students. The implementation of the design plan was an iterative process whereby I offered rough versions of the interface to the department for review and critique.

Testing: The movie database search page is currently in a beta test phase to determine ease of use, to find bugs and to see if users can find the movies they want.

Technology: PHP & MySQL, XHTML, CSS and Javascript

Description: Affinity diagramming is an opened ended exercise best performed with 3 to 8 people. The goal is to bring into alignment the expectations of various stakeholders in a project by juxtaposing their assumptions with the assumptions of everyone else.

The activity is a formalized event. The color of the sticky notes has significance for creating hierarchy among the ideas the participants provide.

Experience: The image to the left depicts an affinity diagramming session I facilitated for the Center for Innovation in Assessment in Bloomington, Indiana. Present were the system developers, the project manager and two customer service representatives.

Result: The group constructed several significant knowledge points during the session. One that struck them is the importance of parents in supporting the success of a student, but the lack of resources that their current system provided to them. Another insight was the disambiguation of goals that had formerly been subsumed under that category "teacher". It became clear that these goals needed to be divided between a more constricted definition of teacher, reading coaches and principles.

Description: Body storming is an idea-generating activity that uses artifacts to encourage innovative thinking.

Experience: For class projects at the School of Informatics at Indiana University, we frequently used body storming and role playing to generate ideas area concept. In the image to the left, we were exploring uses of mobile computing devices in various social settings. The participants were given low-detailed foamboard mockups. We asked them to first act out a scene, such as interacting in a cafeteria, without technology, then to reenact the scene using our mockups when they felt appropriate.

Result: In this instance, we found that the mobile devices were used to pass short, furtive secrets between friends. Interactions were initiated quickly and completed quickly.

Purpose: Final project for a graduate course in usability and design evaluation

Timeline: September 2006 to December 2006

Collaborators: Kristy Streefkerk, Vamsi Gadey, Steve Marshall

Purpose: This sketch portrays an exploratory prototype of a peer-to-peer image sharing program I designed with a group. I created the sketch for a meeting so that we could have an artifact to refer to while we discussed the interface elements of the system.

Details: This group of paper pieces is a low-fidelity prototype. We built the prototype to test the target user's understanding of tags, which are meta-data descriptors that make searching more accurate. We administered the test by simulating the application with the paper pieces. Each piece represents a particular state of the application as the user navigates it.

Description: Wireframing is the primary form of communication between designers and developers. These artifacts convey high-level elements of a design without distracting details such as colors and fonts.

Example: The image to the left is from a set of the first wireframes we created to explain our vision of BigTreeTop to the developers at Recursive Function.

Knowledge Source: Self-taught

Example: Sim Ranger, a video game prototype we developed for a course in new media design. This example is a mash-up of video from Second Life embedded in a Flash movie. The movie plays as a commercial for the game. Click on the image to watch it! (opens a new window)

For this project, I was involved with the model building in Second Life as well as the final production of the Flash movie.

Collaborators: Vamsi Gadey, Chris Ory, Kristen Hanks

Knowledge Source: Trained with Experience Designers at Oracle

Example: The image to the left depicts part of the information architecture diagram for BigTreeTop.com.

The diagram uses Jesse James Garrett's version of a visual vocabulary for information architecture, a design language for representing high level relationships among entities in a web site.

Description: Usability testing occurs with a prototype of varying fidelity. The purpose of the testing is to gauge the ease of use of particular aspects or task flows in a design.

Example: The image on the left illustrates a usability testing situation that I took part in conducting. We had our participant use a laptop and we provided him or her with one of our Orkut.com accounts. One of the team members facilitated the session. We developed a scenario that tested four common tasks performed when a user first creates an account. The participant's mouse movements were recorded using Camtasia (a screen capture program) and the audio comments were recorded with the same program. We later transcribed all of the audio. The transcriptions and video data, as well as the notes of the observers, were used to analyze the usability tests.

Knowledge Source : Self-taught

Example: This snippet of code comes from the JavaScript that renders the menus in this web site. The styling for the menus is located in the CSS document, although the JavaScript dynamically reassigns classes to certain links when a person surfs to that part of the site.

Knowledge Source: Self-taught

Uses: My knowledge of PHP and MySQL is sufficient for creating interactive, data-driven prototypes. I can write CRUD methods, employ sessions and manipulate forms.