Safetygoat

11 tips: Build a web app in one month

Monday, October 18th, 2010

Deciding on the name, one month ago

Last Friday (the 15th October 2010) we launched a little web app called Watchy.  I’ve just checked my skype history, and the name and idea started on 15th September.  In exactly one month we built and launched a fully functioning website while working on other freelance projects.

This project was built by a webdesigner, Kat Neville (me), and a developer, Elliott Draper.  We built it because we wanted to, because we love working on things that get us fired up, and mostly because we’re nerds who would rather stay in and code rather than go out with friends.

So, while I have now done the ‘build a web app in 24hours’, a month is a reasonable amount of time to actually get your app built, tested and working how you like.

Why do some apps take months and potentially years to build?  Why do people overstep their deadlines?  Why do some apps never launch?  I want to give you some tips to make sure you complete your web app in a reasonable time.

Maintaining your momentum makes the difference between a project that excites you and one that gets pushed under the carpet.  So, here’s some tips for fast app creation.

Tip 1: Have some skills

Nothing makes an app development drag out faster than someone running it that doesn’t do any coding.  When you’re building fast, you need to be flexible in what features you put in and may have to redesign to make it work.  For example, I am a web designer, who does all the html and css.  It meant that while Elliott was making things work, I could go in after he was done to tidy up without much need to discuss anything.  If you don’t have any skills, you’re going to be sitting around twiddling your thumbs.

What skills should I have?

Choose only one area that is your responsibility, but allow some overlap.  The best team is a small one: one developer and one designer.  Both do the planning, both do the copywriting, both do the marketing collateral.

Be able to compromise, and find a hustler like Elliott

Tip 2: Pick a good team member

Again, a team of two is amazing.  The less relationships you need to manage the better. You will be working very closely with this person, so make sure you can talk to them, that you share working philosophies and you’re happy with the quality of work that they do.  Make sure that they have the stamina to push through and get things done too. Everyone is enthusiastic at the beginning.
Find out if they are good at the details, that they’re flexible to change and able to make compromises.

Finally, and most importantly, make sure they are shit-hot at what they do. There’s no point working with an amateur. Lucky for me, Elliott and I are ’skype colleagues’ (meaning I’ve worked with him on projects before), and since I hate calling people ‘rockstars’, I’ll call him the most competent, qualified, quick and talented developer I know (ninja, obviously).

Tip 3: Be willing to compromise

The reason to have a developer and a designer is that they approach things from different angles.  This is a good thing, and leads to a more complete, usable web app. Your team member and you will not always agree, so make sure you talk through things before you do them.  Let them win some, too.  Make sure you don’t get angry or defensive and back your opinions up with reasons.

Tip 4: Understand the difference between ‘want’ and ‘need’

Maybe something doesn’t work as well as you’d like.  Figure out what is a deal breaker. If things break without one feature, that needs to be fixed.  If a process is a little bit awkward, you could possibly wait until the next release.  At some point, you just have to say, “Go.”  For example, I wanted to do tooltips on the account settings page, as it’s not really clear what the labels want you to enter in.  But, it would have meant a re-jig of the forms.  So we’ve pushed it from our initial release to the next one.  It still works, and hopefully people will feel comfortable enough to contact me if they have any questions.  It doesn’t stop the app from being working.

Tip 5: Start with the bare bones of what you need to make it work

Nothing extends dev time longer than: “oooh it would be so cool if we did this!”  Often times it is more than enough work to get the core offering working and the userflow and experience to where you want it.  Every new feature adds a layer of complexity that you don’t need at the beginning.  The whole idea for our app was to give clients access to their hours.  We could have tried to build it for every accounting software, but we didn’t: we built it only for FreeAgent.  We could have built loads of client management tools, but we didn’t: we didn’t know how other people would be using it, so we’re waiting for that.

Tip 6: Give them something to get excited about

Sure, you’re keeping things simple, and focusing on the most useful components.  But, there’s something about people that melt when you show them something cool.  In this spirit, we built graphs and pie charts to display your data in a different way.  Not only is it really cool looking, but it makes our app feel more polished and useful.

Tip 7: Spend the time on pixels and speed

A sloppy design gives a bad impression, so make your design as close to perfect as you can.  If you’ve done a logo, make sure you’ve spent time on polishing: it’s the first impression of your company. While Watchy isn’t perfectly done design wise yet, I’ve still made an effort to make everything look clean and professional.  Please feel free to taunt me if you see anything out of place.

For developers, make sure your website is fast.  There’s nothing worse than a site that hangs.  With Watchy, we were having some serious speed issues as it grabbed the data from FreeAgent every time you refreshed.  It could hang for up to 20 seconds and was debilitating to the user experience.  Elliott took the time to get caching working so that it’s 1000 times faster now.

Tip 8: Set an ambitious deadline

Deadlines push people to act.  When you’re a freelancer, you’re always busy: if we’re not working on client work, we’re looking for new work.  So, how do you make time for these side projects?  After the logo was designed we put a holding page up with a deadline of 2 weeks: very ambitious.  We even had a public timer (with a watch themed site, you kinda have to) so that we would feel shame if we put it back.  We agreed that we could do a very basic version by then.  And we did.

Not everything worked though.  So, even though we felt a bit guilty about it, we pushed our launch week back by a week and spent the whole next week making sure things worked, adding subtle features that made navigating easier and more.

If we had not set that initial deadline, Watchy would not have come out last week.  It was because we were keen to move fast that it happened.  It takes a dedicated team and a lot of elbow grease to fit it around your other jobs, but make the effort to make your deadlines:  don’t push them back for no reason.  If things aren’t finished, take features out so you can get it out!

Week 1: Main design, logo done. Development environment set up, and stucture decided.  Landing page goes up.
Week 2: Design is refined as well as secondary pages designed.  Main pages rendered in html/css. Development should have enough in it so that front end code can go in.
Week 3: Most of the html/css and development should be finished. Refine app! Test to make sure user flow makes sense, people won’t get stuck. Decide what features you’re going to launch with and remove partially completed features (for example, we decided to launch without payments for our first week, as we felt getting the user flow was more important).
Week 4: Continue to refine, make sure emails work, invites work and cross browser testing looks good. Make sure it’s fast and looks good. Complete ‘about, terms, privacy’ copy

Tip 9: You can’t be everything to everyone

You can’t make an application work for everyone.  And the more things you try and support from the start, the less good the support will be for each of those things.  So choose a specific target market.  For us, we went ultra specific: we wanted to help freelancers and contractors who use FreeAgent. Moving forward we may pick some bigger agencies to target and we may integrate in with other accounting software.  They key is to find out 1) If the idea is good, 2) If you can make enough to at least cover your expenses and 3) you have the basics and userflow designed well.

Tip 10: Have a launch plan

Choose a time that you’re both going to be around with nothing urgent to do.  If something breaks, you want to be there.  If a person signs up, is frustrated and you’re not around, you could risk losing a customer.  Most people understand when stuff is new, that it won’t be perfect, especially if you acknowledge their frustration and let them know you are dealing with it.

Before you launch though, see if there’s any interest.  We had a landing page and managed to talk to FreeAgent on twitter before the launch.  It meant that we had 50 people to email on launch day, as well as got 30 new followers on twitter from legit people that wanted to help us test.  Sure, 30 is not a very big number on twitter, but in terms of quality, they were ace!  Friday, we averaged over 3 minutes per user on our site, set up emails for feedback and had a twitter account.  There’s loads more stuff we need to do, but the initial interest was amazing, and we’ve been so excited about it all day.

Tip 11: Building it is just the beginning

“If you build it they will come” is the most untrue thing on the internet.  So even though we built this app in a month, we will be spending the next few months improving it, marketing it, testing it and more.  Marketing it is not easy, and it’s this effort that means the difference between a profitable, successful app or just one of those ‘cool things’ you made but never went anywhere.

Wish us luck on building up Watchy!  We’re in ‘beta’ until next week, so it’s by invite only. If you’re a FreeAgent user, please follow @watchyapp on twitter and I will DM you an invite code!  (And please, let us know what you think! )