How to Plan Your Website Design in 9 Steps
Planning is essential for most businesses and organizations. Unfortunately, when it comes to websites there is often a failure to plan properly or at all. Skipping this key step may result in a poor functioning website, one that does not provide a positive user experience, or one that does not meet your goals for creating the site in the first place. In this article we share 9 steps for planning your website to meet your business goals and provide a stellar user experience.
Three important things to remember before even getting started:
Unless you're building a tool exclusively for internal communication, your website is not for you—it must meet the needs of its audience.
A website is not a one-time event. It is a flexible, extensible communications tool which reflects, negatively or positively, on your business.
Assemble your key internal stakeholders, or anyone who may weigh in on the success of the project or have something valuable to contribute, during the planning stage.
Now let’s get started planning!
Step 1: Assess your User’s Needs
Key questions to ask when conducting your needs assessment:
Mission statement: who are you and what do you do?
Why was your company/org/entity created?
How would you like to be perceived through your website?
What is the single most important thing visitors want from your site?
For example: find new products, register for a course, join a mailing list. Note: Try to consider this from the customer's perspective. This is not about what you want for the company, i.e., more sales, but what your visitors want from the site.What is the single most important thing you want to convey on your site?
Describe your target audience.
Who is your competition? (A competitive review should follow: look at three sites from similar or competing businesses. See where each website succeeds and fails.)
Why should clients choose your products or services over the competition?
How will you judge if this is a successful project?
Step 2: research
How do you make sure you are delivering the right message to the right people at the right time on your website?
Identifying and understanding your target audience is the foundation of your web design strategy. This involves understanding who your ideal prospects and customers are, who your competitors are and how you stack up, as well as the core pain points that your product or service solves.
Tips for conducting audience research:
Start with current customers
Think benefits, not features
Collect demographic data
Conduct a survey
Look for trends in customer feedback / forums
Go niche -- an own it!
Research your competitors
Create a market positioning map
Audience Personas
Empathy is a core value if designers want to make something that is good for the people who are going to use it. Personas help designers to create understanding and empathy with the end users. Thanks to personas designers can:
Gain a perspective similar to the user’s. Creating personas can help designers step out of themselves and recognize that different people have different needs and expectations. By thinking about the needs of a fictional persona, designers may be better able to infer what a real person might need.
Identify with the user they are designing for. The more designers engage with the persona and see them as ‘real,’ the more likely they will be to consider them during the design process and want to create the best product for them.
The more tailored and personalized your content is for your target audience, the more likely it is they will find your website via organic search and have a positive experience on your website.
Step 3: ASSESS THE BRAND
At bare minimum, a brand should have a professional logo and color palette. A more complete identity includes:
Short statement outlining the mission or purpose of the business and defining its audience.
Headline and body fonts.
Guidelines for use of photography.
Copywriting guidelines.
Additional design elements (glyphs, textures, shapes).
If you need help designing a new brand identity or logo, check out this post for guidance on how to get started.
Step 4: Select a domain name
Why is your domain name so important?
It’s your “first impression”. Your URL is the first thing your visitors will see. A good domain name can make a positive and lasting impression, while a bad domain name can send visitors running.
It affects SEO. Keywords in your domain name can help your SEO ranking.
It defines your brand. The right domain name can increase brand recognition.
Tips for selecting your domain name
Use domain name extensions that appear credible and are easy to remember, like .com, .org or .net
Go with a brandable domain over a generic one (i.e. “nike.com” vs. “bestsneakers.com”)
Shorter is better
Make it easy to type and easy to pronounce
Avoid hyphens and numbers
Consider using a keyword that reflects your website
or brand (SEO!)Think long-term over short term
Check to make sure it’s not trademarked
Use domain name generators when stuck
Step 5: Outline the site structure & content
Content structure is comprised of various parts and will depend on the complexity and size of your website content. Start with the basics, like Home, About, and Contact, and then brainstorm what other pages your audience might expect to see or that you may want to include based on your business goals, such as Products or Resources. Arrange these pages into a hierarchy map or family tree by either sketching it out on paper or by using a tool like LucidChart or Powerpoint to visualize how the site will be structured. Make sure there is a clear sense or organization and that it is easy for users to click thru each page to access the information or resources they are looking for easily. Finally, begin to outline the content you plan to include on each page based on the desired user journey and their “jobs.”
Step 6: Specify design requirements (UI)
Provide a high level description of the constraints and desired stylistic direction for the website.
Brand guidelines – such as colors, fonts, and logos
Image & graphic styles – the style and tone of photos and illustrations
Animations, interactions, or hover states
Tips for planning out your design direction
Start with established brand guidelines
Use web-safe fonts that can adapt to any browser on any device — check out Google Fonts
Use hex/RGB colors that support your brand guidelines, desired tone/experience, and that display well on computer screens — check out Adobe Color
Image & graphic styles -- establish a consistent style that displays well on screen and follows brand guidelines
Animations, interactions, or hover states -- Github (examples of hover states for inspiration)
Step 7: Outline functional requirements
Functionality is how your site actually works. This could be anything about specific parts of the website that need additional explanation.
For example, if you have a signup page, what fields are required? What happens to an entry on a contact form?
Other common examples:
e-Commerce functionality
Integrations with 3rd party tools like CRM software, SEO software, or analytics tools
Multi-lingual capabilities
User roles and capabilities – more than 1 type of user role where users can have different permission etc.
Step 8: List limitations & assumptions
One of the most common problems that web projects run into is that parties have made assumptions about who is responsible for certain tasks or how tools may function or not function when implemented. Your website specification document should include everything that is needed for this project to be completed successfully.
Some common assumptions to think about include:
Content addition & ongoing maintenance: roles & responsibilities after launching
Design and layout customization options/limitations: what is allowable within the scope and what types of customizations/expansions of scope will be saved for later updates
Hosting: will the web files remain on webflow or be migrated to another platform?
Step 9: Set milestones
Milestones are clear phases of the project where you will be working on different aspects of the site. Adding smaller deadlines to complete specific tasks under each milestone will help you keep focused and your project on track.
An example of some typical web project milestones are:
Wireframes
Designs
Development
Testing and feedback
Go Live
Tips for managing your workflow to meet your milestones
Breakdown your milestones into specific tasks
Set due dates for these specific tasks to be completed with ample time leading up to the overarching milestone due date
Put these tasks and due dates on your personal calendar
Schedule reminders of tasks to be completed leading up to their due dates (to help you refocus when you need to!)
Block work time on your calendar like you would schedule an appointment with a teacher or doctor, and hold yourself accountable to completing tasks in those work blocks. Turn off all phone and email notifications to “do not disturb” doing this work block so you can focus all your energy toward completing the task at hand. The internet is a distracting place!
Use a project management tool like Asana or Trello