Metamesh / Detroit, Mi

We’ve recently been hired to design and develop several web-based applications. We thought it would be a great idea if we described the process step by step. We’ll use our very own client area application as an example.

1. Project Outline

We start by introducing the idea and outlining the fundamental features of the application. The secret behind great applications is to focus on basic functionality and to get it absolutely right. We want to produce an application that has a fantastic, intuitive user interface which is simple and fun to use.

We also want to focus on security, since we’re likely to be storing sensitive information such as addresses, password and emails.

Our client area application is designed to allow our clients to login and check their project’s progress, let’s start by breaking down the primary aspects of our application:

1. User management – This application is designed to be used by multiple users, associated with multiple user groups. We’ll also want to allow these users to edit any personal details (such as email, addresses and passwords).
2. Project Tracking – We’ll want to allow our clients to track the progress of their projects, along with any necessary information such as start date, end date, project overview, etc.
3. Project Assets – Since we’re already tracking each project, let’s also allow users to manage any project assets (such as images, files, documents, designs, etc).

And there we have it, the 3 primary features of our application that we’re going to focus on. This is a great start for our client area; it covers utility, communication and security.

2. Define Application “views”

We’re still very much within the planning stages. We have our primary features outlined clearly, so we know what we need to implement. Before we can start designing our application, we need to know exactly what to design.

So, we begin by thinking about what “views” a user might encounter during typical use of our application.

• Login
• Project List – viewing all associated projects
• Project Detail – Investigating a project’s progress
• Project Assets – Assets (images, files, designs, etc) associated with a particular project
• Account Settings – Allowing the user to edit their personal details (emails, passwords, addresses, etc)
• Logging out

By roughly breaking down the application into views, we can see exactly what’s involved in building this app. We know what we need to design and we know where to integrate the functionality.

3. Design

At this stage, we know what we want our application to do, plus we know exactly where that functionality will appear.

Designing a fantastically-awesome UI isn’t easy, but by following some rules we can make our lives that little bit easier. We want to make sure the application is:

1. Simple
2. Responsive
3. Consistent
4. Efficient

1. Simple – The interface should be very simple and clear to use. We can use techniques such as language and flow to help our visual elements such as icons and layout.
2. Responsive – A good interface provides adequate feedback to the user’s interaction. This could be through the use of loading graphics or validation messages.
3. Consistent – As with websites, an application requires a good level of consistency throughout. Consistency is important, as it will help users build interaction patterns and familiarity.
4. Efficient – The entire idea behind this application is to improve productivity. Through the use of technology such as Ajax, we can make sure our users aren’t left waiting around for a response from our application.

Design is a long process, however it’s important to remember that you don’t need to get it perfect the first time around. Web-application development is an evolutionary process. Over time you’ll make additions and improvements.

4. Implementation

Once we have a solid design of each application view, we can begin actually building our application. This involves the actual programming and extensive testing of each script.

5. Launch

It’s time to push the application live – of course, only once the application has been rigorously tested, and each aspect is working as intended!

And that’s how we design and develop web-based applications. It’s an efficient process, which ensures we cover the fundamentals of application development.