117 Words

Notable

An app that allows for quick detailed design feedback on interface screens.




You can say we're junkies when it comes to feedback. It's in our DNA. Over the years, we've spent a lot of time thinking about what goes into giving and soliciting good feedback. It hasn't always been pork chops and applesauce. There was a time when it was a real pain in the butt to exchange quick feedback on websites that were in constant flux.

Let's go back to 2009. Yeah, there were a lot of useful tools out there — such as Photoshop, Powerpoint, a few screen-capture tools, and email — but they weren't great for getting speedy feedback on websites. They just didn't get the job done. So we lit a photon torpedo under our butts and got to work, determined to solve this problem, not only for us but for others too. Our solution to the problem — Notable.

Taking Note: From Sketch to Photoshop

When it came to working on our first web app, we applied the same design methods that we'd use on a client project. Notable began life as a series of sketches.

An early sketch of Notable's workflow.

We typically don't do many sitemaps as part of our design process, but we did one for Notable. Check out the sitemap below for the teaser site:



After sketching, we also did a few early mockups in photoshop.

An early photoshop mockup.

After months of prototyping our solution, Notable, our first web-based app, finally took shape. Then we unleashed the app to the world and the feedback poured in, which meant back to the drawing board to give the app a fine polish. Or, in design parlance: iterate, iterate and iterate again.

A Tale of Visual Annotations

After iterating and rolling out a sexy new change to the screenshot annotation toolbar, we noticed our note overlays were a bit anemic. Next to the slick new toolbars, the overlays looked like a beat-up old Ford Pinto. So yeah, we had to give it a total overhaul. See the problem wasn't just the notes weren't sexy enough, there were also some major usability problems. The visual overlays put a heavy yellow hue on the selected section, which is great from a detection perspective and terrible from a visual feedback perspective.

But we didn't want to spend a lot of time procrastinating on the problem. So we established a time constraint to prevent us going down a hundred different roads and to quickly get to the heart of the problem. We knew that we wanted to fix the overlays and what the rebooted ones needed to do:

  • Not obscure the visual design hue
  • Clearly call attention to where the notes were on the page
  • Be easily resized and have clear selection and focus states
  • Look awesome

Take a look at these three iterations that we came up with before the final mockup:





Once we've got the page element started, we burn through iterations quickly, grabbing a layer set and riffing on it again and again like a jazz groove until we've built up a hefty set of options and refinements. This is how we roll — getting a good batch of ideas so that we can make an informed decision and execute it. After some back and forth with the team, we came up with this final mockup:



Make It So, Number One

While the project took only a couple of days, we managed to pick up some sweet CSS techniques once we implemented the design. Since our solution wasn't too technically complex, we were able to take advantage of new CSS techniques that degrade cleanly to older browsers. Let's take a closer look at what we did.

Notable's note overlays were composed of two main elements: an outer border div and an inner overlay div. The overlay was the easy part since we were able to use a PNG overlay to create the glass sheen effect. That kept the overlay pinned to the top-left of the div so we didn't have to worry about it scaling out to something enormous.

The border div had as its background a 1x1 px white PNG, which created the overlay itself. Combined with the shine overlay, we got our glass effect. The border div also had a border-radius that rounds the edges. We also put a -box-shadow so the notes being created or edited would jump off the page.

Getting Jiggy With The Border-Image

We had a heckuv a time with the gradient on the border. But after getting jiggy with it, the gradient turned out to be the most fun to fix. Take a look at the mockups or the live code below — the notes have a 4px border that fades from bright orange to a darker shade as you go from top to bottom. Instead of a canvas KO, we used a border-image instead, which was a really versatile but slightly tricky CSS property.

The basic gist of the border-image was that you can set an image of your choosing as the overlay for the border of an object, but it turned out to be really tricky.

What happened was that the web browser took the image and divided it into 9 equal section, a 3x3 grid. That took the top-left section and made the top-left border corner, then it took the top middle and stretched it across the top border, and around the entire object. What was tricky was that it did the same for the center of an image, stretching it across the entire object.



In any case, we needed to cut out the middle, or it would obscure the glassy overlay. Our border image ws created with a 15x15 image with:

  • The middle 5x5 square removed (or completely transparent)
  • The top 5 and and bottom 5 pixels as solid colors (they were such a small part of the overlay that they don't need to be a gradient)
  • The left center and right center 5x5px sections contained the actual gradient we stretched across the left and right hand borders.


The border-image property only had a few values: image source, width (on all sides) and the method of applying the image. All in all, it turned out fraking awesome.

Going Mobile

The implementation of our annotation boarders wasn't the only opportunity we had to improve Notable. Knowing that mobile internet usage would soon blow desktop usage out of the water, we knew that users had to have a quick and easy way to capture and upload mobile images directly to Notable. After all, we might notice something funky about our own sites and don't always have access to a desktop or laptop computer.

Of course, we could snap a screenshot then email it, wait until we get to a desktop and then upload it to Notable. However, by that time, we might have forgotten what we actually wanted to say about what we saw. Or inspiration hits us and we quickly sketch our idea on a nearby whiteboard. Same problem exits. We'd snap a photo, email it then wait till we get to a desktop to upload it. Or we may be lying in bed and inspiration strikes, so we hastily sketch our idea on the back of a receipt. If we don't snap a picture of it then, the slip of paper might get accidentally tossed out, taking our dash of inspiration with it.

To solve this, we made Notable portable … sort of. We created the Notable iPhone Uploader so people can capture full-length mobile webpages, take screenshots of your native app screens or quickly snap a photo of your whiteboard sketches then upload them directly to your Notable account.

Getting Some Love

Notable was the first addition to our product family, and led to several other siblings, like Verify. Since Notable's release to the public, the response has been phenomenal. Several online blogs, publications and Twitter users all showed us some love and appreciation. We even got an awesome write-up in The New York Times. We also picked up some noteworthy Notable customers as well, such as Twitter and Mozilla. Here's Doug Camplejohn, CEO of FlipTop talking about how much he loves Notable:

Notable was the first paid-app we did. It was soon followed by Verify, which allows people to quickly collect and analyze user feedback on screens or mockups. Our family of apps has grown to include Influence and Solidify, both which are currently in private release. Of course, you can still try the app that started it all ...

Sign Up for Notable


Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×