Web Design Process: How Our Agency Delivers Consistent Projects

The web design process we use at our agency has been refined over the last 15 years to consistently provide our clients with beautiful, user-friendly, and successful project outcomes again and again. We’ve created this web design process guide both for our clients, our prospects, and for anyone else on the web that is wondering what a tried and tested agency-grade website design process looks like.

Schedule a Discovery Call

Fill out the form below and our bio-tech marketing team will be in touch!

At Digital Elevator, we chunk out our web design process into five different project phases, each of which we’ll break down into more detail below.

Before we begin

It’s important to note that the web design process can vary from company-to-company, as well as for different types of projects. A web design for a five page “online business card website” will vary greatly from that of a mid-market 250-page website, or a massive enterprise website. 


It’s also important to note that the end-product is subjective. What is important is that the paying client is happy with the results and that they can align on the process to make a product that everyone is happy with, on time, and on budget.

If you are working with an agency like ours, you should have a timeline. Make sure that you are familiar with the timelines presented so you know your responsibilities as a client and so that you can avoid what is called “scope creep.” Scope creep occurs when the agreed-upon project is expanded or changed, which generally would entail the increase of the budget or timeline. Make sure you are aware of your responsibilities as a client and can communicate and provide assets quickly and efficiently so that you don’t bottleneck the project and cause unnecessary changes to the scope.

The 5 phase web design process

Every project needs a kickoff point to align on goals, expectations, design style, and the foundational elements. For smaller sites this can happen very quickly, but for larger projects it is important to take the time needed to get these aspects right.


This process, of course, assumes that a contract has been signed, money is in the bank, and the agency and client have aligned on particularly important expectations as related to time to launch, the phases and timelines, communication, and the gathering of assets like content and imagery.

Website Phase I- Discovery & Research


Confirm and refine objectives

Confirm and refine target market

Establish success criteria

Establish preliminary site and page hierarchy

Setup staging environment

Create site breakdown—sitemap; wireframe layout; color palette; illustration and photography needs


Confirm and refine objectives

So, you've got a brilliant idea for a website. But, before we jump into the design, let's make sure we know what the heck we're doing. Confirm and refine those objectives. What's the purpose of the site? Is it to sell widgets, spread knowledge, or just to make your cat famous on the internet? Here’s where we nail down your goals like a pro.


With our biotech web design clients, they often want to push out a website that better represents their corporate image, introduce their cutting-edge technology, or improve upon the delivery and aesthetics of their brand as a whole.

Confirm and refine target market

It's time to play web design detective! Who are your potential users? Are they hipster coffee lovers, tech-savvy millennials, or retirees looking for knitting patterns? Identifying your target market is like finding the right fishing spot - you want to cast your net where the fish are biting!


For our biotech clients, the end users are usually a combination of the following: healthcare professionals, C-level executives at pharmaceutical companies, private equity investors, potential employees, and peers. We’ll usually ask our clients for a copy of their buyer personas or at the very least have a conversation about who this target market is so we can understand how to cater the design to them.

Establish success criteria

Success isn't just about the number of likes you get on a cat video. What does success look like for your website? More leads, higher conversion rates, or simply a lot of happy users? Define the yardstick you'll measure success with, and let's get ready to knock it out of the park.

Establish preliminary site and page hierarchy

For larger sites with more complicated navigation, this step is important to establishing the most important pages on the site. For example, if a particular page converts leads really well, we want to potentially consider it as a more prominent page in the top menu or on the homepage as a link.


For biotech websites, the most important pages tend to be science or technology pages, pipeline pages, or leadership pages.

Setup staging environment

The staging environment is where the site will be developed. It is not public-facing or accessible to anyone other than the development team and provides a safe place to work on the site. The website will live in staging until it is ready to go live.

Create site breakdown

As part of our site breakdown phase, we create the sitemap, wireframe, and put the color palette and illustration needs to work.


What is a sitemap?

Think of a website sitemap as the digital blueprint for your site. Just like a map helps you navigate a city, a sitemap is a visual representation of your website's structure. It outlines all the pages, their hierarchy, and how they connect. It's like a table of contents for your website, giving both users and search engines a clear path to explore your content. It ensures that your website is organized and user-friendly, making it easier for people to find what they're looking for. So, if your website is a house, the sitemap is the floor plan that shows where each room is located.

For simplicity sake, it’s important to consider two types of sitemaps:

  1. Simple sitemaps for small websites
  2. Bigger, more in-depth sitemaps for larger websites


For simple sitemaps (think a 5-10 page website) we might just showcase it in the wireframe rather than isolating as a separate project or deliver something that looks like the following:

For a more complicated website where the site architecture is paramount to the success of the user experience, it might look more like this:

Before moving on to the wireframe, we make sure we are aligned on the sitemap portion of the project. The sitemap wll apply to the top menu and footer of the website, so we’ll often take into consideration best practices when we build these out and make recommendations for where to place content.


What is a wireframe?

Wireframes are the skeleton of your website. It's a simplified, low-fidelity visual representation of a web page, focusing on layout, structure, and functionality. 


Wireframes typically don't include detailed graphics, colors, or content. They're more concerned with the placement of elements like text, images, buttons, and navigation. Wireframes help you plan the user experience, ensuring that your site is easy to navigate and that the elements are in the right places before diving into the full-blown design and development. In essence, wireframes are your website's architectural blueprints, helping you build a solid foundation for your digital masterpiece.

Note:

Lots of people get hung up on a website wireframe and expect more design elements than what they are actually intended for. As mentioned above, it’s sort of like a home’s architectural blueprints, not a representation of the final product. This is the place to collaborate on things like where certain content items are placed, the contents of a page, or how a dropdown menu might look. 


This is not the place to collaborate on text, imagery, colors, or aesthetics- we get to that next!

That said, it’s important to know what a wireframe looks like and how the graphic design mockup that is inspired by the wireframe looks, which is coming up in the next section (if you can’t wait feel free to scroll down to see a wireframe a then the corresponding mockup)!

Here’s a wireframe example of an eCommerce page:

Phase II- Development of Strategic Concept

The development of the strategic concept is where the fun begins. It’s where you start to see your vision and the web design agency’s interpretation come to life.


Develop graphic strategies/concepts

Present options for evaluation (digital files)

Client to select concept for refinement

Incorporation of feedback and revisions


Develop Graphic Strategies/Concepts

This is where the creative juices start flowing like a gourmet coffee machine. Developing graphic strategies and concepts involves brainstorming ideas, visual styles, and design approaches that align with your website's objectives and brand identity. It's like creating a design recipe that will make your website visually delicious. This stage sets the tone for the entire design process, ensuring that the visuals will not only look good but also serve a purpose.


When we get into the graphic design phase of the engagement, we’ll start with the homepage, as it sets the rest of the internal pages up for success. In other words, if your engagement with us involves the graphic mockups of several pages, those will come after the homepage design is approved, not in tandem with them.

Present Options for Evaluation (Digital Files)

Time to put your ideas on the table! In this step, you'll take those brilliant graphic strategies and turn them into digital design files. These files can be in the form of images, mockups, or prototypes, showcasing the proposed design concepts. It's like presenting a menu of options to your client. You're saying, "Here are three different visual flavors for your website. Take a taste and see which one suits your palate." Digital files make it easy to share and evaluate design concepts with your team or clients.


Here’s an example of a graphic design mockup based on the aforementioned wireframe:

We’ll then send this, along with any other variations you might receive, over via a digital file like Adobe or Figma.


We’ll then have a meeting with you to review your perception of the mockup and begin any editing processes.

Client to Select Concept for Refinement:

It's decision time! The client steps into the role of a design critic, choosing their favorite concept from the presented options. This is like ordering the dish that made your mouth water the most from the restaurant menu. Once the client makes their selection, it becomes the primary direction for further development. It's the "aha" moment when everyone agrees on the path to take.


The options we provide depend on the scope of the contract, but may vary in things like: images selected, image layouts, font size or color, or icons. 


For example, these two “hero” sections of the homepage have a completely different look. It is up to your team to decide what direction you want to go in!

Incorporation of Feedback and Revisions

After the concept selection, it's time to fine-tune the chosen design. This stage is all about incorporating feedback and making necessary revisions to get the design just right. Feedback might come from the client, stakeholders, or the design team itself. It's a bit like crafting the perfect dish with just the right amount of spice and seasoning based on your taste test. Revisions ensure that the design aligns with the client's vision and objectives, making it a delectable visual experience.


The final mockup is chosen and we then move on to the development of the website according to the design mocks. 

For sites with multiple graphic design mockups, we will move on to repeating the wireframe and mockup stage for all of the additional pages. Rather than doing them one at a time, we can send over all the wireframes at once, then move on to the graphic design portion since we have the general design aesthetic nailed down from the homepage.

Phase III- Development

Here’s where things might go a bit quiet between you and the agency as most of the collaboration and communication has taken place getting up to this point. We’ll be building your new website on a staging server and trying to get it as pixel perfect as possible.

This is also where we will take into consideration any functionality that is needed including things like CRM integration, form integration, plugins, databases, gated content, security protocols, or other specific functionality agreed-upon during the contract phase.


The time required here greatly depends on the size of the website, the functionality needed, the content migration process, and any content items the client needs to send over (bio content, headshots, service page content, etc.).