Your website is your digital storefront, a crucial touchpoint for attracting and converting customers. But just like a physical store, websites need a refresh every now and then. A well-executed redesign can breathe new life into your online presence, improve user experience (UX), and ultimately boost your bottom line.

However, embarking on a website redesign can feel daunting. Where do you even begin? What are the key considerations? To shed light on this process, we interviewed three design professionals with diverse backgrounds:

• Dani Balenson: An independent creative director who has worked with brands like Oscar Health and Vox Media.
• Michael Rossi: A Senior UX/UI Designer at Hubilo, a virtual and hybrid event platform.
• Kyle Benson: Webflow’s Principal Brand Designer, who has extensive experience in crafting user-centric web experiences.

Rethinking vs. Rebranding: Understanding the Scope

One common misconception is that a website redesign automatically translates to a complete rebrand. Dani Balenson clarifies, “It’s important to know that a redesign is not always a rebrand. It can be a refresh, like putting on a different lipstick or eyeliner. A rebrand is a more holistic shift in your brand identity, including your logo, messaging, and overall voice.”

Michael Rossi echoes this sentiment. “The web has changed drastically in the last decade,” he explains, “pushing everyone to realize that rethinking how their website looks and functions is a necessity.” This doesn’t always mean a complete overhaul. Sometimes, a well-executed refresh with improved functionality can make a world of difference.

Identifying the Need for a Redesign

So, how do you know when it’s time for a website redesign? Here are some red flags to watch out for:

• Outdated Design: Does your website look like it belongs in a different era? Is it visually unappealing or difficult to navigate?
• Poor User Experience: Do users struggle to find what they’re looking for? Is the website slow or unresponsive?
• Mobile Unfriendliness: In today’s mobile-first world, a website that doesn’t function seamlessly on smartphones and tablets is a major disadvantage.
• Conversions are Down: Is your website failing to generate leads or sales? A redesign can help optimize the user journey and improve conversion rates.
• Incompatibility with New Technologies: Does your website struggle to integrate with new marketing tools or analytics platforms?

Planning and Prioritization: Setting the Stage for Success

Before diving headfirst into design, all three experts emphasize the importance of thorough planning. Here are some key steps to consider:

• Define Your Goals: What are you hoping to achieve with the redesign? Increased brand awareness? Improved lead generation? Clarity on your goals will guide the entire process.
• Know Your Audience: Who are you trying to reach? Understanding your target audience’s needs, preferences, and online behavior is crucial for creating a user-centric website.
• Analyze Your Existing Website: Perform a website audit to identify pain points, strengths, and areas for improvement. Tools like Google Analytics can provide valuable insights.
• Competitive Research: See what your competitors are doing well (and not so well) online. This can inspire design decisions and help you identify gaps in the market.
• Content Inventory: What content do you have currently? What needs to be updated or rewritten? Plan your content strategy alongside the design process.

Collaboration is Key: Working with Designers and Developers

Once you have a clear plan, it’s time to assemble your team. Kyle Benson highlights the importance of collaboration between designers and developers: “A successful website redesign requires a close partnership between both parties. Designers bring their creative vision to the table, while developers ensure the website is functional and user-friendly.”

Communication is key throughout the process. Clearly articulate your goals and expectations to your design team. Be open to feedback and willing to iterate on designs to ensure the final product meets your needs.

UI design tools help designers create detailed wireframes, mockups, and prototypes to build functional products. They deal with the specifics of a design, focusing on its functionality.

On the other hand, UX design tools concentrate on the user’s experience with the content. They assist in structuring how users interact with information and the overall experience. These tools help designers plan how content and organization will impact the user’s journey.

Now, let’s explore some UI and UX tools that can be useful in your design process. While some tools have features for both UI and UX, we’ve categorized them to make it easier for you to find what you need.

Sketch

If you’ve worked on UI design, you probably know about Sketch. Many designers love it for good reasons. Sketch offers features like a library of symbols, layer styles, and text styles. It’s easy to make changes across your design, saving you time and ensuring consistency. It also has tools for resizing and aligning elements smoothly. Moreover, Sketch supports many third-party plugins, so you can expand its functionality with various helpful tools. It’s a go-to choice for designers.

InVision Studio

InVision is a powerful tool for UI design. It offers a bunch of applications to help designers create prototypes with interactive elements and animations. But it’s not just for designing. InVision also helps with teamwork. It has features for collaboration, allowing developers to share their work while they’re designing, get feedback, and make documented changes. There’s also a digital whiteboard for brainstorming and collaboration, which helps teams share ideas and get approval before moving on.

Axure

Axure is a tool for prototyping and keeping your project organized. It has a user-friendly interface that lets you document your work as you go. It’s all about creating detailed prototypes. Axure has many of the features you’d find in other popular prototyping and UI design tools. You can test how things work, and it helps with the handoff to developers. It also puts a lot of emphasis on communication, which means everyone on the project can stay updated in real time. All of this makes Axure a great choice for UI design.

Craft

Craft, an InVision plugin, syncs seamlessly with Photoshop or Sketch, saving you time on updates. It’s not just about prototyping and collaboration; it ensures everyone works with the same project version by syncing style changes and edits. Craft stands out with its placeholder content, offering access to Getty and iStock photos for better visuals in your layout. You can also use your data or import it from other sources, making your mockups more meaningful and realistic, unlike many other UI design tools. This feature gives your mockups a truer final design look.

Proto.io

Proto.io claims to create “Prototypes that feel real,” and they indeed deliver. It provides the tools for designing, organizing, integrating, and testing lifelike mockups. It also streamlines collaboration, promoting team communication through comments and video feedback. Proto.io easily integrates with popular testing products such as Lookback, Userlytics, and Validately.

Adobe XD

Adobe XD, part of the Adobe Creative Cloud, is a top choice for UI designers due to its familiarity, vector-based UI tools, and real-time collaboration. It offers a full suite of tools for designing interactions and dynamic elements for prototypes and mockups, seamlessly integrating different design disciplines.

Marvel

Marvel’s design platform is a user-friendly tool suitable for both experienced and novice UI designers. It offers the versatility to create wireframes and interactive prototypes and conduct user testing, all within an intuitive interface. Moreover, Marvel simplifies collaboration with its Handoff feature, which provides developers with HTML code and CSS styles for seamless project development.

Figma

Figma empowers designers to create interactive prototypes and mockups, conduct usability tests, and seamlessly synchronize their work. This collaborative platform operates similarly to Google Docs, allowing multiple users to collaborate in real time. It provides visibility into who is currently working on the project and their activities. Figma’s browser-based interface ensures instant accessibility for all users. As an extra perk, it offers free individual access for users to explore and become acquainted with its features.

Framer X

Framer X, initially a code-only prototyping app, now provides UI design tools for functional prototypes and usability testing. It’s perfect for UI designers who prefer staying updated on web design trends and offers various plugins from their store for added functionality. With an intuitive interface, Framer X is user-friendly.

Origami Studio

Origami Studio, created by Facebook designers, is a robust prototyping tool ideal for more advanced users in the design field. It offers complex features, including a powerful patch editor, to create sophisticated prototypes resembling real apps or web pages. It also seamlessly integrates with Sketch for streamlined workflow.

Web forms. They’re central to product design (as many products essentially consist of forms from the user’s perspective) and typically the most crucial component of any web page they feature on. Given their significance, you might assume that after 25 years of crafting them, we would have perfected forms.

However, that’s not entirely the case.

Well, we do have a fairly good grasp of forms, but the knowledge seems to be somewhat unevenly distributed. Let’s examine some of the prevalent issues associated with web forms and explore ways to enhance them.

Label all the things in the field

You know what’s great? Field labels that stay visible even when I click into the field. I appreciate having a reminder of what the field is asking me.

But, like many brilliant ideas, this one falls short in practice. It creates problems for people with cognitive impairments and for the rest of us. When we fill out forms, we’re usually on autopilot. We don’t pay close attention to each field’s label and what we’re typing into it.

So, having the label in sight to remind me what I’m doing is super useful. It helps me work faster and ensures I don’t have to delete or cut entries I’ve already made just to double-check if they’re right.

This doesn’t mean you have to stick to standard form design practices. If you want to magically move the label out of the field and position it above when I click inside, go ahead.

But personally, I don’t mind either way.

Why Can’t We Use Social Media to Sign In?

I mean, who wouldn’t want the convenience of signing in with just one click, right? Well, maybe not so fast. I have to admit, it does seem a bit reckless to hand over our social media info to every app that asks for it. After all, social networks can disappear pretty quickly. Just look at Vine!

But let’s be real, it’s also incredibly satisfying. Social logins feel like a magic key to the entire internet. It’s as simple as allowing the app access, and voila! I’m in. So much better than filling out endless forms.

Sure, there are plenty of reasons not to use social login, so I won’t push too hard on this one. But it’s something to consider, and if you decide to use it, here are a couple of key points:

1. Give me the option to sign in with my email, just in case I’m not keen on handing over my social data.
2. Be clear about what you will and won’t do with access to my social accounts, especially when it comes to posting without my permission.

Totally use terms like “invalid” in error messages

Sure, feel free to decide what’s valid. You’ve definitely done extensive research on the special characters people actually use in their names, right?

I recently discussed the use of terms like “invalid” in error messages, so I won’t dive into it too deeply here. However, when crafting error messages, it’s crucial to be informative and supportive. Labeling an entry as “invalid” can be not only potentially offensive but also unhelpful because it doesn’t clarify what a “valid” entry should look like. So, please, just tell me your requirements clearly.

Calling an entry “invalid” isn’t just unhelpful; it could also be offensive because it doesn’t clarify what a “valid” entry should be.

Sure, request my “username.”

Because I absolutely want another thing to keep track of, in addition to all the emails and passwords for the other 120 websites I’m registered on.

Are we stuck in the 90s or what?

Here’s a revelation: the idea of an anonymous internet has been studied and found to be not very important. So, unless your website specifically requires a barrier between my online persona and my real identity, please do away with this unnecessary complexity. It only increases the mental effort and makes me more likely to click the “help me log in” button.

Of course, there are websites where anonymity (or the exciting possibility of it) is indeed a key part of the offering. Keep doing your thing. Additionally, I can understand the security rationale behind requesting a username, as it adds another layer of defense against potential hackers.

However, for the majority of websites and forms, it’s an unnecessary inconvenience. Even for those sites that genuinely require it, a brief explanation like:

“Creating a username helps keep your account more secure, as it’s harder to discover than an email address.”

Could greatly help alleviate my perception that you’re needlessly complicating my life. Remember: your customers aren’t aware of your processes or the reasons behind them. So, what’s the harm in sharing this information with them?

Don’t let me see what I’m typing

I understand the security concern. The bullets are there to prevent anyone from seeing the characters I’m typing, a basic security measure.

However, could you provide me with the option to take the risk? I’m in a secure environment, sitting comfortably in my office chair, with no one looking over my shoulder. Can I have the choice to reveal the characters?

Improving our web forms

Looking at all my complaints about form experiences, one thing becomes very clear: great forms require clear communication.

For example, keeping labels visible and not making them disappear when I click: that’s clear communication. Avoiding terms like “invalid”? That’s right, it’s about communication. Providing me with important information before I make a mistake? You got it.

Communication also plays a role in the security issues I’ve pointed out. Without knowing that these measures are in place to protect me, they just seem needlessly annoying. But if these websites took a moment to explain their purpose to me… well, that could greatly improve my relationship with the brand, couldn’t it?

Of course, the other important factor is making things easier for me, reducing the mental effort by allowing me to sign in with a social network, offering helpful error messages, and so on. So, be sure to look for ways to simplify your forms, including asking only for necessary information.

You’re likely aware that contracts are crucial in web design projects, but do you understand what should be in your legal agreement? We’ve got you covered.

Simply put, a contract is a deal between you (the designer) and your client. You both come to an agreement on the contract terms, covering things like what you’ll create, how much it’ll cost, when you’ll complete it, and how you’ll deliver it. What’s especially important is that the contract also addresses what happens in case things don’t go as planned, provides explanations for various “what-if” situations, and sets out the rules for breaches of the contract.

Why You Should Consider Hiring a Lawyer

Hiring an attorney is valuable for understanding legal language, drafting a customized contract, and avoiding common contract pitfalls. Ensure your lawyer focuses on the breach of contract clause, protecting you from nonpayment and late payments. Have an attorney review your template contracts for accuracy. Be cautious not to copy-paste content from one contract to another, as it can lead to embarrassing mix-ups.

The parties involved

Contracts commonly start by introducing the client and the service provider as the parties involved. This introduction includes their names, complete addresses, phone numbers, and email addresses.

Scope of work

Define the scope of work, which means specifying what must be done. This safeguards you from extra tasks, not within the project’s scope, should the client request them. It also ensures that the client isn’t charged for work they didn’t agree to.

The scope of work should clearly outline all the services you will provide. For instance, if you’re planning to conduct load testing on the client’s e-commerce website, you should mention it in the contract and include it in your pricing.

Activities related to web design, even if they seem obvious, should be explicitly stated in the contract. For example, if the project includes extra services like setting up web hosting or SEO, these tasks must be clearly defined in the contract.

Payment

Remember payment details. Specify if you need an upfront payment or will bill when the project is finished. Many freelancers divide fees into different parts. For example:

• 25% deposit before work starts
• 25% when 50% of the work is done
• 50% upon project completion

You can tailor payment steps as needed. Sometimes, 25% is due at the 75% progress mark, or the initial deposit is 50%. Include extra expenses like travel to the client’s office or subscription fees. State your accepted payment methods like PayPal, Stripe, or others. If there’s a late payment fee, make that clear here, too.

Feedback, revisions, and approvals

Your web design contract must detail feedback stages and the process. State when you’ll share work for review and set a feedback time frame. For instance, you might provide five business days for feedback on a prototype. Specify consequences if feedback is delayed, like adjusting the delivery date.

Make it clear how many revision rounds are included in your project price to prevent endless revisions. This aligns with your scope of work, ensuring you’re protected.

Termination of contract and lawsuits

Web design contracts should cover contract termination scenarios. Define actions for:

1. Inability to complete work.
2. Client’s desire to stop work mid-project.
3. Client’s failure to meet payment milestones.

For example, if you can’t finish due to illness, deliver completed work, refund unfinished work charges. If the client cancels, specify the full payment owed.

Note the state jurisdiction for U.S. companies to avoid a lawsuit venue issue.

Privacy and confidentiality

Your contract may include a confidentiality (NDA) clause to safeguard your client’s confidential info. This builds trust as it guarantees the protection of their trade secrets and unannounced promotions.

Your contract should also protect you regarding copyrights. For example, if the client supplies images, specify they are responsible for licenses and permissions, preventing copyright infringement issues for you. This applies to other content mediums as well.

Ownership and work-for-hire

In most cases, the client owns the work, including the site’s source code. The contract’s “work for hire” clause defines code ownership. You can ask the client to add a copyright notice or a “Designed by” credit with a link to your site for potential exposure to new clients. You can also seek permission in the contract to feature the site in your portfolio.

Warranties

You can gain your client’s trust by offering a warranty. This means that any issues related to the website’s programming or design will be fixed free of charge within three or four months after delivery. Clients appreciate this guarantee.

However, it’s important to clarify that if the website is damaged due to hacking or other issues beyond your company’s control, the client will be responsible for repair costs. The contract should state that the client is responsible for their website’s security once it’s delivered.

Force majeure

While it’s often overlooked, the force majeure clause is a crucial aspect of the contract that deserves attention. This clause outlines the procedures in case of unforeseeable events beyond your control, like a global pandemic. In these times, having a force majeure clause in your contracts is highly recommended. You can find a sample clause here, provided by Law Insider.

Additional witnesses

In a remote work setup, contracts are often signed electronically, eliminating the need for additional witnesses. Nevertheless, in certain situations, both parties might choose to include extra witnesses to enhance the credibility of the officially accepted contract, and the witnesses’ contact information is also provided.

Signoff and signatures

The two parties are reiterated here and are invited to sign the contract, thus indicating their consent to its contents.

A contract is a legal document that should foster a positive relationship between you and your client. While it will encompass various clauses to safeguard both parties, it should not appear daunting. Use simple language rather than legal terminology. Whenever feasible, keep the agreement concise, ideally limited to a page or two, to set the stage for a productive working partnership.

You’ve had a meeting with your client and set clear project goals. You understood what needs to be done and agreed on a plan. You felt relieved that everything was in order to start. But then, things begin to change.

Suddenly, the client has new ideas to make the project more successful. These ideas mean doing extra work that wasn’t part of your initial plan. You’ve put in a lot of effort, but now the client wants to go in a different direction, making all your previous work seem wasted. What you thought would be a straightforward path to completion has become a confusing journey through uncertainty.

This is what we call scope creep.

What is scope creep?

You’ve probably come across the term “scope creep” before, but what does it mean? Is it some kind of spell? If you utter “scope creep” in front of your computer, will your simple website design project suddenly transform into an email campaign, a social media contest, and a logo redesign?

Thankfully, no, it won’t.

Scope creep occurs when a project starts expanding beyond its initial agreement. It’s okay for a project to develop and change, but if it leads to you doing more work for the same pay, that’s a problem.

Here are a few ways to deal with it and prevent your project from becoming a nightmare.

Clearly outline the project’s scope in your contract.

We understand you’re a freelancer and you prefer a relaxed and flexible work style. However, being too informal can lead to unhappy clients. After meeting with your clients and discussing the project, it’s essential to document all the important details you’ve talked about.

Detail the work you’ll do — and what you won’t

Clearly define the services you will provide, including the number of pages you will build, the deadline for the client to provide content, and the number of design revisions included.

Also, state what types of work are not included in the contract, such as excessive revisions, and how you will bill for these additional services.

Here is an example:

I will build and launch five web pages, including Home, About, Services, Contact, and Blog. The client must provide content for these pages by 08/15/2023. If content is not provided by that date, the project timeline will be extended. Each page is subject to up to three design revisions. Additional revisions will be charged at a rate of $50 per hour.

Any pages added to the above list will add one week to the project timeline. Content can be produced for any of the above pages or any additional pages at a rate of $500 per page.

Ask for portfolio usage rights.

You can also inquire if you can showcase the work in your portfolio. If they agree, include it in the contract. Be open to flexibility here, as some clients might permit using samples with certain conditions, like excluding their company name or password-protecting the portfolio page.

It’s disappointing to create an excellent project for a client and later realize you can’t display it in your portfolio. I’ve experienced this myself and wish I had asked about it earlier. Lesson learned.

Include a kill fee or down payment.

Sometimes, a client might decide to stop a project that’s already started. Maybe they have other important things to focus on, and your work isn’t a priority anymore.

To make sure you don’t lose the money for the work you’ve done, especially if you agreed to a fixed project fee, include a “kill fee” or request an initial payment.

This way, you’ll get paid for the time and effort you’ve invested. The kill fee can be a percentage of the total fee or based on the work completed up to the point of cancellation.

Creating a contract might sound overwhelming, but it doesn’t have to be filled with complicated legal jargon. Keep it simple and clear. Ensure your client fully understands it before both of you sign it.

Have a plan for scope creep.

What begins as a small change to one webpage often leads to more adjustments on other pages. Eventually, it can even become a full redesign of the whole website.

If you’re billing by the hour, this can be beneficial, but only if it doesn’t interfere with your existing commitments to other clients. Otherwise, you’ll be putting in extra effort without extra pay.

Doing Unpaid Extra Work Isn’t a “Nice”

We all want to be helpful and make our clients happy. But when we start doing things that aren’t in the contract, we’re teaching the client that extra tasks are expected. As freelancers, it’s our job to avoid this.

A contract protects you from doing extra work without extra pay. If a client needs something beyond the original agreement, like an email campaign or a social media update, you can include a change request clause in the contract. This way, any extra work you do will be compensated.

Why Timelines and Payment Schedules Are Important for Freelancers

Having a clear schedule for project deadlines is crucial. Even if you’ve agreed on a timeline and a set fee, you should be prepared for the possibility of extensions. Every timeline should have a little flexibility, but freelancers must protect their time, especially if they have other clients waiting.

In addition to the project timeline, it’s essential to establish a payment schedule and provide clear instructions for submitting payments. This minimizes confusion and ensures you receive the compensation you’ve earned on time.

Schedule time for feedback and edits

The feedback process should have limits to avoid complications. Some clients don’t realize that even small design changes can lead to significant adjustments.

This is why having a clear timeline is crucial. Dedicate specific periods for revisions and specify what kinds of changes you’re willing to make. For example, if the client tries to change their brand within a website design project, you can say no if your contract doesn’t allow it.

Additionally, keep in mind that as a project progresses, some changes become more challenging. It’s easier to reorganize content early on, but if the entire sitemap changes just before the quality assurance stage, it’s a different story. Your contract should account for late changes that might affect the entire project. Charging extra for changes beyond the agreed timeline will protect you from excessive unpaid edits and help manage clients who tend to be overly particular.

Lastly, it’s important to determine who will filter and communicate the feedback. Having one point of contact will streamline the process and ensure everyone is aligned. Multiple people providing feedback can lead to conflicting ideas and confusion about the project’s goals.