As a business owner, I know the key to scaling is perfecting your processes. That’s why I asked founder and CEO Matt Sullivan to describe his website design process to me.
His Boston-based web design agency, Torro Media, has earned multiple awards and built websites for LG and Fujifilm. It all started in 2007 when Sullivan built his first WordPress website for his then-girlfriend’s stepfather’s diner.
“That girlfriend? Now, she’s my wife,” he says, and that first WordPress gig has grown to a portfolio of over 500 websites. Today, Torro has 20+ employees and has been recognized by Clutch and Expertise.com for its work. How’s that for scaling up?
In this blog post, Sullivan will share his winning website design process, along with tips and tools.
Website Design Process Steps
The website design process can have different steps depending on individual designer preferences and how far you zoom out. If you zoom way out, it consists of two phases: design and development (yes, they’re two different things!).
But on a more granular level, those two phases can be broken down into multiple steps.
I hopped on a Zoom call with Sullivan, who walked me through his team’s website design process with plenty of examples and screenshares. He may be at the top of his org chart, but he still stays close to the design process with each client.
“As much as I like working on the business, I do like the nitty-gritty of the rhyme and reason of why something should be structured a certain way for a project,” he says.
Ready to learn? Let’s get started.
1. Discovery - “Discover the Vision”
Every good website design process begins with discovery. As the name implies, during this step, the designer will “discover” several things about you and your dream website, such as:
- What are the goals of the website?
- What’s your budget?
- Who will be involved in the project?
- When does the website need to launch?
- What is your brand identity?
This usually commences with a kick-off call or an in-person meeting. They’ll gather as much information as possible about your project and your brand. They might ask for:
- Style guides
- Company values
- Mission statement
- Logos
- Brand colors
.png)
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
For Torro, the discovery phase also involves taking inventory of existing content and doing a site audit, mainly looking at SEO and tech tools.
“We have to form some sort of baseline,” Sullivan explains. “I need to know, from a before and after standpoint, what this journey looks like in redeveloping a website, recreating anything that people hire us for.
“So what I‘ll typically do is get an understanding of tools, analytics, and stuff that’s under the hood at the moment.”
To give me an idea of how it works, Sullivan audited my own freelance portfolio site that I haphazardly built in one day using Squarespace (*gulp*). I’m game for self-deprecation, so let’s dive in!
To start, Sullivan pulls up my site’s stats using SEO audit tool WooRank. The first fix he notices? “On your website, you have two H1 tags,” he points out, and as an SEO writer, I can already guess what he’s about to say. “That's an SEO downgrade.” Oops.
Thankfully, that’s a quick fix, and Sullivan looks for more than just headings during the SEO audit. He’s looking at minification, image optimization, and mobile friendliness, to name a few.
“The thing I really care about here is the ‘Technologies’ tab,” he says, “so I'll typically just jump down to that.”
This tab tells him which CMS the client is on and which analytics tools they use. Knowing this helps Sullivan and his team make recommendations on, for example, which CMS to use based on the client’s existing comfortability.
From there, he heads over to Ahrefs to check the domain’s rating and history. Again, he’s capturing a “before” snapshot of the domain’s health to ensure it maintains it even after launching a new website.
“There‘s certain strings that we can pull in launching a website or certain things we have to be aware of in launching a brand new website to make sure we don’t just plummet,” says Sullivan.
2. Sitemapping and Wireframing - “Map the Experience”
Step 2a: Sitemapping
Next in the website design process, Sullivan uses Whimsical for rough sitemapping to create a basic “blueprint” of the site.
He screenshots the existing site's navigation, pastes it into Whimsical, and maps out the ideal user journey on the client’s website, including macro and micro conversions.
“What we start to do is have the conversation about … in a perfect world, your brand new website goes live today, what is the best case scenario?” says Sullivan. “What is the best thing that could possibly happen when someone lands on your website?”
Whether that’s taking a demo, submitting a form, or calling the company, the team makes note of those goals in the sitemap. This information helps Torro draft the proposal, which the team sends via PandaDoc, complete with custom videos.
The proposal has various sections, including the clients Torro has worked with, the tools they'll be using, and pricing tables.
Pro tip: Need help drafting a proposal? Use this free web design proposal template and customize it to your liking.
Step 2b: Wireframing
Once the proposal is signed, Torro moves to the next step of creating wireframes in Octopus.do, which lets the team map out navigation, link pages to each other, and even start populating sections with content (including SEO tags).
“So we can really lay the blueprint before we even get into design,” says Sullivan. “We can start prepping content, SEO strategies, all that good stuff, from one single snapshot.”
This step of the web design process is crucial in ensuring everyone is aligned on site structure and basic page layouts before investing in detailed designs.
3. Design - “Craft the Vision”
Once the client approves the sitemap and wireframes, it’s time to design the website. For this, Torro uses the popular design tool Figma to create high-fidelity mockups.
Pro tip: For designers, it’s critical to create good web design documentation to hand off to the developers later. Be sure to document your decisions as you go and provide proper details (such as padding and behaviors) so they know how to code your designs.
Torro takes that a step further and creates clickable prototypes. Sullivan showed me one for a project with Cisco Brewers, and I was blown away by the interactivity and level of detail.
In many ways, the prototype feels like a real website.
“But the beauty right now? Nothing's been coded,” says Sullivan.
“We don't code anything until they love the prototypes,” he adds. That’s a smart move for web design agencies, as it avoids having to redo work.
Once the client signs off on the Figma files, Torro moves on to development.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
4. Development - “Build the Foundation”
The development phase is where the designers hand off those beautiful Figma mockups to the developers who will code the fully-functional website.
If it’s a WordPress site, Torro leverages its partnership with web host Kinsta to create a staging site, and shares the staging link with clients.
Throughout the website design process, the team manages projects through Monday.com, sending a link to clients to check off tasks.
5. QA, Testing, and Content Integration - “Perfect the Details”
Even when the developers are done coding the site, the work is far from finished. It’s time for step five of the website design process: testing.
Before launching a website, it’s crucial to ensure that the client approves of how the staging site looks and functions. To do this, Torro uses the website feedback tool Pastel.
With Pastel, Torro can paste any link, including staging links, into the tool, generating a canvas that looks exactly like the site. Through this, clients can provide feedback via comments or even change the text.
Here’s what a Pastel canvas of my freelance portfolio site looks like, along with an example comment of “Change photo:”
Then, the Torro team can consult the comment queue, see exactly what changes need to be made, and track the status of those changes.
6. Website Launch - “Launch with Impact”
Once QA is done and the client has approved it, Torro pushes the staging site live with the click of a button in Kinsta.
At this point, Torro enables all the licenses with the client’s primary domain and submits the new sitemap to Google Search Console.
7. Post-Launch - “Optimize for Growth”
Alright! The website has launched, and the clients are happy. The website design process is over, right? Well, not exactly.
“Once the site goes live is not the end of us,” says Sullivan.
Torro stays on for 30 days post-launch for a maintenance period, during which clients can let them know via Pastel if there are any further changes they’d like to make.
Additionally, post-launch is the time to optimize site performance.
“When the site does go live, it's on a live server, which has different resources than a staging server,” explains Sullivan. “You’re not going to get the best of the best on the staging environment — everyone runs that way.
“But once it's live, we typically will go in and then start to work on page speed optimization to make sure that this thing is flying.”
Torro conducts a performance check to ensure page speed is as fast as possible. Additionally, clients may choose to keep Torro on for ongoing website maintenance or marketing.
“We provide a dashboard to anyone that stays on with us from a maintenance standpoint or runs marketing through us, where they can have any integrations of marketing tools,” Sullivan says.
“This kind of maybe brings us full circle,” says Sullivan. “We had a before (‘Where were we at the start of this thing?’). And now, full circle, people that work with us, we can actually have that level of attribution of, ‘Did this website redesign actually bring you results?’”
Master Your Website Design Process
Of course, perfecting your web design process won’t happen overnight. But studying the processes of successful designers like Sullivan can help you get there.
As you take on more and more projects, you’ll continually improve your web design workflow. The most important thing is just to get started.
If you want to design and launch a website without knowing how to code, try a drag-and-drop website builder. If you need help sharpening your skills, check out these HubSpot Academy website design courses.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
![Copyright Notice Examples: How to Write One for Your Website [+Template]](https://knowledge.hubspot.com/hubfs/copyright-notice-1-20241010-1359425.webp)
