Recently, we had the privilege of working on a fun, pet project building a Django web app that measures luck, dubbed Luckometrics. This app uses a set of user-generated numbers to calculate their luck score. It also pops an entertaining message in addition to the score. The concept is rather simple and ultimately is an attempt to fill a niche and capitalize on all the Google searches on this subject. We had the idea for a while, but who can afford to build apps for fun? Gamified apps can make money, but that is a discussion for another time. This time we will share our lessons learned while building the app.
Initial Concept of the Web App
Converting an idea into a full-fledged app requires a solid plan and the best place to start is by creating the wireframes. First, this will let you self-validate your idea - putting things on paper brings clarity. Second, you will be able to convey and sell your idea to your teammates, developers, and graphic designers much easier, since you will have something tangible to show.
You can arm yourself with pen and paper and jot down schematics, but if you work with third party developers, hand-written notes are usually not the best way to go. The wireframes must be clear, consistent and bear a certain level of familiarity. Hence, you need a tool widely used in the industry. We use Balsamic. It's one of the best wireframing tools out there. You quickly stitch various objects together, move them around, easily align and resize. It's fun and gets your creative juices flowing while keeping you focused at the same time. It's very easy to learn and use, but it also allows sharing with third parties, which proves valuable when you work with a team of UI and back-end developers, often located half across the world. You can share wireframes, get their feedback, comments or ask them to propose improvements. It also gives a level of clarity necessary to convey complex concepts. It removes the unnecessary graphic fluff and lets you drill into the functional design quickly and efficiently.
If you want to develop a successful app, you need to be able to see the big picture. Many developers get lost in the programming weeds and forget about the most important thing - understanding your user. An app can do many incredible things in the background but if you cannot convey them to the user, you are going to fail. That's why it is so important to focus on information architecture/navigation, content and feedback mechanisms.
IA must be user-focused and task oriented. To achieve that, you may want to do some user testing before building the app. A few useful tools exist to validate your IA - Treejack, moderated observation, focus groups. If you don't have time to do formal user testing, at least spend time talking to friends and coworkers about how your app might work and how they would interact with it.
Your content must be written for your audience. Use tools such as Google Keyword Planner to find out what people are searching for. Focus on tone, writing style and ensure your content is free of errors. If copywriting is not your strong suit, hire a content writer and a proofreader - yes, you may need both, as many talented writers are often not the best proofreaders.
Provide direct and indirect feedback mechanisms such as a contact form, Google Analytics, and Google Webmaster tools. Feedback integration must be continuous. You might want to organize it into sprints and releases. If you try to make your application perfect right from the start, you will most certainly fail. Instead focus on core features and user experience and then keep adding functions based on user feedback.
Finally, develop a marketing strategy. You need to know how and when you launch the app. Timing is everything for a successful launch. Write your Twitter and Facebook snippets, set up social accounts, and write promotional emails. You may want to consider using pay-per-click advertising to get that initial SEO boost. Make sure you have robots.txt and sitemap.xml files configured and all your metadata in place. Using Google Keyword Planner will help you zero in on the essential meta-data and make sure your web app has all SEO hooks in place. You need to ramp up fast right out of the gate. Write it all down and create a marketing schedule - you will need it to stay focused.
Building UI and Project Management
Once you have your wireframes ready, you will need to start working in two directions - graphic UI and back end. Here you need a robust project plan and not just in your head. We find it helps create a Work Breakdown Structure (WBS) divided into two buckets - UI and backend. This functional separation will allow you to work on these two components in parallel and then nicely bring them together in the end. We use Mavenlink to keep track of tasks and activities in our project management. We especially appreciate a very functional Gantt feature they provide in their paid package. It gives a bird's eye view of the entire project. We have used many PM tools in the past, and Mavelink provides the best balance between value and cost. If you want time tracking, then they become expensive.
Wireframes lay the foundation to UI work, but it's just the first step. Next, you need the graphic design. Many important decisions will need to be made during this stage such as selecting your style, colors, and fonts. Visual appeal is paramount in gamified apps, as this is what draws the user. You can choose to do the graphic design yourself and spend lots of hours wrestling with Photoshop. We believe in specialization and find a functional specialist for each skillset required. Yes, you will have to pay... but time is money. An expert will know their area much better and will produce better and cheaper results in the end.
Make sure that your graphic design is final and that you cover all details. It is much cheaper to fix usability issues now rather than later. Once you're happy with the overall design, you will need to decide on the front end technology. In most cases, it will be a JS framework such as Angular JS, Backbone JS, Amber JS. The great multitude of technologies is probably the biggest challenge. You can spend an inordinate amount of time researching them and still not have a reliable decision. Our advice is to choose one with a big backer behind it (Google, Twitter) and leverage your existing knowledge and experience. For smaller apps, a JS framework might be an overkill, but keep scalability in mind. One day, your app may need to grow.
Next, you will need to convert your design into a functional HTML/CSS/JS package. Build for mobile first. At least 50% of our users access our app via mobile, and this number has been consistently growing. Focus on mobile usability and make sure you test on real devices, not just screen-size emulators. For example, Flash will not work on Apple devices. Also, test for latest versions of all the main browsers. Some browsers are still not very comfortable with HTML 5, and perhaps you want to stick to XHTML Strict for now. Spend time on thorough UI testing now to avoid additional costs and trouble at the end.
Building Backend
Now, a bit about backend components. Your backend technology will drive database interactions and logic behind your app. There are few questions you will need to answer here, and none of them prove to be easy. The biggest challenge is having a huge number of competing and equally excellent technologies at your disposal. Should you use Django or PHP? What do you handle on the server-side and what on the client-side? What database technology should be used? All these questions need to be answered before you move forward with implementing your idea.
Be prepared to spend lots of time on your research and, most importantly, compromise and avoid gold plating. Zero in on what you need now, not what you think would be good in the future. Put down your core requirements and expectations on paper and stay focused. Widely adopted technologies will have better support and an ecosystem that will reduce your development costs. If you don't have to pick an obscure programming language, go with the most popular one. Finally, you should leverage your previous investments. If you have a lot of Ruby experience, use it. Don't start with a new language just for the fun of it, unless you want to experiment and learn new things. All programming languages are almost equally capable. The farther you wander away from your typical stack, the higher the learning curve and costs will be.
Hosting Your App
Now about hosting. There is a multitude of hosting options out there, but the cheaper an option is, the more work, time and maintenance it will require. During the development process, you can create a local server. Although, we would not recommend this approach. The closer you are to your real hosting environment, the fewer post-deployment problems you will have. The are many low-cost hosting options out there including Linode, Digital Ocean, Vultr where you can host for $10 a month and up. They all offer a variety of operating systems. Building a server for an app with all necessary dependencies can become a tedious task, again thanks to the abundance of server technologies out there.
Fedora would probably be the easiest one to setup since it comes prepackaged with many updated dependencies. If you look for a free-enterprise level solution, CentOS is probably your best choice. We chose Heroku for our projects because we appreciate the simplicity and speed of provisioning new environments and deployment that it affords. Heroku is optimized for running apps and gives you a selection of most popular programming languages. You can host your app for free during development and if you do not need high latency. In their free package, your app will time out after being inactive for a period, and it takes 5-7 seconds to wake it up. Heroku integrates very well with Github, and it takes about 30 seconds to deploy your app with a push of one button - we appreciate this convenience.
Conclusion
Well, we think we have hit on all the most important points. Many find that building an app ends up being much harder that they initially thought. There is so much more to an app than just writing the code. Unfortunately, many developers fail to break out of the "developer" mentality and put their strategic hat on. Think through every detail before you start. Content, information architecture, and promotion strategy should be as important as picking the right programming language or a hosting solution.