A Hybrid Agile / Prototyping Model for Web Designers

How we came up with our hybrid Agile / Prototyping model

We have always been good at prototyping new websites and web applications. We’ve always felt this was where we had an edge over other web designers but we really weren’t confident on the phases beyond the prototyping stage. That’s where we needed help. When we discovered the control offered by Agile project management we fell in love.

In general Agile methodologies have been very focused on development and didn’t allow for the flexibility required by designers at the early stages of a project. The methodologies are flexible enough that we felt we could make them work for our web design business. We realized we need to combine the best of prototyping and Agile to build something a little better.

Combining methodologies and tools for web design

We also wanted to combine common Agile ideas like stories, backlogs, and burn-down charts with our selected web design tools like Basecamp and Harvest. This meant we would have the added challenge of molding both methodologies and tools to construct a process that would deliver web projects to our clients that were more efficient. What was exciting for our hardcore designers was that we were also able to include basic web and application design principles like wire-framing and prototypes to create a more bullet-proof process that seems to be working for clients, large and small.

Transforming your entire shop or firm to run on a different project management process can be hard. It’s been written dozens of times that the hardest part of Agile and Scrum is the transformation process. There really is no easy way to do this. It’s a little like pulling off a band-aid. The good news is that if you are already using Basecamp as your project management tool you’ll find the transformation a little easier and painless. The methodology outlined here is not exclusively for Basecamp users but having used it for 5 years, and felt it was a powerful tool for web designers, we wanted to preserve the simplicity that comes with to-dos and milestones. If you are wondering how you can use Agile and prototyping in your shop then below is a description of how to make the change.

Making the transition to a Hybrid /Agile model

Initially, we tested a few of the Agile principles with new projects that didn’t have any legacy issues associated with them. We recommend that you start with new clients before transitioning existing clients. These early tests were partially successful in teaching us how to break big projects into bite-size pieces called stories. Having some clients managed on the new process gave us insight into what worked and what didn’t. The downside to this multi-process approach was it was very confusing for our team to understand what was a priority and what could be left to later. We quickly figured out that we need to embrace the principles of Agile entirely or we would always be on shaky ground.

The Basics of Agile Methodologies

The bottom line of the Agile ideas it to break complex projects into small little tasks that can be managed daily. The premise is that things are complicated enough during each week of development without us trying to guess what’s going to happen 6 months from now. The reality is that you only have a small area of a project to focus on at a time and that forces you to focus.

Let’s quickly summarize how these methodologies are used in development projects. In generic scrum planning, the product owner (normally lead manager on the client-side) reviews the goals, helps the establishment of priorities and summarizes the backlog, determines a demo location (if not being done online) and any timelines. During the first phase of the project, it’s necessary to set time estimates and priorities for each story and calculate the velocity. Setup daily Scrum meetings and break down the stories into bite-sized tasks.

Why traditional Agile methodologies don’t work well as is for web designers (and what we did to fix that)

The biggest problem with Agile is that it was designed for a single project being managed and created by a single team. This means that it’s really difficult to use the Agile and Scrum principles when you have multiple projects being executed by lots of different people. If you tried to apply the Scrum idea of having a single backlog and daily scrum meeting for each project you would spend hours in meetings each day.

To solve this problem we created the concept of the Universal Backlog. Once the backlog has been created for each project (normally at the start of each project) we then combine all the backlogs for all the projects into a single checklist, this is the Universal Backlog. So now instead of a dozen stand-up meetings and backlog reviews each day we review only one list. That backlog list is sorted by person so we can quickly see who has what tasks assigned to them. This allows us to prioritize and reassign each morning with about 20 minutes of effort. If your team members arrive at the office at different times of the day or work in different time zones then publish the backlog to the web and have the project manager check-in with each person as they come in or come online.

Here is a simplified process for how we plan and manage our projects.

1. Initial meeting with client to discuss project
2. Initial estimate using spreadsheet to determine effort (general descriptions)
3. Proposal with more estimate (see our triple-check method for more detail)
4. Agreement to move to Discover Phase
5. Initial list of stories written on sticky notes and checklists
6. Breakdown stories into tasks (what needs to happen)
7. Internal estimate of effort
8. Kick-off meeting to prioritize stories and associated tasks
9. Assign priorities and review estimates
10. Final estimate backlog
11. Create burndown chart
12. Tasks added to Basecamp as to-do lists

Key to common Agile and Scrum terms:

Story: Unit of deliverable described in first-person terms
Backlog: List of stories
Order of stories: Prioritized by business value (based on project elements greatest value to customer)
Iteration: Number of stories you can complete during a set period of time