4 best practices for scoping a new web project

It’s the new year, and you might be hoping to freshen up some aspects of your enterprise website. We love the enthusiasm — but don’t skip the preparation! Before you start, there are steps you can take to ensure your next project goes smoothly. We recently caught up with Maria Gonzalez, Head of Web Design here at Webflow, to share four universal best practices for any team setting out to make a change to their website.

1. Start with a structured brief

“It always starts off with a brief,” Maria says. “The brief asks for the objectives of the project, the problem we’re trying to solve, the metrics, the goals, and any SEO considerations that we need to keep in mind as well.”

While the name might be “brief,” it’s important to go into sufficient detail. You should define the general problem your customer is facing, but also the shortcomings of your existing solution. Then, explain in clear language how your proposed offering (this new website or page) will solve your user’s problem. That’s the “what” of your solution. 

To answer the “how,” describe the value proposition of your project. What problems will this new website solve for your users? How would you explain this if you were talking to them directly? Your answers here can serve as inspiration for your copywriting team to find the right tone and positioning for your users. 

It’s critical to also define any risks and dependencies so that stakeholders understand what external factors might affect project success. If these are articulated ahead of time, you can define an effective strategy to eliminate or get ahead of any roadblocks so they don’t jeopardize your hard work. 

2. Size projects appropriately and keep stakeholders informed 

Once the brief is ready, stakeholders should come together to review it and define the scope. You should scope your projects based on the functional requirements, need for new design work, and existing workload. Do you need to build entirely new visual assets or can you reuse a template with new copy and a few tweaks of creative elements? 

“If we’re only making copy updates or updating visuals on a page, that’s a very small project that takes us a day,” Maria says. A large project — “the classic example is a homepage” — would be something that’s brand new, without an existing template, where there’s a need to create new components and patterns. 

If you’re making a point to reuse components often (see tip #3), you’ll find that most projects fall somewhere in the middle. “Let’s say we had a Marketing Solutions page, and we want to build an Engineering Solutions page. We follow the same established template but with new copy and new creative,” Maria explains. In situations like these, she recommends budgeting more time for the design (e.g., 2 weeks) than the implementation (1 week or less). 

Once scoped, it’s essential to specify the project timeline in a project management tool like Asana. This roadmap serves as a project tracker so stakeholders can be informed of progress throughout the project’s lifecycle.

3. Reuse and recycle components as much as possible

In the interest of delivery speed and visual cohesiveness, you should define and reuse shareable components within your platform. As much as possible, you want to refrain from “building from scratch” and leverage assets that already exist — components, templates, style classes, etc.

If you have a well-defined project brief, you should have a crisp understanding of the user problem and proposed design solution, which can guide designers towards the right components. If possible, you might even want to include a list of potential reusable components in the brief, and/or give an idea of what pages this new one should resemble.

Another benefit of using components is that they can empower your cross-functional partners. Maria explains: “We created templates for our partners in marketing. Now, they can update pages in our Resource Library, for example, without needing to rely on engineers or designers for everything.”

4. Use the design brief as a tool for ongoing alignment

As you start development, especially on a larger project, there are always going to be questions that come up that you didn’t anticipate. Even if you’re reusing components as much as possible, you might need to build something new where there’s a discrepancy between what the designers envisioned and what the developers can actually implement.

When in doubt, refer back to the brief, Maria recommends. Focus on the definition of the problem that you are trying to solve for your customers. How important is this particular component to solving this problem? Is there another way to get the same result that won’t compromise scale?

This is why it’s so important to circulate your brief ahead of time and ensure buy-in. The brief will remain your source of truth throughout the project — guiding designers as they tweak wireframes, developers or engineers as they test new builds or make UI adjustments, or copywriters as they refine content.
‍

The best web plan is a detailed one

No matter what web project you’re tackling, you can set your team up for success with a well-structured brief. This becomes the foundation for how you scope your project and stay on track through launch. And if you see ways to reuse components, you can save time and empower stakeholders in marketing to own more of the website — a win-win.

Now that you’ve covered the basics, want a deep dive on reinventing your web development processes and web team? Check out our ebook on Reimagining web development teams.