« Creating REWORK Slides on the Road | Main | SXSW Interactive 2011 Panel Picker: Visual Note-Taking 201 »
Tuesday
Aug172010

Designing Pear Note 2.0

Pear NoteOn August 9th 2010, when Useful Fruit's app, Pear Note 2.0 was released, I realized one of my design dreams — helping an independent developer redesign a Mac application from the ground up. This is the story of the redesign process.

In 2009 I helped Chad Sellers of Useful Fruit Software to rebrand his independent software company.

I had a great time developing his new identity and now Chad needed help redesigning his flagship note-taking app, Pear Note. The timing was perfect, so Chad hired me on to begin the process of redesign.

Pear Note 1.0

The original Pear Note 1 application had tons of promise. What the application needed was an updated user interface to match its solid functionality.

recording.jpg

Goals and Plans

Before starting with any design work, I first talked at length with Chad about his overall goals for Pear Note, what areas he liked, which areas he felt needed improvement and new features he wanted to add to the app.

I spent time using and reviewing Pear Note myself, so I could suggest ideas for areas I saw could be improved, refined and updated.

Our goals for 2.0:

• Maintain the solid concepts and structure of Pear Note 1 — recording audio and video while typing and syncing with slide decks was a key feature neither Chad or I wanted to lose in a redesign.

• Updated UI controls & icons — the original version featured a collection of controls Chad was able to put together to make the app work, but there was huge potential for a sleeker design without losing any functionality.

• Addition of new UI controls and features — speed control, a jump back 30 seconds feature and document sharing to the web, so Mac users could share their Pear Note files with anyone with a web browser.

• Improvement of the search feature — in version 1 search was an icon that activated a heads-up style dark gray menu. We both wanted to add a search field in the main window with lightning fast and readable results.

• Better structure and status areas — I wanted to add an iTunes-styled info/control bar for playback, unified audio and video controls and an info status bar at the bottom of the main window with helpful, contextual information.

UI Pencil Sketch Concepts

As with all of my design projects, I like to start in pencil on paper. Using this approach helps me loosen up and explore ideas without fearing software limitations or crashes — sketching frees me to flow.

I began by sketching out a rough idea of the main window of Pear Note in pencil, with updated controls, an iTunes style playback info/control bar, unification of the right column and the info bar along the bottom of the window:

Pear Note 2.0 Sketch Wireframe v1

The original time control bar and handle control looked too much like a standard volume slider, so I put emphasis on this area first.

old-info-playback-control.png

Pear Note creates blended notes that synchronize text, audio, video and slides, so I wanted a control that could allow a user to see where they were in the note file, then slide back and forth to easily location a certain section of notes.

iTunes-Scrobber.png

Because the playback was very similar to music or podcast playback, I was inspired by Ui concepts being used in iTunes to present status and a grab-able control bar.

playback-info-sketch.png

I really liked that the iTunes status bar made it clear what part of a track had been played and what was left — another useful feature for a synced notes document.

Simplifications

Another simplification I wanted to deal with was the mixed controls in the right side of the app. In Pear Note version 1, there was a section for Recording Options, separated from Audio and Video.

right-col-controls.png

I felt recording applied to both of these functions and proposed the idea of making the controls identical by offering recording controls in both Audio and Video areas, completely eliminating the separate Recording section in the application.

unified-right-area.png

Helpful Features

Finally, having used various Mac applications with status bars at the base of their windows (Safari, Postbox, Mars Edit, etc.) I wanted to suggest the idea of a helpful, contextual notes status bar at the bottom of the Pear Note main window.

I suggested the date notes were captured, character count and recorded time might be handy to have for a heavy note-taker and would help visually finish off the main window in a way the plain window of Pear Note 1 hadn't.

sketch-infobar.png

Sketching Controls, Take 2

In the next round of sketches I focused on two control areas — record and playback controls and the playback time status controls.

After some research, I wanted to create more standard style playback controls with a bit of shine and even explored the idea of a rounded record button to help set it off from the other controls.

Pear Note 2.0 Sketch Wireframe v2

Chad wasn't a fan of the rounded button, so we moved away from that direction, though he really liked the idea of a unified record and playback control.

As for the playback time status controls, we wanted to try an idea that used the full width of the main window as squeezing this control into a single top row of controls tended to make it small, a potential issue on minimized windows.

I sketched out the idea of moving this control just below the record and playback controls, and making it wide and short, with iTunes influences. Small window sizes would limit space on this design, but to a lesser degree than had we tried to jam it into a single bar along the top of the window.

wide-scrobber.png

At this point both Chad and I were satisfied with the progress made in sketches, so I moved to Fireworks to create mockup screens.

Mockup Screens

In Fireworks, I was able to explore various styles for buttons, play with the elements in actual size and generally get a feel for how the UI might actually work.

I started with a very simple v1 mockup and dark controls, a stylized playback time control and concepts for the audio recording meter:

Pear-Note-UI-v1.png

In the next revision I explored controls that were dark, that had shine and some with no shine at all, referencing various controls in Apple's iDVD application.

I found it helpful to grab screenshots of elements for reference and drop them right into the mockup for comparison:

Pear-Note-UI-v2.1.png

You can see that these early mockups don't even feature the right column or footer ideas built yet — those came a bit later.

In this next version you'll see I've settled on a subtle shine for the record and playback controls have started exploring icons and the search bar appearances, filled out the right column and the footer area:

Pear-Note-UI-v3.5a.png

You'll also notice the idea of line numbers I proposed in these mockups. While Chad liked the idea, it wasn't critical to the app and was removed from scope to allow effort to be placed on more critical features.

As I progressed, more details were refined and finalized, until reaching the last mockup before extracting icons and elements as PNG graphics for Chad to use in the actual application. Note the subtle changes in this last screen, including details like the small icons in the status bar at the base of the main window:

Pear-Note-UI-v5.1-Playback.png

Production Art

I used Opacity for many of the graphic elements, an app Chad used and I'd heard of from Jon Hicks in his search to replace Fireworks. It's a different app, so it took some adaptation, but the nice part for Chad is, the graphics I created in Opacity helped Chad generate Cocoa code that he used directly in Pear Note.

In some cases it made more sense to stick with Fireworks and generate PNGs. Mostly these were cases where Opacity or my skills with the tool weren't flexible/good enough to produce elements in the way I wanted them to appear, or where it was simply quicker to export from Fireworks than redo graphics in Opacity.

Final Development

Here is the completed Ui design of the app itself after revisions, exported graphics and actual building of the app by Chad:

Final-Pear-Note-UI.png

Final record and playback controls:

Final-Controls.png

Right sidebar:

right-sidebar.png

Bottom info status bar:

infobar.png

You may notice the Share icon in the final UI, which we worked on later in the project. This feature allows a Pear Note user to share their synced text/audio/video/slides as an HTML page with playback for anyone with a browser — more on that next.

Designing the Sharing Feature and Web Player

My last UI design to tackle was the Share menu, which lets Pear Note users export Pear Note files to web players with text and embedded audio, video and slides that can be viewed on any computer with a browser.

First, we focused on the player, going through revisions until we had a design that worked and felt like an extension of the desktop app while still being a web player:

PN-Web-Player-FINAL-Available.png

Then we worked on a dialog box to show users how to setup sharing that could also take advantage of Dropbox, a web-based storage service:

Share-Menu-Dialog-v2a.png

Project Satisfaction

Now Pear Note 2 is released, and I'm excited to see all of the ideas, thinking and design coming together in the new version of the product.

It's funny, because as I've progressed through this experience I've moved from feeling like a designer hired to produce design ideas and elements to more of a partner in creating a revamped app — I really love that feeling.

It felt great being able to recommend friends Brian Artka to solve the challenge of a web-based player with many moving parts in HTML5 and Tyler Dunn to redesign the Useful Fruit website to coincide with the release of Pear Note 2.0.

Buy Pear Note 2.0

If you take notes often or even a little, please check out Pear Note. I've grown to find it an indispensable tool for capturing typed notes, graphics, audio, video and slides all in a single blended document.

I may be biased about Pear Note's UI design as the designer, but I was a user and fan long before I'd considered doing the UI redesign. It's simply a great application.

For $40 it's really a steal of an app that you'll quickly find indispensable too. If you have a family, check out the Family License for $55 and for small companies, contact Chad directly for great business licensing deals customized to your needs.

Thanks!

I hope this article has been informative and provides a small glimpse into the design of application user interfaces. It's challenging work, but very rewarding.

I'm happy Chad decided to work with me on the Pear Note 2.0 redesign project.

Thanks Chad!

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.