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.