Speaker A
A year ago, I obsessed over winning design awards. I thought that's what would make me legit and earn me respect.
Discover how a redesigned website helped an architecture studio land $2M+ projects by improving lead quality and client experience.
Key Takeaways
- Client impact should take priority over industry recognition.
- Understanding client needs through discovery calls is crucial to avoid assumptions.
- A premium, customized website design can significantly improve lead quality and client perception.
- Efficient lead qualification systems save time and increase business effectiveness.
- Structured onboarding and clear communication are essential for successful project delivery.
Summary
- The creator initially focused on winning design awards but shifted focus to client impact.
- Cold emailed 200 architecture firms, only one replied, leading to a transformative project.
- The project won multiple awards and generated $500K to $2M+ in qualified leads for the client.
- Key problems identified: outdated website, poor visual appeal, excessive text, and inefficient lead qualification.
- The new website design emphasized a premium, bespoke aesthetic aligned with the firm's high-end work.
- Improved user experience by reducing clicks and enhancing visual storytelling.
- Implemented a lead qualification system to save the client's team over 10 hours weekly.
- Onboarding and collaboration processes were structured using a Notion portal and questionnaires.
- Brand and website strategy included defining mission, values, messaging, tone, and competitor research.
- Design choices included refined typography, editorial layouts, subtle motion, and focused photography.
Full Transcript — Download SRT & Markdown
Speaker A
But somewhere along the way, I started asking a harder question. What's the point of impressing designers if it doesn't move the needle for the client?
Speaker A
So, I decided to put that belief to the test. I cold emailed 200 architecture firms, pushing my design services with limited case studies, no referrals, nothing to lean on but my gut and skill set. Of those 200 emails, only one
Speaker A
person replied. And that one, yes, led to a project that changed everything. I hate to spoil the ending for the project, but this project was completed over several months ago. And not only did we win several awards on awards.com,
Speaker A
FWA, and CSSDA, but we also helped generate over 500K to $2 million leads for the firm and helped them save over 10 hours per week. So, in this video, I'll break down the full journey of collaborating with the firm, my thinking
Speaker A
behind each design decision and how I built something that served the client and also won awards at the same time.
Speaker A
But the start was rough. So, I kind of partially flopped the discovery call with the client themselves. And that was the biggest lesson that I've learned in any discovery call: to never make any assumption about their business or the
Speaker A
problems that they have until they tell you so. So initially, before going to the discovery call, I thought that they needed more leads into their business, but they shared that their problem was not about the quantity of leads but more
Speaker A
of the quality of leads. So in the initial discovery call, the OAR team expressed that they were drowning in leads and have been using their old site for over 8 years now, and since it was too old, they wanted something new to
Speaker A
refresh along with their new marketing materials. So it was perfect timing. So with their old website, it was functional, but after doing a bit of individual research and just skimming through their old website, I found several key problems. One is visual
Speaker A
sell. It lacked the premium aesthetic that their high-end work deserved, which is a missed opportunity to impress clients immediately. You can easily tell that it was built with a template that all their architectural firms around the area also used. And their
Speaker A
target market isn't just buying houses, but they're investing in custom spaces tailored to their own lifestyle.
Speaker A
So the website needs to feel as bespoke and as personal as their architectural designs, not generic or template-based.
Speaker A
Two, user and client experience. The original site required excessive clicking to access simple information, and especially how important visuals are in architecture. The old site had way too much text and too little visuals to showcase their work and capabilities
Speaker A
to potential clients. And finally, lead qualification. For eight years, their admin team manually filtered all inquiries without any form of automation or way to qualify leads from the get-go. So, their basic contact form with just name, email, message
Speaker A
inputs lacked qualification fields, which led to significant time wasted on qualification calls and constant email exchanges that usually end up nowhere.
Speaker A
So after we've understood the three key problems with their old website being very outdated and not reflective of where they are after 8 years of running the business, we've set out to transform their old template that is very outdated
Speaker A
into something that is more refined and high-end, something that is truly reflective of their architectural work and also refines the client experience so that we can also save the team time so that they can focus on what matters most
Speaker A
in their business. So before we start designing, we need a clear process of collaborating. So this is where the onboarding stage comes in, and we need a system for that.
Speaker A
[Music] The onboarding process is crucial at the start of any web design project. It sets a foundation for successful collaboration by setting clear expectations, creating communication channels, and scheduling regular check-ins. This ensures clients understand what's required from them
Speaker A
while helping them feel welcomed and familiar with the collaboration process. So, every time I start a new project, I always tour my client around my Notion portal, letting them know what is needed on their end to get started with the
Speaker A
project. So, another key part of the project is deeply understanding and researching the client and the project itself. So from things about their business, their customers, their marketing, their brand identity, and their mission. And by the way, if
Speaker A
you're looking for a system to run your own freelance business and also manage projects like these, you can find my exact system called the Freelance OS Notion dashboard down below in the description. So I had the team fill out
Speaker A
a questionnaire to answer everything about their business. And sometimes a brand questionnaire wouldn't be enough.
Speaker A
So that's where the kickoff call comes in. We align on our key goals for the website and get clarity on any vague answers, concerns, or questions they might have. This helps us truly understand their thought process and perspective from vague answers because
Speaker A
sometimes clients don't really know what they want. So, we need to guide them to reach their own answers. So, after this conversation, here are our project goals. One, land more qualified leads for high-end residential builds, so more than 500k builds and beyond. And two,
Speaker A
build a proper lead qualification system to save the team time. And then finally, have a website that authentically represents their premium positioning, accurately reflects their capabilities, and just overall have a website they can feel proud to share with
Speaker A
potential clients. But when it comes to designing websites, it's usually much more than a mood board and a style guide. One absolutely important process to make sure a website delivers results for clients is the brand and website strategy. So this process
Speaker A
would also include things like ironing out their brand missions and their values. And it would also include their brand messaging and their tone of voice.
Speaker A
So making sure that they're coming across very appropriately and very accurately towards their target audience. And the final thing would just be evaluating the market and also researching about the competitors too.
Speaker A
This really ensures we're nailing down who exactly we're talking to and how we can position ourselves and our messaging to emotionally resonate with architecture's clients and drive them to take action. So once we have a really good understanding
Speaker A
how we want to position the firm and come across to their target clients, we can then translate those strategies into the visual direction. Starting with typography with the goal of shifting their brand identity to feel more refined and premium. We went for a new
Speaker A
Montreal typeface as it's more befitting for an architectural firm due to its high attention to detail and just overall a more sophisticated and clean look. With the site layouts, we decided towards a more editorial approach with focus on imagery and typography while
Speaker A
maintaining readability. We also avoided a template-like feel by implementing unique grid layouts and varied typographic hierarchies while also allowing their architectural work to breathe among the negative space. And with motion, the main question to ask here, how do we want the motion to feel?
Speaker A
Should it move and be springy like a guitar string, or should it flow like water? So with motion, we decided we wanted subtle motion to subtly evoke premium work or the premium feel of the website and also enhance the user
Speaker A
experience, not necessarily distract from it. So that was just the rough idea that we wanted to head towards when it comes to the motion direction. We'll go over more about motion later in the video during the development stage. And
Speaker A
then finally, we have the photography direction. So we have primary images of their work.
Speaker A
possible dream home could look like. Then we have secondary images which are more detailed images of the work from the interior shadows and textures. And then finally we have tertiary images which are just images of the team to
Speaker A
show the faces behind the studio and align that with a downto-earth approach. It's time to get serious to the designing stage. Now, for this project, I wanted to take more of a unique angle to approaching it. So, instead of
Speaker A
designing like how you were taught in the books, I wanted to design the website like it's actually designing a home.
Speaker A
I'm no architectural designer, but I understand that a home consists of several spaces. So like bedrooms, studios, bathrooms, and living spaces.
Speaker A
And this naturally connects to what a homepage should include. And so the structure and layout of the homepage should represent who you are as a whole and present all these rooms for clients to explore. And we really really need to
Speaker A
make sure to nail that so that when Oarch clients come in, they have a very strong impression of the firm about their capabilities and confidence of the firm that they will be able to design their dream home. I won't go over each
Speaker A
section specifically, but we laid down the site maps and wireframes in the homepage to guide the client through each part of the website. The core foundation here is to build credibility and certainty for potential clients through pieces of selected works,
Speaker A
testimonial, and overview of the work process and generally more information about the firm and who they are as a whole. This alone is a significant improvement in providing clarity to their messaging compared to their previous landing page. Now, let's zoom
Speaker A
into each room or in this case pages. So for the works and case study page for these two pages, the goal is to provide the user a very unique and custom experience. The main concepts for these two pages are just immersing the user
Speaker A
like they're sitting down and browsing architecture magazines or references that give them a feel of what their dream room could potentially look and feel like. So we're doubling down on this horizontal score section for a unique browsing experience and putting
Speaker A
an emphasis on full screen images to highlight the strong photography that our architecture has. And then for the studio page, we want to inject a bit of personality and philosophy behind their works. So that's from the copy going
Speaker A
over the ethers of the work or each of the team members and the qualifications and also their their awards. And then we have the process page and this page reveals the methodology behind O architectures work. So it shows the
Speaker A
client's detailed workflow that goes into each project stage by stage and we included clear explanations and supporting photography for each stage of the process to build client confidence into their approach. And then for the gallery page as a inspiration I I
Speaker A
referenced the unseen studios gallery page which really effectively showcases their work team and studio images. So the layout creates a very nice experience similar to browsing a photo album. So, we applied this approach to our gallery page design and unlike the
Speaker A
more refined pages, the gallery section intentionally shows the behindthe-scenes elements like the wireframes, site visits, and 3D renders. And this gives clients insight into the creative process like, oh, this is how the process is like building my dream home.
Speaker A
And throughout the design process, there was a lot of tweaking and adjustments, but we don't want to be second guessing.
Speaker A
So designing with intention and precision is really really important so that we can set the stage for developing this website.
Speaker A
[Music] Now, design is wrapped up. To bring this light to life or any kind of creative sites that I usually build, WF was my go-to choice, and I'm happy to say that they're also sponsoring this video as well. All the interactions were
Speaker A
implemented in Webflow using custom code and Gap. So we first built the structural foundation and basic functionality in web flow which allowed me to work at incredible speed with rapid iterations. And once that foundation was solid, we focused on
Speaker A
adding motion and interactions to bring this website to life. And since this project timeline was around 3 to 4 months, the best way I personally find to experiment with motion is iterating live on the website rather than conceptualizing it on Figma or an
Speaker A
animation tool like After Effects. It helps clients feel and interact with the effects while also still leaving room for rapid changes. Motion and animations are probably the most important part of this website. So, we wanted something that is very smooth and sharp. You can
Speaker A
think of it like walking through a beautifully designed home where each room transition feels very intentional and elegant. The subtle animations guide you naturally from space to space just as thoughtfully placed lighting would lead you through an architectural
Speaker A
masterpiece. And also to really reflect the premium feel of the website, we also built very unique interactions to position the firm as a premium firm and also increase how potential clients perceive them. So we have this horizontal scrolling feature that guides
Speaker A
visitors through a curated gallery of projects which encourages them to you know just take their time exploring each of the images and the project. And as users navigate through the portfolio they can better visualize how their own project might look like when engaging
Speaker A
with the firm. And the uniqueness of the website is also reflected on the gallery page where clients can really immerse themselves and wander in the behind the scenes of the firm's work. While these are notable emotions and interactions,
Speaker A
there are a lot other sections that is developed with intention that brings the entire experience together that feels true to who they are and reflective of the work that is focused on human experiences. I still think has done such
Speaker A
an amazing job kind of blurring the lines between a designer and a developer because as someone who's coming from a developer background, I always want to have control over my code and also inject custom code and animations. So,
Speaker A
Webflow has seriously enabled me to scratch my creative itch of building visually cool things while also making impact for clients. Then, the final exciting part of the development is solving the problem of qualifying leads and saving their time on time wasters or
Speaker A
those that didn't qualify. So, we built them a more comprehensive step-by-step form that was automated with Zaper to clarify on the client's design intent, decision readiness, and budget before jumping on an hourong meeting. And this saved the team more than 10 hours per
Speaker A
week just manually manually qualifying leads. Once the development is all done, we needed to set the stage to make sure that the client or architecture team is set up for long-term success since they're also new to using web flow as
Speaker A
well. So with that, we did a lot of quality assurance and testing to make sure that the website was working as intended. And afterwards, we set up a notion portal for all the CMS training videos for them to update their own
Speaker A
website without having to ask for a developer for help. that will make sure if they're lost with anything, they'll always have the training videos to reference.
Speaker A
This is why my products work so far throughout the entire year. Not because of the awards I've won, but it's just more so of the impact and the results I've delivered for them. And that beats any kind of awards that could exist in
Speaker A
this world. It was not only technically challenging, but also really helped me understand more of how my own designs and capabilities really have the potential to solve business problems.
Speaker A
and I couldn't be happier with the result. So, if you have a very serious and ambitious creative founder watching this video and you're looking to reposition your brand to attract higher value clients and do more work that is
Speaker A
more meaningful to you, then you can book a free discovery call in the link in the description to talk more about your website or just to see if we're a good fit to work together or not. So all
Speaker A
in all, I hope you found this video really helpful and just give you a better understanding how an end to end process for an award-winning website that also deliver results would look like. And um yeah, as usual, do your
Speaker A
thing down there. Like and subscribe and see you in the next one. [Music]
Topics:architecture website designlead qualificationpremium brandingclient experienceweb design processNotion onboardingdesign awardsarchitecture marketinguser experiencefreelance system
