{{announcement.body}}
{{announcement.title}}

A 4-Step Process for Web Dev Success

DZone 's Guide to

A 4-Step Process for Web Dev Success

A web application developer offers us a look inside his brain, describing the tried-and-true process he uses to complete development projects.

· Web Dev Zone ·
Free Resource

As web and app developers, our job is to deliver products. Those products can have many properties, but first and foremost they should be:

  • Delivered on time.
  • Maintainable (easy to update, even by a different developer).
  • Of high quality (no 404s or NPEs, please).
  • Solving a real-world problem.

It’s irrelevant whether you’re getting paid to deliver it or whether it’s your passion project for which you’re willing to sacrifice your free evenings and weekends. What’s important is that going from an idea to a fully functioning product can be a complicated process.

Especially when you’re dealing with multiple stakeholders.

It may be a little cliche, but, as a computer scientist, I’m not impartial to structure and order. Therefore, over the years, I have created a four-step process for timely product delivery that my clients have been happy with. 

This process has obviously evolved over time, and I won’t be reluctant to change it in the future if I can think of a way of improving it. If you've got some ideas, don't hesitate to comment below!

Hopefully, this article will prompt you to think about your own process.

Let’s dive in.

Step 0: Problem Statement*

(* All devs start counting at 0, right? I’m not really counting this step, as it’s more of a pre-requisite.)

This is when we gather the requirements from the stakeholders. We interview the client and do our best to identify all of their needs. This phase is an exploration that should conclude with you clearly understanding what is required. You should have a list of all features and a clean, concise problem statement, such as:

“John Doe is looking to implement a mobile-first, responsive website for his new business. The website will provide information about his new product and will allow visitors to purchase the product without much effort.”

This is when you do most of the listening and you let your customer speak. Do not interrupt them.

Step 1: Creative Process

Get your sticky notes and markers out. Here, we brainstorm and come up with ideas for the project. It works best if you have someone to do this with. This step is important if you want to create a truly unique experience for the user and maximize your client's happiness.

I could write an article about this step alone, but we’ll leave that for another day. It’s basically all about brainstorming different approaches and ideas for the product. Look up the Disney method if you’d like to explore further.

Step 2: Design

This is where we can verify whether we understood our client's needs correctly.

Steve Jobs said, “Design is how it works,” and I couldn’t agree more.

It is probably the most important part of the process — and it also tends to be the most overlooked. Us devs have a tendency to just dive right into coding. However, by completing this step, you can save yourself countless hours of work and drastically reduce the number of change requests mid-development.

This step has two important subtasks.

Low-Fidelity Wireframes

LoFi wireframes are a bunch of grey boxes on a page to outline its structure without focusing on how it looks. Here’s an example:

Image title

LoFi frames are important because they highlight the website's functionality.

Once the customer is happy that you have covered all of the functionality, only then should move to the next step.

High-Fidelity Wireframes

A HiFi wireframe is how the final product is going to look. Now that you and your customer have agreed on what’s actually required, you can focus on how it’ll appear. This is when you get a designer to take your terrible-looking gray boxes above and turn them into something people would like to use, such as:

Image title

I know what you’re thinking... “So much work, and we haven’t even written any code yet?!”

Not to worry, your favorite part is coming next.

Step 3: Dev

Now that the product design has been completely approved by your customer, it’s the time to lock yourself away from the world and code!

You work hard to implement testable, maintainable, high-quality software for your customer.

What’s great about following this four-step process is that you won’t be greeted by any surprise features in the development stage (most of the time). You know exactly what to develop because all of the screens are designed and approved beforehand. You’ve asked all of the questions and there’s no back and forth between you and the client. You can just focus on your craft.

Ship it and you’re golden.

Step 4: Support

Yes — support. I know it’s not what you want to do and it’s not “cool.” However, you will have to support your new creation for a certain amount of time. After all, you know all there is to know about it.

And yes, I know you write bulletproof code, but there will be bugs. And yes, they’re all your fault. So get ‘em fixed!

Conclusion

So this is what works for me! After years of trial, error, and tweaking, this is the process that has led me to the most success. Just to sum everything up:

  • Step 0: Interview your stakeholders and create a problem statement.

  • Step 1: Start the creative process and brainstorm ideas for the project.

  • Step 2: Design the project.

    • Start with LoFi wireframes, then get those approved by the client.

    • After that, get a designer to help you create high-fidelity wireframes, then get those approved by the client. This will avoid problems in the future.

  • Step 3: Develop! Do what you were born to do.

  • Step 4: Settle in and be ready to offer support.

That's my process, but I'd love to hear about yours! Hit me up in the comment section below.

Topics:
app dev ,creative process ,product development ,web design and web development ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}