On 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.
This is the mobile weblog edition of visual designer Mike Rohde, who blogs about design, writing, mobile computing, technology, travel, cycling, books, music and other stuff.
On 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.
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.
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:
The original time control bar and handle control looked too much like a standard volume slider, so I put emphasis on this area first.
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.
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.
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.
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.
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.
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.
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.
At this point both Chad and I were satisfied with the progress made in sketches, so I moved to Fireworks to create mockup screens.
I started with a very simple v1 mockup and dark controls, a stylized playback time control and concepts for the audio recording meter:
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:
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:
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:
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 record and playback controls:
Right sidebar:
Bottom info status bar:
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.
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:
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:
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.
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.
I'm happy Chad decided to work with me on the Pear Note 2.0 redesign project.
Thanks Chad!
It's SXSW Interactive 2011 Panel Picker time!
I've proposed a session for Visual Note-Taking 201, featuring the same crew of good friends from Visual Note-Taking 101 — Dave Gray, Sunni Brown and Austin Kleon, to talk about more advanced techniques.
Here are more details:
In Visual Note-Taking 201, the same team of visual note-takers will share their advanced visual note-taking techniques. They will share ideas on capturing complex and abstract ideas on paper, in clear understandable ways.
Once again, the audience can draw along, learning new techniques on the spot. In this interactive session you will learn how to create infographic style visual notes, embedding rich meaning into simple and understandable packages of information.
Panelists will share their approaches to listening and information processing when capturing live notes, suggest their preferred tools of the trade and talk about effective ways to share visual notes once they've been captured.
This panel will also feature an extended Q&A time to answer questions from the audience on best practices for visual note-taking and challenges audience members may have faced in their own visual note-taking experiences.
Please go vote for Visual Note-Taking 201!
(login/signup at sxsw.com required)
Above are the sketchnotes I captured from my dinner at the Chez Panisse Cafe in Berkeley, CA, captured July 2010. I was on a Gomoll Research + Design business trip with Kate Gomoll and Kris Hunt, when I created these.
I brought a Moleskine sketchbook along with a 0.7mm gel pen (which is always in my pocket) so I could try capturing a dinner as a sketchnote. I've already captured events, travel and my iPhone unboxing — why not my first ever dinner at Chez Panisse?
Enjoyment of the food came first, of course. I took photos of each dish with my iPhone for later reference. No sense letting wonderful food like this grow cold while sketching it (I was of course very careful not to spill my food on my Moleskine).
Later I learned that people seated at the next table were interested in my sketches, though they never came over to get a closer look. The waiter was very interested and suggested that I email him my work (which I'm about to do after posting this article).
Having this little sketchnote to refer to after the fact has provided me with a time capsule of rich memories. I can still taste the tartness of the boysenberries of the desert when I look at this sketchnote. Mmmm, good!
© 1993-2010 Mike Rohde, Some Rights Reserved | 9rules Network