Preceden is coming along well. After several different pricing and freemium model variations, I settled on a $19 premium account which lets you surpass the 5-event limit for a free account. That seems to have worked pretty well and the site is bringing it a few hundred dollars a month with little work on my part.

For the last six weeks I’ve been working on a new web app called Lean Designs. It started off as a tool for making decision trees, evolved into a web-based diagramming tool, and is now slated to become a pixel-perfect mockup tool.  It’s similar to Balsamiq, except it’s completely web-based and high fidelity, meaning it doesn’t looked sketched. The editor is built on top of HTML5′s canvas element, which makes it incredibly powerful in terms of what it can render. My short term goal is to build a tool that can quickly create website mockups that are indistinguishable from the actual sites. It’s not there yet, but it’s close.

(Lean Designs, unfortunately, is a temporary name and will not be what the final product is called. I found out this weekend that the name LEANdesign is trademarked by a company that produces related software with the same name. New name is TBD.)

Also of note is that for the past two months I’ve been using a site called AccountableTo, which is currently in private beta. The site, which is being built by a Philadelphia based web developer named Mike Nicholaides, helps you stay focused by encouraging you to write a daily log of what you’ve done that day, which other members of your group can comment on (Mike and Chris Conley in my case). AccountableTo asks two simple questions: What did you do today? and What’s the next step?. It’s that second question which is the most valuable because it forces you to think about what you’re going and what you need to do to get there. I’ve found it incredibly useful in helping me stay productive day after day.

Here’s one of my updates from three weeks ago:

What did you do today?

Background work:
* Arbitrary HTML color input
* Drop down color palette (thanks Yahoo)
* Select from previously used colors
* Set background color to none
* Ability to change the canvas background color

What’s the next step?

Need to spend a few hours cleaning up the code, which has gotten a bit unwieldy.

Also, I’m considering focusing on creating high-fidelity website mockups (ie, forget about diagramming). It’s tricky because on one hand, adding the diagramming tools would not be very hard, but, it’s easier to market as a “high fidelity mockup tool” than as a “web based diagramming tool that can also do mockups”–thoughts? A natural step once I had this in place would be for it to generate quality HTML/CSS from the mockups (but that would probably be a few months down the road).

That second part — algorithmically exporting to HTML — is going to be fun, though it’s something a lot of developers want and will pay for if done well. Think of it as a web-based Dreamweaver that doesn’t suck. Imagine rendering all the PSD 2 HTML sites obsolete. That’s the long term goal.

I’m also preparing to move to Boston in a few weeks, so my progress of late has been slower than normal. I’m going to wait until I get settled there to launch the mockup tool, so it’ll probably be sometime around October.

Slowly by surely…

Get as many distribution channels as possible - There is some weird sense that if you build something they will just come. That a few “like”+retweet buttons and emails to editor@techcrunch.com will make your traffic explode + grow consistently. It fucking won’t. Get as many distribution channels as possible. Each one by itself may not be large, but if you have many it starts to add up. It also diversifies your risk.

- Jason Baptiste

On that note, I had this brilliant idea about three weeks ago: as a reminder to myself to email bloggers as part of Preceden‘s marketing efforts, I would keep track of how many bloggers I emailed on the dry erase board next to my desk.

I started on the 6th; today is the 21st:

It’s not that it’s a very hard or time consuming task; I just find it incredibly mind numbing. Every time I sit down to actually email someone, I always wind up switching over to TextMate within 30 seconds to resume programming.  Jason’s right though: building it is not enough. The internet is a big, big, BIG place and like it or not, you are just a drop in the bucket.

Here’s to the next three weeks.

Yesterday I added a survey to Preceden so users could tell me a bit more about their experience, and I think it’s going to be one of the best decisions I’ve made.

I chose to use Wufoo, a service for creating forms, rather than rolling my own because a) I hate making forms and b) I heard they make it easy.  It’s free to try and I’ve also heard they have great customer service, which is always a plus.

Patrick’s McKenzie’s post on integrating Wufoo into BingoCardCreator was my inspiration for doing this and I highly encourage anyone trying this to read his post too, as he has a lot of good ideas on incentivisation which I don’t cover here.

Wufoo has a slick web interface that lets you build a form by dragging and dropping controls onto it:

You also have the ability to customize the fields which makes it powerful, though it does so without being complicated. It’s clean, well thought out design is refreshing.

I added six question, which are based on the ones Patrick used for BingoCardCreator:

• Male or female
• Age
• What do you use Preceden for?
• What’s your favorite thing about Preceden?
• How can we make Preceden better?
• Would you be interested in using any of the following web applications? …

When you’re done, Wufoo will generate the JavaScript required to embed the form into your site:

I created a survey action in my home controller, with a corresponding survey.html.erb for their JavaScript:

And then I added a link to it from the user’s dashboard:

Clicking it takes you to the actual survey:

When users submit it, Wufoo sends me an email with the results, plus you can also check it on their website:

You’ll notice on the dashboard screenshot that there’s a small X in the top right corner of the survey notice.

I wanted users who have taken it or who don’t want to take it to be able to close the notice so it doesn’t show up forevermore on their dashboard. To do this, I added a surveyed attribute to the User model, which is set to false by default, but is changed to true when the user clicks that X.  Then on the dashboard I can say:

	<% if current_user.show_survey? %>

			New! Help improve Preceden by taking our two minute <%= link_to 'survey', survey_path %>.<%= link_to 'X', survey_path(:a => 'close'), :id => 'close-survey', :title => 'Hide this notice' %>
		

	<% end %>

In total, integrating it took about two hours and it would have been a lot less if I didn’t want to keep track of who didn’t want to see it.

While there is already a contact form on the site, adding a survey link in a prominent location has already resulted in a great deal of  really good feedback. Here’s a snippet from one submission:

In no particular order :)

* Would love today’s date to automatically be in the ‘start’ box.

* An API so I can interface with our Bugzilla!
- This would boost other people sending data into preceden (hopefully) and raise awareness. Gosh, imagine a facebook app that logged and timeline’d exactly when you were on facebook. Ouch.
- I would love to see some kind of sync from preceden to Google Calendar (which in turn syncs with everything I own). Easier than developing multi-platform synchronization yourself!

…

This person probably wouldn’t have taken the time to write me an email, but by asking him directly “What do you want?” he opened up with a ton of useful ideas.

With Wufoo, there’s no excuse not to survey your users. For the amount of time it takes to do it and the value you gain from the results, it’s the easiest decision you’ll make all day.

About a week ago I signed up for CrazyEgg, a service that tracks where users are clicking on your site. It’s $9/mo for the cheapest plan and I figured I’d give it a try.

This, for example, is a heatmap generated by CrazyEgg showing the key areas where users are clicking on Precedens’ homepage:

Observations:

• Lots of people click on the large green “Sign Up Now” button. (A clear call to action on the homepage is a big, big win for any web app.)
• Lots of people click on the “Examples” link to learn more about the service.  I haven’t spent much time optimizing the Examples page, but it’s probably something I should do given its important role in converting users.
• Lots of people click on the “Pricing” link, which makes sense. Interestingly, until several days ago there was no Pricing section at all; the price was only mention in the FAQs. However, I noticed that a lot of people were signing up and hitting the free account event limit, indicating that they weren’t aware of the restrictions so I decided to give the price its own, prominent section of the homepage. I predicted there would be a noticeable drop in the conversion rate, but after several days, it’s remained at about 13% (new users / new visitors from Google Analytics). I’m thinking that’s a really good thing, because if people are not dissuaded by the presence of a price (ahh!), it indicates that they’re at least willing to consider paying for the service.
• Not a lot of people click on the “Buzz” link, but that’s OK. I might want to A/B test a few more testimonials on the homepage to see how it affects the conversion rate. (PS: I recently added this gem to the top of that page: “The fact that Preceden offers “layers” and “milestones” puts your product miles ahead of other timeline apps that I’ve seen” which is from an email I received).

I might not continue paying the $9/mo, but it’s well worth the $9 to get that initial analysis.

On May 4, three months after Preceden’s launch, I started charging for it. Preceden, for those of you who are unfamiliar with it, is a web app for making timelines.

Not completely charging for it though; I’m employing a freemium business model, which basically means I give it away for free and charge the folks who want a premium version of the product. In Preceden’s case, users can add a limited number of events to their timelines (20) but if they want to add more than that, they need to upgrade for a one-time payment of $29.

I haven’t followed the numbers too closely, so I decided to spend this weekend figuring out just how well the site was converting visitors into paying customers.

Here’s the result:

There’s good news and bad news.

The good news (great news!)  is that 5 people upgraded, for a total of $145.

The bad news is that only 5 people out of 316 upgraded (1.62%). Actually, I have no idea if this is good or bad. It seems bad. Regardless, I’d like it to be higher.

Until several days ago, the homepage didn’t have a “Pricing” section. I did mention the price in the FAQs, but I think a lot of people signed up without realizing that you were limited until you upgraded. A preliminary analysis of the new numbers shows that adding the “Pricing” section cuts the visitor to sign up conversion rate in half (12% to 6%). However, there should also eventually be a corresponding spike in the paid conversion rate, because everyone who signs up now should understand the limitations of a free account.

To complicate things, I also just changed it from a max of 10 events per free account to 20 events per free account. This is a tricky number because too low and users won’t add enough events to appreciate the product but too high and no one will need to upgrade. I thought 10 was too low, so I up’d it to 20. I don’t know yet how this will affect the conversion rate, and it’s going to be hard to tell whether that or something else affected it if it does change significantly.

I’ve also considered limiting free accounts in some other way (no printing?) but haven’t decided on anything yet. Another option is to lower the price from $29 to $19 but this is also complicated (what happens when the folks who paid $29 realize you just lowered it to $19?).

AdWords has been a flop so far. At $5/day, I spent $60 on it over this time period without any conversions to paid users. However, with such a small conversion rate (1.62% so far), the lack of upgrades could just be due to variance, so I’m going to keep at it a while longer.

Now that I’ve got a good system in place for measuring the affects of advertising, I’m going to experiment with some other ad programs and see how they measure up. I’ll make a follow up post in a few weeks showing my progress.

If you have any feedback, especially ideas on ways to improve the conversion rate, please let me know.

Matt

I received an email a few days ago from a customer:

I’m loving your tool and using it to build a pretty extensive timeline for a project I’m working on. However, it seems to have stopped loading.

After a bit of troubleshooting, I realized that he had added so many events (217) that it took upwards of 30 seconds to load the page, causing Heroku to throw an error.

I decided to spend today seeing what I could do to speed things up a bit.

To do this, I created a timeline on my local machine and used the Rails console to add 50 events to it. I loaded it a few times and checked the server logs, which indicated that it took about 15 seconds to load on average. Eesh.

I set out to time all the major sections of code to see if I could determine what was taking the most time. I did this by creating a two methods on my Timeline class: initialize_ticker and tick:

attr_accessor :start_tick

def initialize_ticker
  self.start_tick = DateTime.now.to_f
end

def tick(str)
  diff = (DateTime.now.to_f - start_tick) * 1000
  puts 'Tick %sms - %s' % [diff.to_i, str]
end

I called initialize_ticker at the top of the show method in the timeline controller and then added tick method calls to the top of every significant section of code. This let me narrow down where the slow code was. When I determined that something was slow, I added a few more tick method calls within the method to narrow it down even further. Once I had the block of code that was causing trouble, I tried to identify ways to improve it.

One of my major finding was that converting a DateTime object to a float (like in the code above) takes a nontrivial amount of processing time on the backend. Since Preceden’s code was doing this thousands of times whenever a timeline was loaded, it added a lot of time to each page view. Where I could, I started returning floats rather than DateTime objects so it wouldn’t have to be converted later on.

I made a lot of other changes too, but they’d be hard to explain without the context of the code.

tl;dr: I was able to get that 15 second page load down to about 700ms, an improvement of about 20x.

You notice it even more on timelines without a lot of events because what would take several seconds, is now almost instantaneous.

Not bad for a few hours of work.

What I’m working on this weekend, among quite a few other things:

Before:

After:

Also of note is that I’m starting to charge for Preceden.

In the past, users could create an unlimited number of events on all of their timelines. Now, you can add up to 10 and after that you’ll need to upgrade for $29.

This decision, which I debated for weeks, will ultimately be a good one, I think. User count is great and all, but without revenue, you’re very limited. Sure, a lot of startups do it and it might make sense for them, but at this point in my pursuit, it makes more sense to focus on profits than acquiring a large user base (both would be good though!).

It changes things a lot and it will be interesting to see what happens.

With the help of this tutorial, I was able to get IE8 running on my Macbook, which will make troubleshooting cross-browser compatibility issues much easier in the future.

I’m about to embark on what will probably be a two-week initiative to convert Preceden’s timelines over to the HTML5 canvas.  Currently everything except the charts are created by manipulating a lot of DIV elements, but there’s only so much you can do that way. Canvas should provide a lot of flexibility in terms of visualization.

While looking for ways to free up space on my Macbook, I found a free tool called Disk Inventory X which analyzes your files and spits out a neat visualization:

Hovering over the large green rectangle, for example, shows me that the 15 GB IE8 VDI image I downloaded today is taking up a lot of space. Colors are used to mark similar file types so the maroon blocks, for example, are MP3s.

Preceden uses a similar combination of size, color, and mouse-over details to visualize time. It’s amazing how much you can do with just those three things.

You can download Disk Inventory X for free from its website here.

There’s a famous graph that used to be on one of the dry erase boards in the Y Combinator office in Palo Alto, depicting the life of a startup.

Here’s a copy, courtesy of Inc magazine:

Preceden is somewhere in the Trough of Sorrow at the moment, though its not as bad as the name suggests. After receiving sporadic spikes of traffic over the first few weeks, the number of visitors has stabilized at about 400 per day. The challenge now is to keep pressing forward, to continue iterating, and to build something truly amazing.

On that note, I’m happy to announce that Shaun, a Salt Lake City-based software developer, has joined the effort.  He contacted me after reading about Preceden on HackerNews and after a bit of back and forth, we decided to give it a shot. I’m really excited to work with him–he’s smart, hard-working, digs timelines, and we get along really well.

Here’s to the future.