Planning & Designing a Custom Web App

by in Development on 20th Jul 2010 · Comments

So you've got a great idea for a new online tool, and you seemingly have many of the skills to create it. It can be as basic as Ta-da Lists, or as robust as Basecamp, all you know is that you can design and code (or hire someone to do the parts you can't do), and want to make your own idea for a web app come to life.

There are likely millions of ideas for great web apps floating around, and yet many of them never come into existence because that one person with the idea doesn't know where to start. With every great project, designers can be hired, and developers will come as well. The real problem that needs to be solved is the planning of a web app.

Planning & Designing a Custom Web App
Image credit: sssdc1

Creating a Custom Web Application

In this post we're going to go over the work flow of creating a custom web application. We're not going to cover best practices for designing its interface, or the best way to organize the backend of the code - that's all for another article. Instead, we'll cover how to design and plan for the functionality of a web app, and discover how effective planning can make for a much easier process to its completion.

Subernova

The First Few Ideas

Planning to build a web app is no different from planning to build anything else - whether it is a business, a product, or a service. Every successful web app has a solid business plan behind it, and is well-built around business principles. So you have a good idea, what is that idea worth to others? The first step is to analyze this question and create a solid business approach to its answer.

Luckily, the theory is that if you think it's a good idea, it probably already has a lot to offer to others. Below are a few essential questions one must ask in order to organize the first few thoughts planning a web app:

  • What problem(s) will this app solve?
  • How will it solve those problems?
  • Who are your users and what are their traits?

Ideas
Image credit: boetter

Let's look at these three a bit closer:

What Problem(s) Will This App Solve?

Nobody sells products, and nobody sells services. Nobody sells subscriptions to web apps either - every business focuses on selling solutions to its buyers. Does your idea for the next app solve a problem common among its intended users?

A popular web app idea that has flourished lately is an 'all-in-one' freelance management app. Basecamp, Freshbooks, and the like are examples of these. They solve many problems freelancers face, usually relating to organization. They solve the 'difficult' part of freelancing, in that they are aimed at making a freelance business easier to manage. Note that the most successful of these apps are not those with the most features, not those with the most unique features, but rather those that solve the problem the best. They are the apps that are simple, and do what they intend.

How Will It Solve Those Problems?

Now is the time to begin brainstorming specifics. You've defined the solution, or set of solutions you hope to provide, but how will you now go about implementing them? What tools do you need to provide to the user of the app to solve their problem? Lay out what they are and how they should function.

Who Are Your Users And What Are Their Traits?

Every product, business, and even web app needs a well-defined target audience. Define who they are just as you would when working with a client. What do they prefer, what are their strengths/weaknesses, and what do they need?

Goals: For You and For the Users

The next step in planning a web app is defining your goals. With goals, one can always be striving for something in particular, and it can help keep track of where one is going. Take a sheet of paper, and write down the goals you'd like to reach, both short-term and long-term. Short-term goals could be related to the launch of the web app, its functionality, or as simple as getting it's first few users. Long-term goals could be related to revenue if charging a subscription fee (i.e. make a full living off of the income from said web app), gaining a large, specific number of users, or being well defined within the related community.

Goals
Image credit: angietorres

Also write down what some potential goals for your users would be. This can help you to better plan the application's features, interface, and so much more. What is the community going to ultimately achieve from this app? Remember, the better your users goals are reached, the more successful the app is, and the more successful you are as its developer.

After brainstorming, setting goals, planning features, and creating a business plan around your intended web app, we're finally done with the planning stage. Now is where the real fun begins: the app's development. Whether you do the design and code yourself, outsource some of it, or even all of it, you still have to do some of the development work. Below is where we begin to decide on the specifics of the web app, specifics that we can build some code around, and eventually get something real launched.

Sketch the User Sequence

Planning out the user experience through sketching is something UI designers often do to achieve the best results. However, even though we're not at the design phase yet, and while the final UI design may be far off, we can use a similar technique to plan out how an individual user may navigate throughout the web app.

To get started, we'll want both a textual and visual sequence. Let's use a sample: a fictional web app for a to-do list.

The User Sequence in Text

  1. The user enters the website and logs in.
  2. User is taken to a list displaying all of their previously created to-do lists, organized by title.
  3. User may click on one to-do list and it will expand / open in new window.
  4. User can do three things: create new list item, check off list item, or delete list item.
  5. User can go back to all lists, and repeat the process.
  6. User logs out.

The User Sequence Visually

Note that we can get a bit more detailed in a visual sequence:

Sketch

This is an incredibly simple example for a very simple web app. However, with multiple features and variations in goals, both the textual and visual plan for the web app can be much different. More complex web apps will require one to plan out decisions, multiple sequences and different directions the user may take.

Know What the Admins Need

It is also important to note what the admin will need on their side. For our above example, the admin may need to keep track of the users that have signed up and keep track of their information. The admin may also want to have control over some layout options. If there is a premium version, the admin will want to know what users have the paid version and which do not, and a statistics section to visualize the growth/decline of the app.

Admin

In a similar way to planning what features the user will need and how they will go throughout the app, use the same process to plan the admin's sequence as well.

Conclusion

Whatever your idea, keep it strong with a solid plan first, and a good start to its design. The first few sketches and wireframes are essential to the overall process for the web app, both in terms of design and functionality. After the base has been set up, the app tested and successful, one can begin to focus on more detailed user interface concepts.

Also, while still maintaining originality, check out some other popular web apps that are within your idea's competition. What works for them, and what doesn't? Determine why some features work better than others - is it the interface's ease of use, the speed of the tool, or the simplicity of the entire app? Take note on other apps strengths and integrate them into your own masterpiece.

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.