Planning a new web design project or a redesign is a tough exercise growing organizations go through.
And in the era of $59 premium templates, understanding the rationale behind spending months in conceptualization, mockups, and prototypes requires some business insight.
There are three reasons custom web design solutions are important to businesses:
- Corporate/brand identity
- User experience
- Conversion rates
It all boils down to solving the business problem of generating new leads or customers through the front-facing web technology.
According to a study by Top Design Firms, a directory of digital and creative agencies, half of consumers (50%) say a company’s website design directly impacts their impression of the brand
Regardless of how beautiful the website is or whether it includes a thousand features, unless it is built with the customer in mind, the buyer persona, and the business model, it’s useless.
Let’s break down each of the aforementioned reasons before we jump to the practical steps of building a new web design brief.
Addressing Business Needs Through Web Design
How do you ensure that your web design corresponds to the business objectives? Let’s examine the following important aspects of your business when determining your company’s web design specifications.
1. Corporate Identity
Companies have an important branding problem to deal with early on. It’s establishing a visual identity that is consistent across the board, from the company’s logo through business cards and brochures for events to the website and social media profiles.
Consistent corporate brand identity is integral to convey the same message across multiple channels and amplify the significance of the brand in a consumer’s mind.
When working with enterprises, we often receive a comprehensive style guide which could be anywhere from 50 to 200+ pages, defining every single color, font, and even spacing between elements on a page. This includes the corresponding sections and elements such as buttons, toggles, forms – you name it.
This level of consistency matters a lot more than you may think. A familiar brand should be amplified, not diluted. Spinning off promotion websites for campaigns, mobile apps, new product variations has to be a consistent exercise that customers recognize immediately.
2. User Experience
Modern design (in terms of user interface concepts and implementation) revolves around user experience.
The user experience (UX) refers to what a user experiences, feels, or thinks about a particular product, system, or service upon using it or interacting with it. This concept is popular in e-Commerce wherein it is vital to gauge how web users respond to or appreciate the different features of a website in terms of utility and efficiency, among others.
Design is an integral instrument for achieving a seamless and pleasant experience while interacting with the website (or a platform).
Think of desktop applications or SaaS solutions you may be using every week. Intuitiveness and ease of use are extremely important to ensure all users can get the job done with fewer blockers and interruptions along the way. The smoother the experience, the higher the adoption.
It gets a bit more complicated when you consider demographics. Your regular 18-year-old teenage girl may expect a Snapchat-like experience. However, a 60-year-old gentleman may be used to their corporate finance platforms or business digital newspapers they have been following daily. If you’ve ever taken a peek at accounting or healthcare software, you’ll understand while enterprise-grade tools like Salesforce or Microsoft Dynamics CRM don’t necessarily obsess around shiny but instead a raw, data-driven interface.
Designing against a familiar user experience is a challenging craft that yields incredible results (when done right).
3. Conversion Rate Optimization
The study of optimizing conversion rates has picked up over the past several years. High-traffic websites and businesses investing a fortune for paid ads leading to their landing pages are dealing with predictable traffic — but their ability to close more customers is often constrained by the UI and UX aspects of their website.
(Not entirely, since copy and content development play an important role, but you get the point.)
In a similar fashion to user experience, conversion rate optimization (CRO) is about converting more visitors with a phone call, an email subscription, signing up for a webinar, downloading a freebie. A frictionless experience increases the percentage of conversions for the same fee.
Small tricks like increasing a font size a bit in the right place, changing the color of your submit button, placing a compelling image next to your form, inserting trustworthy testimonials, and showcasing media features can increase the sales volume for a landing page. Additionally, website speed, smooth animations and transitions, and consistent look and feel across different devices can retain a higher portion of your users.
You won’t get optimal results with an off-the-shelf theme or a generic website. Consumers’ trust will be questioned if they see something off.
Understanding the Dynamics Between Web Design and Web Development
Web design or development projects are quoted depending on the business requirements.
- A $200 website installation project is one thing
- A $25,000 small business web project follows a completely different cycle
- A $300,000 build for the government, a university, or a rapidly growing industry platform is a whole other story
At scale, there are lots of interesting problems to solve with interactive elements and design effects, building galleries for publishers, using the right toggle or an autocomplete system for heavy data-driven platforms, and so on.
Additionally, enterprise-grade projects care about legal frameworks (proper incorporation of cookie consent boxes or ad blocker scripts) or areas like accessibility. This alone is a separate initiative within the project that determines not just the front-facing look and feel, but also the editable areas in the back office.
Starting businesses and solopreneurs may not care as much about the look and feel of the platform unless they seek the experts’ advice. The larger the business, the higher the impact design plays in the long-term success of the company.
Here are several important things for design and development when the business model is clear.
How to Approach a New Web Design Project?
Disclaimer: I’m not a designer, but we build web projects designed both in-house or in collaboration with creative agencies or consultants.
The core process of crafting a new web design or redesigning an existing site requires multiple steps and a number of questions revealed during a set of discovery sessions. That said, a predetermined budget (or a ballpark) is really important to establish the level of detail and the flexibility the creative team can work with – since every iteration takes days or weeks in planning and scope.
Additionally, I’m not going to focus on account management topics that come up every time. Close collaboration between the creative team and the stakeholders is paramount to finalising a project. Delays, lacking assets/content, and scope creep can postpone a project indefinitely – and this is one of the key areas sales and account managers will focus on during the presales and negotiation process.
Partnering up with designers, marketers, and content administrators is often included in the process. Understand who will be involved with the design process on your end and loop them in as early as possible so that everyone is on the same page.
With that in mind, here’s the actionable guide to strategic questions more creative and web development agencies approach with. Make sure you come prepared or understand which areas will require further discussion and brainstorming with the selected agency.
1. Who Is the Target Persona?
Designing a website should be in line with the market and the business habits of your future customers.
Building a design concept for an industrial factory is quite different than creating an eCommerce store for school supplies, or a start-up site for a product. Each comes with a different concept, layout, and marketing funnel.
Essentially picking the color scheme or images happens later in the creative process than most people assume. Crafting a new professional design may take months of research (or even more) in order to cater to business needs.
Determining the target persona is one of the crucial steps in web design planning as it unlocks the information needed for all the steps after it. A well-defined persona will help all teams on the project stay on the same line. When the team makes a decision like “Should we make the color magenta or green?”, they can check the perfect buyer—is it a middle-aged lady that loves sharing funny videos on Facebook and postcards for birthdays or is it a hard-core gamer with all-the-RGB peripherals around him? Of course, a lot more variables come to play, but a well-defined target persona will unify most of the decisions.
I have shared more in this video how to clearly define what your buyer persona looks like.
Demographics, job title, habits, pains, goals, and challenges all play an integral role here. The whole concept will revolve around approaching the pain points first and proposing a targeted solution that gets the job done.
2. What Should Design Achieve?
The website has to ensure a consistent image (invoking certain emotions or associations) aligned with the sales goals of the organization.
In terms of the look-and-feel, different organizations tell a different story. This is reflected through colors, typography, messaging, and the overall mood the website should portray.
- An alternative metal band will resort to a black background with dark images and eccentric fonts across the board.
- Corporate business websites stick to gray, blue, and white colors with black for fonts or accents.
- Eco-friendly/organic businesses usually stick to bright colors, often including shades of green resembling nature feels.
This—combined with the style guide section discussed further—will be reflected in upcoming mockups and wireframes to be delivered by the creative team.
In terms of sales objectives, different components will exist across the site—either in-content or in the form of pop-ups or toggles. Some sites target direct sales, such as B2C eCommerce websites. B2B business websites understand that contact forms or components facilitating scheduling calls work better.
Most business websites work toward an intermediate layer to follow-up leads through email subscriptions or downloading freebies.
The number of downloadable elements across the site affects the conversion rate. A single freebie will need to be more prominent and equally accessible from every page while unique CTAs in all landing pages will cater to the content considerations later on.
Understand what the mood and sales expectations are and clearly discuss them during the creative process.
3. What Web Application Flow Will Be Used?
Most web projects are structured as traditional websites—with a clear homepage, a number of landing pages, informational pages, and a blog.
That said, some projects are more interactive—trying to mimic a gamified engine in a web environment.
The existence of “single-page applications”, or sites that practically include one lengthy page, also requires a separate approach in terms of design considerations (and marketing objectives, since SEO may become a problem here).
Referring to site examples (discussed in step 5) will determine the general approach that the creative team should undertake while planning the web design phase.
4. Is There a Style Guide in Place?
Working with an existing style guide makes planning easier and saves some time.
However, smaller businesses often don’t have a brand/style guide ready. Which is why the creative team is in charge of building a simplified guide themselves—one to be followed during the design iteration (and any upcoming concepts or landing pages to follow).
Here are some design principles outlined in Design by Numbers Design Principles which also offers an extensive free email course on that matter:
One of the first steps in designing/building a style guide is the color scheme. And the most important element of it is the primary color. This can be a multi-iteration process with lots of experimenting, where the designers take into consideration things like contrast, industry, the target persona, the feel the site should present, and more.
The next step is often selecting a color combination from a color picker such as Adobe Color CC using different rules, or modern color palettes such as the Google Material Design one at Color – Style – Material design guidelines. There are other specifics that you may want to learn about, such as “safe colors” for web usage and the like—that’s a handy essay that covers some of those—Colors in web design.
Fonts, stylistic elements, images, and transitions would follow later on.
Ensuring that your design is consistent is important. This conveys trust through the look-and-feel and increases the retention rate of your visitors during the browsing process.
5. Which Brands Influence Design or Functional Inspiration?
To narrow down the limitless possibilities of creative and functional opportunities in a website, a common request account managers and creative leads present is the list of competitors or existing sites that serve as an example.
This could reveal different nuances or preferences you may have in terms of the execution of the project:
- Would you prefer long-form landing pages with tons of sections or short, actionable ones?
- Do you imagine interactive, highly visual home screens or lightweight, data-driven ones?
- Are you into contrast colors or bland, less aggressive shades?
- Is your preference toward a new-age, somewhat dated, or old-school look and feel?
- Are you tempted by complex navigation toggles or mega menus?
- Do you get tempted by header sliders or gallery components?
While the final creative brief will still be as unique as it gets, understanding the visual and technical preferences is really important – and site samples can serve as a great starting point whenever it’s fairly apparent what the main influencing point is.
6. Is Content Already Available?
The old saga for creative teams is the catch-22 of web design: should design come before content or the other way around?
Back in the day, I supported the business rationale of “Let’s get the visual part done and we’ll align the content afterwards.” However, over 200 design-related projects later, I definitely get how confusing a design brief can get if the content perception isn’t followed through.
A long, salesy page would require a solid landing page experience. Content should be broken down into multiple sections to retain attention. But imagining the right flow is nearly impossible without the right copy in place.
A list of websites (screenshot and description) can be visualized with a grid or inverse sections with images on one side and text on the other. But providing a similar design first with a prose-alike page of content won’t really cut it.
I’ve seen hundreds of premium templates providing a “Services” section listing down the top three services provided by the business. But what happens if there are merely 2 verticals or maybe 4? 80% of the templates won’t align this properly – because they haven’t foreseen the possible combinations.
What about pricing pages? They look great until there’s a serious mismatch between the length of the options or features listed. It’s a terrible idea to stick to the traditional look-and-feel if the “Enterprise” plan is five times longer than your “Basic” plan (from a purely visual standpoint it’s off-putting).
Providing a rough content brief or teaming up with the design team throughout the sketching process can solve a ton of problems.
7. What Does the Sitemap Look Like?
Websites evolve by definition (or so should they), but relaunching a project requires some structure. Businesses need to ensure that their strategic pages are being taken care of as well – instead of omitting them from the brief altogether or inheriting the outdated look and feel past the redesign phase.
Oftentimes, some externally hosted landing pages follow through. Old campaigns as well – but some get re-promoted without paying attention to them.
Are you planning a new “Our Team” page? Should you place it under “About” or feature it straight on top for employer branding purposes? How is this aligned with the Career page if you’re hiring? What about an Internship form?
Similar considerations showcase the importance of the teams’ section for the business – or the emphasis on the hiring process at the moment. This will influence other pages in the marketing funnel leading to this one.
Complex sites are pretty complex to structure—and more importantly, different questions will arise in the process. Once the broader scope is clear, some unification and standardization may commence.
8. How to Structure The Navigation?
An old usability rule states this: Your website navigation structure should allow someone to land on any page on your site and find what they need within 3 clicks.
That’s how crawlers work (for the most part).
Simultaneously, you don’t want to clutter the top menu with each and every page your website presents. Less is more – and a clean, simplistic navigation bar will lead your visitors to the right landing pages.
Navigation can still get complex though – especially valid for eCommerce or large portals. Components like mega menus are often suggested – though mostly incorrectly.
Multiple menu bars are also an option, sometimes up to 4 on a page – a tiny top bar menu with generic pages, a more prominent menu alongside the logo, a sidebar menu (or a flexible search filter) – and footer navigation.
Clear navigation will extract the critical pages for the design process and prioritize the creative efforts there.
9. Which Design Elements Will Exist Across All Web Pages?
A study led by a team at Missouri’s University of Science and Technology reports that it takes 2.6 seconds for eyes to finally settle on key areas on a web page.
Users landing on a web page need some accommodation time – and any concern or misalignment may lead to a bounce back to where they came from.
If the same experience is repeated during the navigation within the site itself, you’re facing the actual loss of traffic and conversions within your own funnel.
To mitigate that, sites rely on common areas (still contextual to the corporate and brand identity) available across different areas of the site.
Namely, we refer to them as the header or footer, additional navigation bars (or sidebars), and occasionally multiple variants of these (if you break them down). And establishing what stays on every page gives precedence to certain components – and goes straight into the style guide for other similar elements across specific single pages, too.
A common “user experience best practice” is dropping the navigation bar in landing pages you would promote with paid campaigns to prevent users from leaving the page while reading. While this has some merits in many cases, it probably violates the consistent look-and-feel and leads to bounces for other reasons – lack of recognition in this case.
Additionally, a wildly complex navigation bar will inevitably contribute to this experience – so all components are tied closely together.
10. How Many Unique Design Templates Are Required?
Every page is unique—BUT there are pages that follow the exact same structure (minus the actual text and images).
Similar types of content are often wrapped in the same template for consistency reasons. Think of portfolio pages, case studies, industry reviews, and product pages (to name a few).
Here’s what a reputation management firm for local businesses broadly leverages for two of its industry pages (partial snapshot included):
Two different industries use the exact same breakdown but with different text and media assets in between.
In order to scope the design effort, the creative team needs to understand how many unique layouts should be prepared – and then count the number of unique sections accordingly.
For instance, a 15-page website (in total) may result in 15 completely unique and different page templates to be designed and implemented after.
Conversely, an eCommerce with 10,000 products may only require 10 unique layouts – several fancy page templates, 1 consistent design for all products, the homepage, and the search page.
A news site presenting 250,000 stories may require merely 5 different design pages – a homepage, a generic text page (like About or Privacy, no unique design there), a single view for news, a category view – and the 404 “not found” page.
This is just a representation of what the design thinking process looks like. Make sure you brainstorm ahead of time – because the number of unique templates will predetermine the number of requested sections, and further development is about to be quoted once the design considerations are finalized.
11. What Are the Critical Marketing Funnels to Consider?
According to HubSpot, companies that use well-defined middle-of-the-funnel (MoFu) engagement and lead-management strategy enjoy a 4 to 10 times higher response rate than generic email blasts and outreach.
Having considered your buying personas or target audiences, combine that with the marketing channels you rely on – and you end up with the source of marketing funnels you want to make successful.
What sort of your traffic starts with the homepage? Some businesses report less than 5% (mostly publishers and large eCommerce) while popular startup brands may result in 90% of traffic starting with their root domain URL.
Depending on how crucial a page is, consider the possible flows your audience will take from there. Especially if multiple audiences are about to start in the same place.
Is your blog a main source of traffic? Consider more CTA components across the blog and segment the customers this way as best as you can.
Understanding the user flow is important to ensure the design is consistent and traffic flows in the right direction.
12. Do We Aim For a Mobile-First Project?
According to Statista, 58.33 percent of all website traffic is generated from mobile phones.
Some business segments report over 99% mobile traffic – especially those targeting young individuals and markets rarely owning desktop computers or laptops in the first place.
More conservative businesses—targeting the elderly—see the majority of their traffic coming from desktops instead.
Understanding the core traffic source defines the starting mocks and sketches the creative team should start with. A mobile-first experience is minimalistic and requires expansion once you’ve nailed down the simple look and feel. Starting with the desktop takes a separate approach – often a more feature-rich interface that should be stripped for mobile users.
Design-wise, it’s easier to start off with a desktop version so when it comes to designing the mobile version, you only have to remove the features that complicate a user’s mobile experience of the website and aim for a simpler and cleaner layout.
Study your market first or rely on Google Analytics if you are approaching a redesign phase.
13. What Are the Integral Features to Incorporate?
While mostly targeted toward the web development brief of your project, designers should be prepared for other services (or functional components) they need to integrate into their concept.
Think of contact forms, calculators, live chat, complex application tools, external embeds (like a weather applet or a forex exchange widget), complex graphs displaying data, charts, and other elements from a visual standpoint (like galleries or sliders).
Mandatory features will define mandatory sections that should be placed in prominent global areas (header/footer) or across strategic landing pages of the site. Understanding the core business model of yours and the tooling required to get the job done (apart from creative and copy) is paramount.
14. Are Unique Creative Elements Required?
Is your logo suitable for the new redesign? If not, you may be looking for a complete brand overhaul that will transfer to everything—from your conference brochures to staff t-shirts.
Does the design concept require a more lively, interactive mood? You may even need a mascot in place. Designing a separate mascot is a serious undertaking that should not be neglected at all. Plus, you may need a series of different poses for different pages of your site.
Add to this charts and graphs, animations, a video renders, some fancy transitions, custom-drawn for social media or anything else the brief should include.
Make sure you’ve considered these ahead of time. Omitting this will either creep the project and expand the charges or lead to cutting costs by compromises (or purchasing completely different assets elsewhere disconnected from the core brand message).
15. What Is The Underlying Content Management System?
WordPress is currently being used by 38.5% of the web. The odds are, your web design project will happen on top of WordPress.
However, picking a different system may pose some constraints your design team should be familiar with.
A lot of “site builders” provide limited flexibility in terms of look and feel, and you’re stuck with a template engine with limited options.
Some content management systems also set certain limitations whenever you use their core library. Or the development team may insist on a certain starter framework for implementing the design that is always “fluid” (or fixed), with breakpoints or fully responsive, with limited placeholders in some areas and so on.
Clear out the choice of platform and familiarize yourself with the development costs to follow – unless you’re talking to the same agency for both.
16. What Will Traffic Look Like?
What sort of traffic would you expect post-launch?
Loads of traffic may cause unexpected surprises unless your development build is steady and your server setup is impeccable. Even so, a truly heavy design will add a lot of extra load (and perhaps charges too) unless you’re ready to pay for it.
A creative team may advise you to follow a more “zen” lightweight approach if you’re dealing with heavy loads of traffic. Additionally, certain components like video players may be redesigned to align better with a video streaming service suitable for enterprises. This level of consistency is important.
What traffic sources would be used? If Bing is a strong contender, expect myriads of desktop traffic – and plan accordingly. On the other hand, if Snapchat campaigns work really well, prepare for a heavy load of social mobile traffic.
Since most mobile applications render web projects within their own “embedded” browser, keep in mind that some inconsistencies may be reported unless the QA team is informed ahead of time.
Web Design Implementation
Implementing the required features is just as important as planning for web design. Partnering up with a professional web development agency that can implement the web design plan—putting a premium on the website’s stability, and security—is paramount.
The features of the design must provide outstanding user experience and allow for scaling in terms of traffic growth and incremental volume of content, while also being built as per the standards so that additional features can be added later on without causing regressions (let alone bringing the whole website down).
Indeed, web design and development departments work hand in hand, but solving the business problem comes first.
As a client looking to solve a particular business problem, you probably already have your own ideas in mind that you want to be implemented right away. However, it’s important to work with a web development company that you can rely on for expert advice on web design ideas and services.
Most importantly, if you’re looking into a long-term collaboration with a vendor capable of delivering ongoing functional and creative innovations to your project, your business is uniquely suited for an ongoing retainer plan. Get your brief completed and focus on your business development while your web design and development partner takes care of the rest.
