Robin Stewart: portfolio
icon

Sorting Styles

OmniOutliner for iPad

Summary

It's often better to use standard interface paradigms than to create brand new interaction techniques. OmniOutliner for iPad includes a sophisticated, cascading style system with functionality similar to word processing and spreadsheet programs. I designed a set of "inspector" panels that made it easy for users to find all of the necessary controls.

Goal

OmniOutliner for iPad supports custom row styles, column styles, saved named styles, and cascading styles that depend on other rows in the outline. I was tasked with designing an interface into this functionality that was as simple and user-friendly as possible.

Process

I collaborated with the product manager, the director of user experience, and the VP of engineering. We started with the Mac version of OmniOutliner, which was far more complex than our vision for the iPad version. Through discussions and analyses of use cases, we narrowed the scope to the most important functionality. We talked through some high-level ideas for the interface, and for guidance we carefully studied Apple's productivity apps for iPad. Then I got to work drafting wireframes.

Some of the cut-out panels from the paper prototype

Early on, I printed and cut some of the panels to quickly test whether new users could easily navigate to the controls I asked them to find. These tests validated the overall concept and suggested a few adjustments.

I continued to iterate and get feedback from the other team members. Incrementally I constructed a wireframe document which encompassed all of the inspector panels. This document continued to evolve as we added or adjusted various features of the app.

Excerpt from the wireframes document

Results

A bird's-eye view of the full document is below.

Bird's-eye view of the entire wireframes document