White Headers, Flinging Timelines, and a little Momentum

Three great things happened tonight:

Preceden Redesign

I make small changes to Preceden’s design about every day but I’ve never really been satisfied with the way it looked. I couldn’t put my finger on exactly what it was but I think I figured it out: logos with white backgrounds are hard design around. When you your logo has a white background, the header needs to be white and since the body is also normally white you wind up having a ton of white and very little color in the final design:

So what do you do? Change the logo’s background color:

Much better.

Flinging Timelines

You know how when you’re dragging a window on the iPhone and you let go it’ll move a little bit with its momentum before coming to a stop? Well, I decided that’d be a cool thing to implement with Preceden. Two nights and about four Hot Pockets later, I finally got it down.

I’ll quote Feynman, cause he puts how I feel right now so well:

You see? That’s why we persist in our investigations, why we struggle so desperately for every bit of knowledge, stay up nights seeking the answer to a problem, climb the steepest obstacles to the next fragment of our understanding, to finally reach that joyous moment of the kick in the discovery, which is part of the pleasure of finding things out.

Yeah. Feynman. Flingling. Awesome.

Try it out:

Momentum

I noticed a new referal URL when I checked Preceden’s administrator dashboard tonight. I checked it out:

8th Grade – Timeline (Social Studies and Computer Class)

Using Preceden, students will create a timeline of important events (causes) leading up to World War II.

To see a sample, click here. The password is —.

The timeline must have at least four (4) layers (to be determined by the team) and a minimum of 12 events. Students must include notes for each event.
One event must be the start of World War II. Major events of World War II may also be included but do not count toward the required 12 events.
(However, they will be considered as work “above and beyond” the requirements.)

When completed, each team will provide — with the link to their timeline and the password.

Students will work with a partner on this project.

The due date is Wednesday, March 3rd.

A social studies teacher assigned his students homework to make a Preceden timeline of the events leading up to World War II.

It’s nice to see Preceden’s starting to get users outside of the startup scene, where is most of the traffic has been from since it launched a few weeks ago.

Coming along…

PS: Follow Preceden on Twitter here.

Post Launch Traffic != Success

Preceden’s going through its post-launch press phase at the moment and even though I know its fleeting, it’s still absolutely thrilling.

It started when I submitted Preceden to KillerStartups, a year to the day (coincidentally) after they covered Domain Pigeon. The only difference this time around is that I submitted Preceden to them, whereas they reviewed Domain Pigeon on their own.

Here’s the rollup:

Very cool.

The mistake I made with Domain Pigeon, and that I find myself wanting to make with Preceden, is equating this initial traffic with success. The trick is realizing that a lot of the visitors were early adopters who found Preceden through technology news websites. These visitors are, by their nature, not long term users, which is really what you need if you are going to have a successful web app.

That being said, a nontrivial fraction of the tweets about Preceden have been by teachers, which is an excellent sign that there is an audience beyond the early adopters. Usage of the site also makes me optimistic, but I’ll save that for another post.

Time will tell (pun intended).

PS: Check out Preceden’s Precden timeline if you found this post interesting.

The Preceden Blog

Preceden now has a blog. You can get it it by going to blog.preceden.com. I’m using Posterous to host it, which makes it incredibly easy. (Those guys are my heros.)

I considered making all Preceden updates here, but there should really be a separate avenue to discuss Preceden happenings other than my personal blog. It’d be a bit awkward talking about AdWord strategy with Preceden’s users, but I do want to be able to share things like product updates and have conversions with the users. A separate blog makes sense.

And so in the future, all Preceden product updates will be on Preceden’s blog. Discussions about its development and its more technical aspects will go here. I will periodically make updates here summarizing the updates there, which hopefully won’t get too confusing. We’ll see what happens.

Reflections on Preceden’s HackerNews Launch

Yesterday I submitted Preceden to HackerNews for review and I’m happy to say that their feedback was extremely positive.

This was the third time I’ve posted a project on HackerNews in the last year. The two before Preceden were Domain Pigeon and HNTrends. For both of those projects, I posted a “Review my Site”-type link on HackerNews within hours of putting the sites online. This time I did waited until a lot of people had tested it and then posted it on HackerNews, and I think that made a world of difference.

I soft-launched Preceden on Jan 30 and started by emailing friends and asking them to try it out. They discovered the first set of bugs, most of which were minor, and provided invaluable feedback on key areas like usability and the site design. For example, in the initial release the new event form had a single box that let you input the event’s name and simultaneously preview how it would look on the timeline:

One person noted, “On new event page, it wasn’t immediately obvious that the ‘Event Name:’ was an input field.  I’m not sure why, perhaps because it doesn’t have a border?

Someone else said the same thing in a separate response: “Also, I messed up twice on the data entry – didn’t see “name” and left it out…” With that, I changed it to what it is today: a normal text box with a separate event preview, which looks a lot better:

I also took advantage of Raphael Mudge’s Feedback Army to solicit even more feedback from users. The results were much better than I expected. Here’s an example response:

1. What does this site do?
2. Were you able to make a timeline? Was it easy?
3. Did anything confuse you?
4. What would you do to improve the site?
5. Final thoughts?

1. This site lets any signed up member of the service to create timelines of anything.

2. Yes. I made a ‘test’ timeline with the title “My work life” with the username ‘gmbox’. I would like you to check it out(I have made it public).
Yes. It was easy to create the timeline. But one of the events I created(titled “Left in the lurch”) did not have the title appearing inside the colored box. Is it normal or Is it a bug?

3. No. The interface was simple and it should be easy for anyone to get started with creating timelines.

4. I have quite a few answers to this question.

(i)   In the Add Event option, there is a listbox that allows users to select a Layer. It shows the available list of Layers. We can have a “Create New” option as part of the list that would allow an user to create a Layer right from the “Add Event” form.

(ii)  There could be an option to hide a particular Event/Layer without having to Delete them.

(iii) The Timeline element that is being create is static and mostly passive, except for the Scroll feature that allows users to drag the timeline. I guess we could have the following options:

a. Clicking on an event to select the Event(the colored box). Clicking again (not double clicking) to allow users to directly edit the title on the event.

b. Double clicking to directly go to the Edit Event page (mimicking common user actions in most GUI OS)

c. Similar functionalities to Layer names as well.

d. Click and drag borders to rescale timelines to years/months/days (just like resizing)

5. Final thoughts:

I personally feel we are just not going to go places having Timeline as a stand-alone feature. We need to have more cross-integration. We could possibly allow timelines to be exported as Embeddable objects in Office Suites and other productivity software. We could also consider harnessing the power of social networking. We could provide options for collaboration.

At this stage, Preceden.com appears quite good. But i personally feel adding the above functionalities would only make it better!

Congrats, Great work guys! And all the very best.

23 responses like that for $25. Pretty incredible.

There was a common theme in a lot of the responses: things that I thought were obvious were confusing to users. For example, the difference between layers and events was a big point of confusion, so I added instructions at the top of a new user’s first timeline to nudge them in the right direction:

During this time I also got set up with Google Analytics, Google Website Optimizer, and AdWords. I’ve been reading Advanced Web Metrics with Google Analytics and Always Be Testing, which are great starting points for anyone wanting to learn about Google Analytics and Website Optimizer. I set up funnels, goals, and all sorts of geeky stuff that I hadn’t tried before. One of the major problems with Domain Pigeon was that I never really had a good grasp of how people were using the site. I saw the raw visitor count, but didn’t realize how much more you could do with Google Analytics (more on that in another post).

And so for about a week and a half, I tweaked, tested, and prepped Preceden for future users. By the time I finally did launch on HackerNews, I had worked out the majority of the issues which I think is one of the reasons the feedback was as good as it was. I chose yesterday to launch because I was off from work due to the blizzard in the Northeast, which enabled me to be around to fix any issues that came up.

Submitting these review-my-app posts on HackerNews is one of my favorite things to do. It’s always such an exhilarating experience. I feel like a kid who has just auditioned for a role in a play and I’m awaiting the judge’s decision. It’s intense.

You can view all the responses here.

There were a few common requests (specifically make the timelines embeddable and make an API) and a few people alerted me to some cross-browser rendering issues, but I fixed them pretty quickly, which is part of what’s so great about web programming. All in all, it went very smoothly, and I’m looking forward to moving on and continuing with Preceden’s development.

The road ahead will largely be uncharted territory for me. The majority of my experience has been developing apps, not running them. I have a bad tendency to build build build, launch, neglect, and repeat, which I need to overcome if Preceden is going to be successful.

I’ll end with a comment by Ric Morton, whose tweet was the best thing I read all day:

If only every product design was as clean and unpretentious as Preceden

Thank you Ric, and thank you all who tried out Preceden.

Announcing Preceden

For the last three months I’ve been working on a new web app called Preceden.

I’m happy to say that it’s fully operational and ready for folks to try out.

You can get to it here: http://www.preceden.com

It’s actually been up for a little over a week. Friends, family, and some great people from PhillyRB have been testing it out and providing invaluable feedback. Most of the major bugs and usability issues should be worked out, but if you find any please let me know.

I’ve got a long list of feature requests and ideas for where to take Preceden in the coming weeks and months, and while I won’t implement all of them, I will try to execute the most popular requests.

If you have any ideas, comments, criticism, or just want to say hi, please shoot me an email or leave a comment below.

I look forward to hearing you feedback,

Matt