A Long Overdue Lean Designs Post Mortem

lean-designs.png

In 2010, inspired by the success of the mockup tool Balsamiq, I started working on a competitor called jMockups. My original goal was basically to build a Balsamiq clone, but instead of it being downloadable software it would be web-based. I named it after jQuery.

After a while I realized that competing head-on with Balsamiq was a bad idea so I pivoted to building a high fidelity mockup tool – one that would create mockups that looked like real websites instead of sketches – and I renamed the project Lean Designs. Instead of competing with Balsamiq, I’d be competing with tools like Photoshop that a lot of designers use to design sites before building them. And as an added bonus, Lean Designs would also export your high fidelity mockup to HTML and CSS, saving you from having to manually code up the design when you were finished. I was pretty excited by it.

Here’s an early demo of Lean Designs:

As you might have guessed from the title of this post, things did not go well.

I never wound up writing about what went wrong – mostly out of embarrassment – but reading about my mistakes might save of some of you some heartache with your own projects.

First and foremost, Lean Designs didn’t solve a clear pain point for a specific group of users. If you had asked me back then who Lean Designs’s audience was, I would have said something like: it’s for developers who want to design a website without writing HTML/CSS, it’s for designers to create a high fidelity mockup of their websites before coding it, and it’s for everyday people who want to create a simple static website but don’t want to code 😱.

These are three very different usecases and Lean Designs didn’t solve any of them well. For example, for developers and everyday people who want to create a website, having a What You See Is What You Get (WYSIWYG) web design tool where every element is absolutely positioned makes it extremely hard to create a well-designed site. I touted on Lean Designs’s homepage how easy it was to create beautiful websites with it, but almost everything created with it looked terrible.

If you asked me which of those use cases was my focus, I probably would have said Lean Designs was a Photoshop replacement for designers to create high fidelity website mockups. But… I am not a designer. And I’ve never used Photoshop to create high fidelity mockups. I read online about how many designers use it, but I had no expertise in the problem I was trying to solve. And if Lean Designs was truly for designers to create high fidelity mockups, why did I build an export to HTML/CSS feature that would never be used by these designers in a production website?

One way to mitigate this is to do customer development: to get on the phone and meet face to face with people in this market to learn about their real problems. I never spoke with anyone in Lean Designs’s target audience to verify my assumptions. This is ironic given that Lean Designs is named after the Lean Startup movement, a big part of which is to do customer development to avoid making incorrect assumptions.

I also didn’t research any of my competitors. I rationalized it by saying to myself that I didn’t want to be influenced by what was currently on the market. To this day I’m still learning about competitors that existed back then that I had no idea about.

I formed jMockups LLC to add an element of seriousness to the project even before the site had launched. That’s $500/year to operate in Massachusettes.

I paid hundreds of dollars for a logo that I never wound up using because after I bought it I realized it resembled a swastika:

jmockups-logo.png

When I later renamed the site to Lean Designs, I filed a trademark for it with the help of a local lawyer. He also helped write its Terms of Service. 💸

With all of these administrative things taken care of, I proceeded to spend months building the first version of the product.

I thought I was being innovate by blindly following my vision for the product, but I was being extremely naive.

When I received feedback about jMockups on HackerNews, I took every bit of praise as validation that the product was on the right track. Same thing when I announced the pivot to Lean Designs.

The first version was completely free. I wanted feedback – any feedback – and thought that the best way to do that was to get as many people using it as possible. Feedback from free users can be very misleading; what you really need is feedback from people who will pay.

Eventually I transitioned to a freemium model where you could create a limited number of mockups for free or unlimited for $9 per month. This was a tool that I was aiming at professionals and I charged the same amount as a burrito at Chipotle.

The only marketing I did for it was to create a blog where I only posted about feature updates. I should have been writing – or paying someone to write – content that would be interesting to my target audience (whoever that was).

And for the few people that did use it and did pay, I eagerly implemented almost every feature request in the hope that each one would turn the tide on my failing product.

I was in a mastermind group at the time, but we spent too much time talking about features and not whether the Lean Designs was viable in the first place.

I didn’t pay close attention to metrics nor did I look at what people were actually creating with the site.

Finally, I spent way too much time trying to turn what I knew to be a flop into a successful startup. It’s hard to know sometimes whether an idea is bad or whether you just need to keep pushing, but in Lean Design’s case I kept at it way too long.

After about a year and a half and hundreds of hours spend toiling away on nights and weekends, I stopped accepting new users, put up a notice that it would be shut down in a few months, then killed it.

The upside of my experience with Lean Designs is that I picked up a lot of new technical skills and learned a lot about what not to do which I later applied to Lean Domain Search and other side projects.

Was it worth it? Could I have learned these things by reading blog posts like this one when I was deciding whether to work on Lean Designs? It’s hard to say. I’d like to think so. Maybe some things just have to be learned the hard way.

On that note, if anyone reading finds themselves working on a project with similar issues and is looking for feedback, don’t hesitate to drop me an email.

 

Lean Designs Now Supports Hybrid Width Website Layouts

(The following is a cross-post from the Lean Designs blog)

It gives me great pleasure to announce that you can now create hybrid width layouts using Lean Designs, letting you create professional looking websites in a fraction of the time compared to doing it by hand.

To understand the significance of this new feature and how to use it, we need to go over a bit of terminology:

Three types of layouts

Fixed Width

In a fixed width layout, the site is given a fixed, constant width which is then displayed (usually centered) in the browser. With this type of layout, you cannot use any of the excess space in the browser except for specifying the page’s background style (white in the example below).

Example:

Until today, fixed width layouts were the only type of design you could create with Lean Designs.

100% Width / Fluid Width / Liquid Width

In a 100% width/fluid width/liquid width layout, the width of the site is based on the width of the browser. Because the position of the the elements are based on the width of the page, they’ll appear differently to visitors depending on the width of their browser.

Example:

Fluid widths are not currently supported by Lean Designs.

Hybrid Width

Hybrid width layouts, as the name implies, takes pieces of both the fixed width and the 100% width layouts. With this type of layout the outer elements can have 100% widths, but their contents are held in a fixed width, centered container.

Example:

With today’s release, you can now create this type of design using Lean Designs. Note that the term hybrid width is not a standard web design term, but we needed a way to differentiate this type of layout from the fixed width and 100% width layouts.

Creating Hybrid Width Designs in Lean Designs

Creating hybrid width designs in Lean Designs is a piece of cake:

1. Add a DIV element to your designs

2. Position it against the left side of the canvas

3. Stretch it so that it spans the entire width of the canvas

When you export it, Lean Designs will recognize that you want this element to have a 100% width and generate the appropriate HTML/CSS.

For example, let’s add an H1 element, assign it an id of logo, assign the red element an id of header, and export it. This is what it will look like in the browser:

And here’s the HTML/CSS that Lean Designs generates:

Pretty cool huh?

OneHub Example

Lest you think this is only for creating simple, ugly sites, check out the following example of OneHub’s homepage re-created using Lean Designs in about 10 minutes:

In the editor:

Exported to HTML/CSS: (click here to view site)

Hope you like it. If you don’t have an account, you can sign up for free and create your own design in minutes.

As always, drop us a note if you run into any bugs or have ideas for improvement.

matt / matt@leandesigns.com

Lean Designs Will Disrupt Web Design

Here’s what’s going on:

About a month ago I changed jMockups’s name to Lean Designs. The primary reason for the change was a shift in focus away from creating website mockups towards actually creating websites, as that’s what most users wanted. It has taken a while, but today I launched a version of Lean Designs that lets you do just that. You can read more about it here. And check out the demo here.

Next to the initial launch in October, today’s release represents the largest milestone in the project’s nearly one year history. I’m incredibly excited about its potential to disrupt the web design industry. Don’t get me wrong: it’s got a long way to go. There’s a thousand ways it can be approve improved, but the fundamentals are in place. Now its all about pressure and time.

Onward.

March Madness: Preceden Gets Some Love, jMockups’s Grind Continues

In keeping up with my monthly progress reports, here’s an overview of what went down in March. (See also: January, February)

Preceden

One of my goals in March was to spend more time working on Preceden. I normally devote most of my free time to jMockups, but am trying to improve how I balance the two, given that Preceden actually turns a profit. I spent about 15% of my 120 hours online working on Preceden during March (up from about 5%), which is a big step in the right direction.

Preceden had 16,845 visitors during March (including embedded timelines) that generated 78,925 pageviews. There were 35 upgrades to the pro account, which generated $895 in revenue (up from $522 in January and $580 in February). However, I spent $540 in order acquiring 11 of those customers while experimenting with Google AdWords. After subtracting the hosting fees and AdWords expenses, I wound up with a profit of about $285.

While I’m disappointed that AdWords did not yield a positive ROI, I’m glad I took the time to do it. I’ve had it in my head that AdWords would be an easy road to four figure profits and as long as I believed that, I wasn’t terribly motivated to work on it (sounds stupid, I know). With the knowledge that it won’t be as easy as I once believed, I’m forced to get back into the game.

jMockups

While I continue to make a lot of good progress with jMockups, traction remains elusive. The trough of sorrow is aptly named. :)

jMockups had 9,914 visitors during March that generated 19,922 pageviews. 6,812 of those visitors were a result of posting about the launch of the new specifications tool on HackerNews.

Paid signups skyrocketed from 1 to 2 during March, yielding $38 in revenue. Subtract about $200 in monthly expenses, and I’m still out a bit each month.

On a much more positive note, I received an acquisition offer for jMockups towards the end of the month. The company a good fit, but I think I’ve barely scratched the surface of what’s possible with jMockups and it would therefore be a huge mistake to sell right now, regardless of the price. Plus, if I were to sell it, I’d start building something new almost immediately, so what would be the point of moving on as long as I’m still passionate about it?

Blog Posts

On the jMockups Blog:

The New jMockups Mockup Editor (Mar 4)

Improving the Website to Mockup Converter (Mar 8)

Share Your Website Design to Help Others Get Started with Theirs (Mar 11)

jMockups Introduces Mockup Templates to Make Web Design Easier (Mar 12)

jMockups Can Now Automatically Create Detailed Specs of Your website Mockups (Mar 20)

The Customers Have Spoken: We Want to Export Our Mockups to HTML/CSS (Mar 21)

Baby Steps Towards Mockup to HTML (Mar 28)

New Default Design for jMockups Image Elements (Mar 29)

Ajaxified Mockup Deletion (Mar 30)

On this blog:

February in Review: Life Tracking, Major jMockups Updates, and Preceden’s Best Month Yet (Mar 4)

How to Calculate Your AdWords ROI for a Freemium, One Time Purchase Web App (Mar 5)

AdWords: Week 1 Results (Mar 13)

A/B Testing Preceden’s Homepage – Round 1: 37% Improvement (Mar 13)

Preceden’s 15 Days @ $30/day AdWords Results (Mar 29)

The signal-to-noise ratio on some of these is a lower than I’d like, but these hey-here’s-what-I’m-doing posts are usually pretty quick to write and at least they get something out there (a strategy I’d recommend to anyone who wants to blog but doesn’t know what to write about).

Also, in an effort to get more involved in the local startup scene, I’ve started attending the monthly Lean Startup Circle Boston and Boston BizSpark meetups. If you attend either, drop me a note so we can hook up at the meeting.

Onward.

February in Review: Life Tracking, Major jMockups Updates, and Preceden’s Best Month Yet

In December I announced a $4K/month challenge, where I try to reach $4K/month in profit from my web apps by the end of 2011.

In this post I’ll give an overview of what happened in February. Click here to see January’s report.

By the numbers:

1) According to RescueTime, I spent 121 hours working over the course of the month, which equals about 30 hours/week or 4.3 hours/day. (Not including day job.)

2) 10,578 people visited Preceden. 529 people signed up for an account. 20 people upgraded to a paid account. Revenue: $580. Total time spent working on Preceden: 0 hours.

3) 5,303 people visited jMockups. 302 people signed up for an account. None upgraded. Revenue: $19.

4) 9 blog posts:

Three on this blog:

jMockups and Preceden January Review – 5 Feb

Seeking Alpha Testers for jMockups Import Tool (cross post from the jMockups Blog) – 6 Feb

Launch! jMockups Website to Mockup Converter – 19 Feb

Five on the jMockups Blog:

New Keyboard Shortcuts to Make Designing Mockups Easier – 3 Feb

Seeking Alpha Testers for new jMockups Import Tool – 6 Feb

New Homepage Design, Some A/B Testing, and Why Data Can Be Misleading – 11 Feb

Website to Mockup Converter Launched – 19 Feb

Reengineering jMockups for Optimal Performance – 26 Feb

And one as a guest post on Sebastian Marshall’s blog:

Nine Tips for Getting Started with Life Tracking

Overview:

In terms of progress, February was a huge month for jMockups. For a good chunk of December, January, and early February, I was busily building and preparing for the launch of the Website to Mockup converter. The official launch was on Saturday, 19 Feb while I was in NYC with Chris Conley and Mike Nicholaides. All in all, it went fairly smoothly, though there were some issues rooted in the slowness of the jMockups editor. The week following the launch I reengineered the editor to eliminate the performance issues. Today was another huge update: the launch of the redesigned mockup editor. In a nutshell, compared to a month ago jMockups has a sexier design, an improved user interface, vastly improved performance, and one major new feature: the Website to Mockup converter.

Meanwhile, Preceden had its best month yet. 20 paid signups resulting in almost $600 in revenue. Long term I believe that jMockups has much more potential than Preceden, yet it’s a little unnerving that the thing I’m spending so much time on is hardly making any money and the thing I’ve ignored for the last seven months is growing and bringing in decent revenue. Rather than spend 100% of my time on jMockups and none on Preceden, I’m going to aim for a 85/15 ratio in the future. I keep saying it, but a few A/B tests, SEO, and target AdWords campaigns could have a huge affect on Preceden’s revenue so it’s time to start doing something about it.

Finally, I’ve been doing life tracking for 2+ months now and have had some great results from it. Tracking + slow, incremental improvements go a long, long way. Check out my post on Sebastian’s blog for more details.

One last thing: I really enjoy talking with folks about their startups and poker bot work, so if there’s anything I can help you with or you just want to say hey, please shoot me an email.

Thanks for reading — Matt

Launch! jMockups Website to Mockup Converter

Today is the official launch of the new jMockups Website to Mockup Converter, which lets you import any existing webpage into jMockups, allowing you to redesign and share it in minutes.

You can check it out here: Website to Mockup Converter.

And here’s the video demo:

Saturday probably isn’t the ideal day to publicly launch a new feature, but I’m in NYC this weekend with Chris Conley and Mike Nichoaides, two talented developers I originally met through some Philly on Rails meetups a while back. What better time to launch than among friends who have been following my progress and helping me since jMockups’ inception?

In the past I probably would have posted it on HackerNews minutes after I pushed it out to the site for people to start using. The problem doing it that way is that without a lot of people testing it beforehand, you run the risk of discovering major bugs in the midst of getting a lot of traffic. Then you have to choose between trying to fix it immediately (which due to your haste can introduce other bugs) or waiting for the traffic to die down (in which case a lot of people might have already experienced the bug). This has happened to me more times than I’d like to admit.

With this launch, I made it available to a few folks last weekend, then about half the existing user base on Wednesday. And sure enough, there were a lot of issues that I hadn’t anticipated. For example, when you work with bookmarklets you need to make sure that you prevent the browser from caching the code:

http://www.jmockups.com/javascripts/bookmarklet.js?x=’+(Math.random())

I wasn’t doing that a week ago and so I was making changes to the bookmarklet code but users weren’t getting the updates because their browser had cached the original version. Thankfully only a handful of people had tested it at that point. Imagine if several hundred had: most of them would never get the updated versions of the file, forever forcing them to use the original version of the bookmarklet. Not good.

By launching it in stages I identified issues like that and resolved them prior to the influx of traffic, making this a much less stressful day than previous launch days have been. Knock on wood…

Anyway, dear reader, I’d love to get your thoughts on the new Website to Mockup tool. Feel free to email me or leave a comment below. Thanks!

Seeking Alpha Testers for new jMockups Import Tool

Cross post from the jMockups blog:

###

Hey everyone!

The new jMockups website import tool, which lets you instantly import any existing website into jMockups, is ready for testing.

With the ability to import your websites directly into jMockups, you can redesign and share them in a matter of minutes, drastically reducing the amount of time it takes to redesign an existing site.

Before launching publicly, I need several folks to test it out to help identify bugs, make suggestions for improvements, etc. If you’re interesting in helping, please email me: matt@jmockups.com.

Thanks!

Matt