Quilt Design for iPad

A prior co-worker and friend and I worked together on an iPad app for people to design quilts with. He had started work on it, informed by relatives’ quilting experience, and I joined to work on interaction and visual design.

Later I brought some lean startup approaches, prioritizing risks (e.g., could we find a retail partner?) and testing hypotheses (e.g., an online retailer with an existing affiliate program would work with us), which my collaborator hadn’t considered.

Early on, we came to a shared understanding of vision:

a pleasant app to curl up with a coffee and explore quilt designs, which would also take care of the fiddly arithmetic and other non-creative activities so that a quilter could go from design to finished quilt top just focusing on design and craft.

After working through a preliminary interaction framework with pen-on-paper sketches, I put together a clickable prototype with Keynotopia, and recruited a few quilters to test the prototype.

QSKeynotopia

The quilters helped me find a few (in retrospect) obvious oversights (like the missing “New” capability) and refine some concepts and terminology. With confidence that the overall interaction framework was understandable and supported quilters’ goals and mental models, my partner started work in earnest to implement the framework.

In addition to the overall interaction framework, I focused my design work on two areas: quilt block design interaction, and overall visual design.

We considered many approaches to how a user could design a block, and after considering many use and implementation trade-offs, came to the grid-based polygon piece placement that is in the released software.

QSgridBlockEd.png

I put some effort also into the micro-interactions around feedback while a vertex is being moved, including creating an interactive demonstration of what I called “gravity snap” both to give feedback that a vertex was being moved, and to show where the vertex would end up when the finger was lifted. This was built with Codea for iPad.

For the visual design, we wanted to fit in with other iOS apps, minimize the prominence of the UI so that the fabrics and quilts would stay prominent, and give nods to the surfaces a quilter would work on, like a wooden table top and a white plastic cutting surface. This work was done in Adobe Fireworks CS4.

After the software was released and selling, we worked on designing new features (not yet released) and updating the look and feel to fit in with iOS 7. This work was done with Sketch.

Another area of information and graphic design focus was the organization and appearance of the “Quilt Info” pages, a printable document meant to enable an experienced quilter to easily get the right amounts of fabric, cut and assemble pieces for blocks, and assemble the entire quilt top. The preliminary design work was done in Pages ‘09

 

 


Carl Seglem Interaction Design Logo

Carl Seglem Portfolio

Resume

Big Data, Enterprise, and Complex Systems

Lean & Agile

Mobile

Patents

 


 

 

 

Advertisements