Back to All posts

How to Plan Your Web Application

Feb 2012

When contacted by potential clients, we are often presented with diverse information, including links to example sites, prototypes, feature lists, and wireframes. Other clients come to us with just an idea.

But how can you best identify the features and functionality you need when looking to build a new web application?  With a plan. Let’s consider the three main formats for doing this: wireframes, feature lists and user stories.

Wireframes

A wireframe is a visual representation of your ideas that acts as a design brief for your developers.  It’s a simple plan that can lay out the structure of a single web page or an entire site.

There is software available that allows you to draw wireframes. However, although wireframe software is user-friendly, allowing users to make changes with ease, it also tends to encourage going in to a lot of detail. Simple pen and paper drawings typically provide a more high-level wireframe, as they do not inhibit the thought process.  Some good examples of pen and paper as well as digital wireframes can be found on the Wireframe Showcase.

If at all possible, get your user experience (UX) designer involved in wire-framing. The professional eye of an expert will help you produce a more realistic and usable layout plan, allowing the developer to realise your concepts accurately and efficiently.

Pros:

  • Wireframes help the designer visualise the concept and develop an accurate idea of what needs to be designed.
  • Wireframes show the developer which features are on each page.
  • As most people find it easier to convey ideas visually rather than verbally, you may capture more features with wireframes.

Cons:

  • If you complete the wireframe independently without teaming up with the user experience designer, he or she may hesitate to treat the wireframe as the final design. This will limit your UX designer’s ability to use their expertise.
  • Drawing up a wireframe can be time-consuming, and you may spend unnecessary  time creating a visual map that is likely to be altered later by the professional.
  • Wireframes typically don’t capture the full range of requirements and edge cases that occur in the background, so the developers may not be aware of all your needs.

The disadvantages of this method may outweigh the advantages if you use wireframes as the only way to communicate your requirements.

Functionality/Feature List

This method of composing a plan consists of a text-only list of the functional requirements  for each feature of your application. Some clients find that this is the easiest way to organise their ideas.

When creating a feature list, it’s important to remember that you don’t need to worry about the technical aspects – it’s the developer’s job to determine how to implement your ideas most effectively. Your task is to effectively communicate to the developer the results you wish to see.

Pros:

  • A well-considered feature list gives the developer and UX designer a good understanding of your requirements.
  • A textual presentation of your ideas is more likely to cover non-visible features.

Cons:

  • The most obvious disadvantage is that the feature list lacks the visual representation of the wireframe method, which may limit your ability to plan out and convey your complete vision of the application.
  • Communicating your ideas textually rather than visually may increase the risk of miscommunication. Some requirements and features could be described vaguely or unclearly, which may lead the developer to interpret your vision of how the features will perform differently than you intended.

The feature list is a useful tool best suited for a high-level plan, as it lacks detail.

User Stories

User stories originated from Agile development methodologies, Scrum in particular. The user stories method is also text-based, but differs from the feature list approach in that, as the name suggests, it focuses on users rather than features. Rather than detailing the items the application should feature, this method creates a plan by identifying who the users are and the various roles and requirements they will have. Ideally, real users of the application should be involved in the user story gathering exercise. For example, a job site might have many user roles, including administrators, job applicants, their potential employers, and employment agencies.

The format for the user story is simple, for example:

As a jobseeker

I would like to search for jobs

So that I can find the jobs I want to apply for.

As a site administrator

I would like to be able to take payment for job posting

So that i can get paid before the job is posted.

Writing your stories on index cards will help you easily prioritise your ideas – we recommend to annotate them with must (have), should (have), would (like to have), could (have).

To keep this early stage simple and focused, you may want to create your user stories in a workshop environment with Scrum practitioners, developers, UX designers, and application users present.

Pros:

  • This method is a particularly thorough way of devising a plan. The user stories allow everyone to see the application from different perspectives, which encourages fuller consideration of the users’ needs.
  • User stories allow the user experience designers and developers freedom to apply professional judgement in identifying the most effective solution.
  • The user stories provide a complete picture, allowing the team to more accurately plan out the time and cost of implementing the application.

Cons:

  • User stories are likely to take more time to draw up than the feature list (though perhaps not as much time as detailed wire-framing).
  • Gaining the perspectives of real (as opposed to hypothetical) users may be difficult.
  • You run the risk of providing too little detail if you try to write user stories without the guidance of a Scrum practitioner.

User Stories can be invaluable planning tools to help developers and UX designers deliver features that serve the users’ needs.

Conclusion

To summarize, a feature list can be produced quickly and provides a good starting point to get a ballpark figure of the time and costs involved in developing your application. However, before starting the project we strongly recommend you do a user stories gathering exercise, potentially followed by wireframes prepared with an experienced user experience designer. A good plan can vastly improve a project’s chances of success.