Squeehod
Organization for the early stages of design

Duration
4 months

Skills & tools
Processing
Illustrator
Iterative design

Deliverables
Prototype
Design document
Poster
Presentation
squeehod poster
Overview
Squeehod is a project I completed for the final design project (Capstone) in the M.S. in Human-Computer Interaction program at Indiana University. I started by researching complex interface design and the tools designers use to design information-rich interfaces. It became clear that a key part of the design process, the early, brainstorming stages, are largely ignored in terms of tools. Squeehod is a tool created to help designers work though the early stages of the design process.

Process
I began with a literature review to understand research done in the area of complex interface design and discovered that there wasn't much. From there I conducted user research to understand what people want in a complex interface. Using the insight that good UI design depends on a solid foundation, which occurs in the early stages of design (before the aesthetics), I began iterating through ideas for a tool to aid designers during the brainstorming stages of design.

Once I had the general concept, I created a paper prototype to use in user testing. User feedback led to a number of design changes and greatly improved the final design. Finally, a high fidelity prototype was created and presented as my Capstone project for my master's degree.

Want to learn more about the prototype? >>

Prototype
I chose to build the high fidelity prototype for Squeehod using Processing. I chose Processing because of its ability to create sophisticated visuals and behaviors (dragging/dropping, saving screenshots, etc.). Simple elements such as the page outline, bookmarks, image borders, text, etc. were created within Processing. More complex elements and images - such as icons and Post-It notes - were created in Illustrator and Photoshop and imported into the sketch. To see the prototype in action, take a look at the video below (note: video does not have sound).


Features
Squeehod was created as a place for designers to brainstorm, take notes, iterate on ideas, create affinity diagrams, etc. Moreover, it makes organizing these ideas and sketches easy. Key features of Squeehod include:
  • Searchable sketchbook (the name for a group of pages)
  • Tools for creating/editing/recording affinity diagrams
  • Whiteboard (best with a stylus)
  • Snapshot tool for preserving page contents
  • Tagging of images and links for easy searching
  • Drag and drop capabilities
Hide the prototype >>