A few months ago, I met with a former colleague for some BBQ and shop talk. We’re 
both entrepreneurially minded, and during the course of the conversation I casually lamented the seeming lack of a good online tool for managing various lists, todos, projects, and so forth, all in one place. While, on the surface, they might seem entirely separate from one another, my feeling was that there was a strong common thread that ran between them, namely that they are all, at their core, lists of a kind, and that it should be possible to design an application that cleanly handles each of these needs.
Of course, I know that there are online apps out there that address each of these needs; but my complaints with all of them, to varying degrees, is that they fall short in some significant way, whether it be a rotten user interface, or functionality that is too limited for my needs. I also don’t like having to use multiple tools when one could do the job. I began to think that my needs weren’t very unusual, and that others might feel the same way, and that this might be the sort of thing that they would find useful, too. What really sealed the deal was that I felt that this was a tool I really wanted to use myself, and so I decided to begin building it. Thus, Lystie was born.
Once I’d picked a name, had a logo designed, and defined the product focus and feature set, I set out to begin the process of designing the front-end of the site. The process by which this is done is roughly standardized by now and I’ve done it myself many times before. You begin by creating a basic wireframe design. This is the ‘back of the napkin,’ high-level vision for what you want the site to look like. You then take that design and ‘play computer’ in your head, making sure that the design allows you to do everything you need it to. Once you’re satisfied that you’ve got something that addresses those needs, you then hand off the wireframe to a designer who takes your vision for the product, adds artistic vision and (hopefully) some ideas of his own, and then you have the finished product, which is a layered PSD file produced in Photoshop. This file is then handed off to a web developer who takes the PSD file and codes it into HTML, CSS, and images, leaving you with a design that is ready to be connected to the actual code that makes the entire site a working entity.
In the past, I’ve always used a Mac application called OmniGraffle to create my wireframes. I’d then engage a single designer to create the PSD. Finally, I’d hire someone to handle creating the HTML and CSS from the PSD the designer had created. (It is possible to find someone skilled, one who can handle both, but usually they’ll be different people). But I haven’t been entirely happy with the way that process has worked recently; so, this time, I decided to take a different approach.
Although I love OmniGraffle and have used it for years for drawing network diagrams and so forth, I’ve never felt that it was an especially good wireframing tool because it lacks a good set of standardized web design components in its various collections of stencils. So this time I decided to use Balsamiq Mockups, an Adobe AIR-based product that runs on multiple platforms, one that is tailor-made for designing web user interfaces. After about two hours of doodling and adjusting my design, I had a workable mockup. Balsamiq actually made the process both easy and enjoyable. I consider this phase a success.
Next it was time to give the wireframe to a designer who would turn my vision into a visually pleasing (and consistent) reality. This time I chose to take an entirely different approach than I’d ever done before. Usually I visit Odesk or Elance, review a few hundred design portfolios, and then hand off the task to the designer, hoping his portfolio is truthful and that what he delivers to me will be good. Not having had entirely satisfactory experiences in the recent past, I instead opted to use this as opportunity to experiment with crowdsourcing by posting a design contest on 99Designs. Now, instead of hiring a single designer and a saying a prayer, I would be getting submissions from many designers. Whereas before I could spend many hours staffing the project, in contrast, I spent 10 minutes putting together a design brief and posting the contest on 99Designs. The contest ran for 7 days, during which time I received literally dozens of submissions from different designers. In the end, I suffered an embarrassment of riches: it was difficult to choose a winning design because there were so many good ones. This phase, too, was a resounding success.
Finally, with my completed PSD design in hand, it was time to locate a developer who could skillfully transfer the Photoshop design into clean, well-structured HTML and CSS. Here, too, I usually find resources on Odesk, and finding someone to handle the task isn’t hard. But I wanted to save myself the time of having to review candidates, after which I’d have to hope I’d made the right choice. So I instead opted to use a service that specializes in this area and save myself the time. (Search Google for ‘PSD to HTML’). I chose HTMLBurger, and less than 24 hours after I gave them the project, I had the first version of the completed HTML and CSS returned to me for review. The code was clean, and with minor fixes it worked perfectly on all major browsers.
I’m happy to say that this process has been an unqualified success. In the process, I’ve learned (or re-learned) a few things:
- Just because you’ve been doing something a certain way for a long time doesn’t mean the process can’t be improved. In fact, things change so rapidly on the Internet that it’s a safe bet that it probably can be improved, if you’re willing to occasionally step outside your comfort zone.
- The old way of handing a design to single designer wastes your time and probably delivers poorer quality work than what you can get through a design contest on 99Designs. Although it isn’t necessarily the best approach for all projects, I fully intend to continue using the service for most all of my design needs in the near future. It’s that good.
- I’m not going to waste time reviewing resumes and recruiting web coders on Odesk or Elance any more. From here on out, HTMLBurger, or one of their competitors, is going to have my business. The transaction was easy, the results were outstanding, and they guaranteed the results. No worries.
The Lystie project is coming along nicely. The front-end is in place, our API is working, and we’re beginning the process of connecting the UI and bringing the whole thing to life. We are expecting to launch in September. If you’d like to be notified when we begin accepting beta users, please visit the site and signup for early access.
UPDATE: After this was posted, I was contacted by Jason Aiken at 99Designs. A little while later he interviewed over Skype about Lystie and my experience using their service. The interview can be found here. I have also posted a few more tips on making the most of 99Designs here.
