Squeehod
Organization for the early stages of design
Duration
4 monthsSkills & tools
ProcessingIllustrator
Iterative design
Deliverables
PrototypeDesign document
Poster
Presentation
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.
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