App Sketchbook in 30 Days, Lessons in Releasing a Product

It’s been a few months since I released the App Sketchbook. Here’s what I’ve learned.

Packing and Shipping

After sending out the first hundred or so sketchbooks I started to receive complaints of damaged books. I had previously been sending the sketchbooks in a padded envelope that was a nice secure fit, relatively inexpensive and easy to seal, label and process with the post office.

Unfortunately, the post office machinery was damaging some of sketchbooks. Sometimes, completely destroying the book and crushing the binding. Although each book comes with tracking, it does not come with insurance. I’ve sent a bunch of new sketchbooks to folks who have received damaged books (at no charge, of course.) Now, the sketchbooks ship in a sturdy cardboard box, very similar to boxes Amazon uses to ship their books.

I was actually able to turn this small problem into a marketing opportunity and purchased a stamp of the App Sketchbook logo, that I use to stamp the logo onto the book boxes in blue ink. Looks more professional and gives me some more visibility for the brand.

World-Wide Adoption

It’s been amazing to watch the App Sketchbook spread and become the worldwide de facto sketchbook for iPhone design. Here’s a map showing the spread of App Sketchbook purchases.

But, unfortunately, there is no cost effective way to send the sketchbooks overseas with minimal cost and relatively short delivery times. I ultimately ended up using USPS International Priority Mail, which is delivered in about 6-10 days anywhere in the world for $12.00. The sketchbook fits into a flate-rate envelope, so the cost is always the same. I add a little bit of bubble wrap to protect the binding and it seems to be performing well.

The best thing for international customers to do is purchase 4-5 books. This keeps the cost at a flat-rate $40 and allows me to use a larger box (Medium Priorty box) with more bubble wrap and wiggle room. This makes for a more cost effective order and a safer shipment. This type of shipment also comes with international tracking from the USPS which has been very helpful.

“Time to Pack the Sketchbooks”

I’d say the next biggest issue I came across is time and money. I actually pack and ship all of the sketchbooks myself (with some occassional help from my twin daughters who run around the house squishing bubble wrap.) Stroud’s Printing, in Roswell, GA, has actually been a great help. The number of orders that came in for the September 15th back-order was quite overwhelming. Stroud’s was able to help by delivering the sketchbooks to me already packaged in their boxes and ready ship.

All payments for the App Sketchbook come through PayPal, it’s the easiest way to get things moving when you have a product to sell online. It’s relatively inexpensive item, so the fees are reasonable. I started using the label printing system in PayPal (which connects to the USPS to print postage.) It seemed to be a little to limited in terms of international shipping so after the first few hundred orders, I switched over to Endicia. I use the Endicia for Mac program which has a great mailing log, allows you to save favorites (since I basically ship a standard item) and allows you to purchase postage directly from the application.

Customer Feedback

Customer feedback is now driving all future versions of the App Sketchbook. I’m very happy to say that negative feedback has been few and far between. The feedback I have received has been more than constructive and has actually influenced the next two versions of the sketchbook. I now have in stock a 50-page version and a 50-page perforated versions. A bunch of customers were complaining that the sketchbook was too thick and didn’t fit comfortably into their laptop bag. It’s fairly thick paper, so it makes for a thick 100-page sketchbook.

I also introduced a perforated version which has been on my list since the I received the first prototype and received feedback from one of my MailChimp colleagues. You can tear out the pages, add them to other project documents, make copies, hang them on a white board, etc. This really makes a great paper prototyping session easier.

Support from a Chimp

How awesome would it be if your employer supported you in ALL aspects of your life? Well, I can say without a doubt, I receive that kind of support from my employer. I currently work at MailChimp in their Design Lab. When I first told them about the sketchbook they were just as excited as I was and commended me on my hard work. Wow. I don’t think I need to say any more about the Rocket Science Group after that.

Taking their support a step further, future shipments of the App Sketchbook will include a coupon from MailChimp. If you’re looking for an email marketing service, you’ve just received a coupon which basically pays for your sketchbook. If not, maybe you know someone who would use it!

Competitors

There have been numerous competitors that have cropped up in the past few months. We’re all basically trying to solve the same problem. Designers and developers have personal preferences, so I would imagine we’ll all be pretty successful. Welcome and good luck!

Posted in General, iphone, sketchbook | Tagged , , , , , | Leave a comment

iPhone Sketchbook, Improve Your Paper Prototyping and App Design

App Sketchbook

App Sketchbook

After being asked to design some iPhone apps and coming up nil on solid design tools, I decided to have my own made. For a few months now I’ve been toying around with the idea of an iPhone templated sketchbook. Finally I’ve release the App Sketchbook.

I had this sketchbook printed for a few reasons:

Sketching Happens in Sketchbooks

I’m a huge fan of sketching and have sketched about 90% of my designs, whether it be logos, websites or iPhone apps. I like pencils, erasers and crushing pieces of paper in my hand, then throwing them out after I draw nonsense on them. Sketching is a solid way to get the bad crazy ideas out of your head until you come up with a good great one. When I was in school, a professor would have us draw 50 thumbnail sketches for a logo before the assignment could be marked complete. About the first 25 of these ideas someone else has already sketched, the next few are probably junk/so-so and then you get to the good stuff.

Developers Like Action

In my experience, when working with a developer, it’s always best to draw out the ideas and do a walk-through of how the app will work. They want to know “What screen comes next?” and “What happens when I click that?” So by quickly sketching out your ideas with a developer siting next to you, the app starts to fall into place. You also get the developer involved in the design process early and he/she gets a feel for your style and vice versa.

The “Interface Builder Trap”

While designing my first iPhone application I fell into what I would call the “Interface Builder Trap.” You start to pick and pull from Interface Builder assets and you start to feel like the HIG has got you by throat. Not the case at all. After letting what I’ve learned from Apple’s guidelines digest, I started to realize that one of the key ingredients to iPhone applications (like Hip-Hop) is flow. You want your app to be the Jay-Z of the app store. The best way to work on your flow is to see your application screens in a series while sketching. So, with that said, the App Sketchbook has 3 templates per page and a lined area to jot down transitions or other important interface notes.

I’m really excited to put the App Sketchbook into action and I’m hoping some of the other talented people I know designing and building applications will get to make use of it as well.

I’d love to hear your feedback on the sketchbook and how I could improve it.

Posted in General | Leave a comment

Get Dropbox, Encourage Collaboration

Store, Sync and Share your files online.

Several months back I stumbled across a great start-up: Dropbox, getdropbox.com. The service allows you to store files and share them across multiple computers. The files are stored with revisions and you’re able to retrieve deleted files and go back to previous versions. Dropbox totally put my thumb drive out of business. What I didn’t realize about Dropbox is how well it would encourage collaboration with other designers.

Dropbox Growls at You

If you’re on a Mac, Dropbox installs Growl (if you don’t already have it installed) when you install their client. This means that whenever you connect to your Dropbox folder, Growl notifications will tell you how many files have been updated, deleted, etc. It will even notify you when you join new shared folders and the files are available on your computer.

These notifications display for all members of a shared folder. So, if I update MyFile.psd in a shared folder, when one of the other members of that folder fire up their computer, they will see that MyFile.psd has been updated via a Growl notification.

This is the key for encouraging collaboration. By adding a few colleagues as members to a shared folder, they will be notified every time I update my in-progress file.

The Friendly “Snoop”

Shortly following a few updates to a work-in-progress Photoshop file, I started to receive emails from one of my colleagues. The emails pointed out some items in the design that they thought needed some work. At first I was taken back – “hey, I’m being snooped on…” But then I realized that the unsolicited feedback was good feedback. This led to a much more polished final design.

By adding a few colleagues to my Dropbox folder, I encouraged them to peek in on what I was working on and do what designers do… provide feedback. We’re curious by nature and we all have different eyes. I’m always throwing the “What are you working on?” question to people I know in the industry.

I most likely would have kept designing, building and then launched the site. A few weeks later, I would have mentioned it to a fellow designer and there’s no doubt in my mind that at least one response would be a “you should have” comment.

Try Dropbox with Fellow Designers

Dropbox is a free service that can allow your friends and collegaues instant access to what you’re working on and in turn, get them to provide feedback early in the design process. Encourage collaboration and polish your good design into a great design.

Posted in Web Design | Tagged , , , , , , | 1 Comment

.Net GridView and Firefox 3 Weirdness

Screen shot of the Rentals.com Manage My Ads table in Firefox 3.

While working on a project at Rentals.com, I came across an odd Firefox 3 issue. A table that had been generated by the .Net GridView was acting all crazy. The table was shifted about half the width of the table to the right and misaligned. The table itself was correctly styled through a targeted surrounding div with an ID.

After playing around with some style adjustments, targeting specific elements, removing padding, removing margins, etc., I couldn’t seem to remove the excess left margin.

I started troubleshooting further and uncovered a few articles about the .Net GridView control and the table, that is ultimately wrapped inside of a div. It didn’t seem like we could target this div with an ID or Class. The only way to target it was a blanket style that attacked all divs contained within the parent above the GridView generated div. Wow, what a mess.

I started to apply different styles through this targeting method and came up on something strange. When a border was applied to the GridView generated div, it moved back into place. Unfortunately, applying a border to every child element meant mayhem for my design.

After applying a transparent border, the magic happens.

At first, I figured it was the border property itself and tried “border: none;”… nothing. Didn’t do the trick. I actually ended up applying a transparent border with a width of 1px (0px or 0 didn’t work either) to every div contained within the parent, which then targeted the GridView generated div and fixed the problem.

What’s a transparent border between friends?

Posted in .Net, Web Design | Tagged , , , , , , | Leave a comment

Twitter Shows More Promise, Gas Locator for Metro Atlanta

In an effort to find gas in the metro Atlanta area, Twitter users are posting their gas findings using the keyword #atlgas. Once again, Twitter is proving to be quite a useful web utility. The time stamp is key, allowing you to get information that is bound to be within minutes of accuracy.

Some posts include notes, such as “BP at Piedmont and Rock Springs now has gas with short wait.” Twitter users with camera phones are even posting pictures of the station with lines to help you get an idea of what you’re up against.

If you’re looking for gas in Atlanta, try this Twitter keyword link: #atlgas

Posted in General | Tagged , , , , | Leave a comment

The New BabyBedding.com Launches

Although extremely long overdue (considering the site launched in June), I thought I should finally post about the launch of BabyBedding.com.

I was hired by Carousel Designs to redesign their web site, BabyBedding.com which offers custom baby bedding and decor products. The team was great to work with and I really feel like the final site is clean, usable and attractive.

A short discussion with one of their founders keyed me in on the fact that they saw a huge boost in traffic and sales, after the launch of their new site. I worked closely with their SEO guru, John Sherrod. I was really pleased by the results of our combined efforts and the development team at Carousel Designs. This project is shaping up to be a huge a success.

Basically, the redesign consisted of a new look-and-feel and an upgrade to their front end code, making the move to XHTML/CSS based layout and design. There really weren’t any groundbreaking pieces to this project, but by updating the front-end code and improving the site content, Carousel Designs was able to achieve the ROI they expected and then some. The site is now easier to navigate, more search engine friendly and considerably lighter in load times than previous versions.

If you’re looking for custom crib bedding, Carousel Designs is definitely worth a look.

Posted in SEO, Web Design | Tagged , , , , , , , | Leave a comment

Making Results Look Like Results

Recently, while working on a refresh of the design for RentList.com I made a statement to a project manager that the “results need to look more like a result.” After FT 2.0 asked what I meant by that statement, I started to think about the idea some more and how to present it with clarity in the future.

It really came down to the fact that the content blocks, which in this case were search results, were not designed in such a way to create individual pieces of content or individual results. The separating design element was a rule, very similar to the background color and it was easily overlooked. This made the results look like a grouping of text.

While trying to think of a physical, visual representation of this concept, I started to think about grocery store isles, specifically the cereal isle. If each and every box of cereal was the exact same color, width, height and used the same fonts or text, how would you know the difference between Raisin Bran and Special K? The fact is that the boxes of cereal in the isle are packed so tightly together, that the only discerning factor is the box design itself.

When designing search results, you don’t necessarly have that luxury of making each individual result look different than the one next to it. You may have different text or images for each result, but there needs to be some clear separation between the results to give them their own space. For RentList.com, I went with a background color and tried to leave a good amount of space between each “shaded box.” But there are other things you can do. Borders, well defined rules, some sort of indicator or dingbat (like in a list of links) are a few. Although I don’t believe Google search results are the perfect example, they do try to experiment with tightly grouping items in a result as well as color for a defining factor which is also an interesting solution.

Posted in Web Design | Tagged , , , , , , | Leave a comment

I want a blog. What do I do?

“Hey Steve, I want to start a blog?” This is often the way a weekend phone call from a good friend starts off. We’ll go into a few (more like twenty) minute conversation about everything from how to set up the blog engine or account, questions about making money with their new blog and where to start. Several sites and technologies have made it dumb simple for anyone to start a blog.

There are some technical challenges that you may need to overcome, but for the most part, starting your own blog is really very simple. When you finally get your blog software setup, either through a Blogger-style, “sign-up and start writing” or a WordPress custom setup, you still have to write something. I’m not really the guy to answer that question for you. If you’re looking for direction on writing, check out Blogging Tips for Beginners over at ProBlogger.net

What I will do is list some steps to get your blog up and running.

Choose a Method

There are two routes to travel when choosing a blog engine: network-hosted or self-hosted.

Join a Blog Network

Network-hosted, as I refer to it, is a blog engine hosted by another company (usually for free.) Blogger.com refer to themselves as “Push Button Publishing.” To get started, visit the network’s home page and sign up for an account. That’s it, done deal. You can then follow the instructions within the system and the site to help you along. Every network is different, some are free, some charge a monthly/yearly fee, some allow you to use your own domain name, ie. unclefranksblog.com and the features will vary. Here are a few I’ve come across:

There are way too many engines to list out in this post, but perhaps one day I’ll find time to do a comparison!

Host the Blog on Your Own

You can also choose to setup your own hosting account, register a domain name and install your own blog software. I can hear people shouting “Help!” as I type this. But don’t worry, most hosting companies have made the installation piece of this puzzle a one-click experience.

My web sites are currently hosted with MediaTemple and I can vouch for their great service. There are many hosting companies out there that offer the same types of services. Look for domain registration, hosting and one-click installations of popular software.

After you have found a hosting company that offers domain name registration, hosting and one-click installations, start by signing up for an account, choosing a hosting level (a basic level is usually a good start for first-time bloggers) and follow their steps to create your account. Fees will range from $10+ per month for a hosting account and about $9 a year for a domain name.

When you log in to your account, usually through a control panel, you should see a link for 1-Click Installations. MediaTemple lists MoveableType (similar to TypePad) and WordPress (exactly like the network-hosted version) as options for blogging.

Follow the instructions for the 1-Click Installation and you’re done. You’ll probably receive an email with your username and password, write those down or keep the email in “Save” folder.

Get Moving!

By no means do I consider this a full tutorial. A simple Google search will bring back plenty of sites that offer blogging tutorials. Hopefully this post will serve as a great starting point for more research on your part. So, get moving!

Posted in Web Tips | Tagged , , , , , | Leave a comment

Atlanta Web Meetup, SEO Talk

Last night I had the opportunity (thanks John Sherrod and Mike) to talk with the Atlanta Web Entrepreneur group about some techniques and practices for SEO-friendly HTML. To all those that were able to attend, thanks for coming out. Unfortunately, ten minutes is not a long period of time when discussing HTML/CSS, but I tried to hit some basics and get some wheels turning.

Here’s a list of topics and links relating to questions I received after the presentations.

Image Replacement (Logos and H1 Tags)

Article About Image Replacement Techniques at mezzoblue.com
This is a great article that covers all techniques going as far back as 2003!

Mod Rewrite and PHP Query Strings

A List Apart article about URLs
Great place to start if you’re concerned with your dynamic URLs

Black Hat Techniques to Avoid, Free Search Engine Tools

Building Findable Websites Chapter Downloads
These are some bonus chapters for download from Building Findable Websites by Aarron Walter. But don’t stop there… go buy the book!

I’ll also be sending over some more links to Mike to be included in the bookmark directory.

Posted in Web Design | Tagged , , , , , , , , , | Leave a comment

TechCrunch Covers ScreamingSports.com, Fantasy Sports Site

As a TechCrunch reader, I was pleased to see that they covered ScreamingSports.com in a recent article. I have the pleasure of designing and working on daily. ScreamingSports.com is a web site that allows you to import your fantasy sports teams from around the web into one site and manage them from one interface. This is great for people who have teams at Yahoo!, ESPN and CBSSportsline or any other site. You’re probably wondering, “How many people have that many fantasy teams?” Well, if I can put it into perspective…

Say your friend at work has started an NFL league on ESPN and invites you. You sign up and you’re rolling. But then, about 2 days later an old college buddy invites you to join his league over at Yahoo!, so you accept and sign-up for that league as well. Now you have 2 teams, 2 sites and ScreamingSports.com starts to make more sense for managing your teams.

Hardcore fantasy sports fans have been signing up at ScreamingSports.com and importing 5-10 teams at one shot. Can you imagine if you had to jump around from site to site to manage all 10 of your teams? Your boss would probably fire you because you wouldn’t be getting any work done.

Posted in Web Design | Tagged , , , , , , | 1 Comment