Our first product, BraidLab is a web application that wishes to do for statistics what Google Docs did for word processing. It’s a collaborative application that allows researchers to share their data and analyses with coworkers.

I worked with two SI alumni on everything from marketing to user research to application development to icon design. We worked collaboratively and iterated quickly. Below is an example of starting with a simple wireframe and iterating on that before moving to HTML, CSS, and JavaScript (click for a larger version):

My main tasks were web design and application development. We used Ruby on Rails as the application layer and jQuery for many of the interactive elements.

BraidLab home page:

Project page:

This interaction map — created for SI 622 (Evaluation of Systems and Services) — shows the structure of the DTE Energy backend. Click for a larger version.

I made this personal infographic using OmniGraffle and data I collected from last.fm and my online calendar. Click for full size.

For SI 658 — Information Architecture — we was tasked with creating the information architecture for KidMall, an interesting idea for a new company that attempts to fill storefronts in the mall and encourage entrepreneurship in children.

Over the semester I worked with one other person to create a ten page report and fifteen minute presentation that detailed our proposals for KidMall’s features, information architecture, and website interactions. Our research involved evaluating potential competitors and conducting interviews.

We started by drawing out the stakeholders and their interactions with the different aspects of the company:

I sketched ideas for parts of the site, like the “Browse” section:

An idea for scheduling — selecting a date on a calendar view and then seeing the open time slots:

Using three sections and progressive disclosure to schedule an in-store session:

Then I created drafts in OmniGraffle and we iterated on them:

The final scheduling wireframe:

We also thought about the site architecture and how customers would use the site:

Final deliverables:

Strategy reportPresentation

This simple group finance website helps small clubs keep track of their individual balances within the larger organization. Players can check what they owe the team at any time, and examine the team costs for tournaments and other shared costs.

I am using the Django framework, and also use the Google Charts API for pie charts. I make use of the sorttable.js library to make all the tables instantly sortable by any column.

How can we make sense of this rich source of data and how do we best present this data to the user?

After brainstorming, sketching, and talking with other SI students, I came up with Timeline, a new way of displaying and interacting with web browsing history.

Browsing history can be a necessity for a number of reasons, but one common motivation is needing to find something visited in the past but don’t having enough information to simply search for it, either using a search engine or the fulltext records of the browser’s history. Perhaps the user only remember that they clicked a link from Amazon.com, or that it yesterday morning between checking their email and doing research at work. These are the use cases that Timeline targets.

Instead of showing web history as a one dimensional list, Timeline includes additional contextual information to help people re-find the pages they were looking for. This information includes:

• the time of day visited
• the duration of the visit
• the browsing path to each page
• whether pages were opened in a new tab or a new window
• whether the page was bookmarked
• the “active browsing track,” or what pages were in focus and which were in the background at any specific point in time

Mockup (click for high-res):

Early whiteboard sketch the introductory SOCHI design jam:

Short video explaining use:

Some probable necessities in the future:

• Controls for resizing the time interval shown.
• A search or filter interface (I’m imagining something like OS X’s System Preferences search, where matches glow and non-matches are dimmed).

This work is licensed under a Creative Commons Attribution 3.0 United States License.