Planning & Designing a Custom Web App

Planning & Designing a Custom Web App

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 a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    AWESOME inspiration for an up and coming developer (ME) ! ;)

    – jEFF eMMERSON

  2. / Reply

    This is very similar to planning for a business.

    Both must have a reason for being.

    1. / Reply

      I agree, the idea can also be applied for all project.
      Thanks Kayla

    • pelumini,
    • July 21, 2010
    / Reply

    Kayla. Nice one.

  3. / Reply

    Thx for the presentation !

    • Niubi,
    • July 21, 2010
    / Reply

    Yup, everyone needs to plan, plan and plan! Otherwise the result is a shoddy, disappointing mess that no-one will want to use. I’ve been thinking about creating a web app for DubLi myself – does anyone else think that it’s a viable project?

    • Grayson,
    • July 21, 2010
    / Reply

    Failed to Plan is to Plan to Fail!

    Good read! Thanks Kayla!

  4. / Reply

    Nice article Kalya. It’s full of posts about websites but it’s pretty rare to read articles about web-apps. I am developing a web-app for graphic and web designers. Here is a post where I describe how we made our “interactive mockup” to speed up the development http://bit.ly/cO5Uby

  5. / Reply

    Just like what I have learned in project management. This is an informative article worth to share. Thank you Kayla.

  6. / Reply

    Nice article! Good tips for planners
    I will use it.
    Cheers

  7. / Reply

    Thanks a lot. I am in project management course right now, I am actually a web developer with 1 year of experience, but your article really is very helpful. I am planning to created a web app. Thanks again !

  8. / Reply

    Great Post! Thanks for sharing……….

    • Santiago Carmo,
    • July 1, 2011
    / Reply

    Great article, you shared some good tips to put into practice new apps.
    Thanks.

  9. / Reply

    hii

    Design, as a process, can take many forms depending on the object being designed and the individual or individuals participating. A simple definition is that design is the process of giving form to an idea. “Form” could be a plan of action or a description of a physical thing.

  10. / Reply

    As someone who started the development of, what I consider, a huge web app, this tutorial works for those who are having trouble solidifying their thoughts into a cohesive idea.

    However, as a web app tutorial, from a developers standpoint, it doesn’t help at all. Once you start programming you notice all the ins and outs that you completely missed. For instance..in regards to the user sequence example…Can the user go back? Does it save their progress? Where does it save it? What database are you using, what do the tables look like? How can you reuse that function? Where can they access the list on the page, can they share it? With who? How? Do i need a new page to display different info? Should it be done in AJAX?

    And thats just for starters. For any webapp, you’ll be dealing with tons of different pieces of info that are most likely created dynamically. Its important to stay within targeted boundaries so as to not get confused. Keep each part of the page as an individually working function so that you can reuse pieces of it. This also allows you to structure and organize the workload, which allows for milestones and working components in the early stages of the project.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.