Important Things to Do BEFORE Designing Your Website
By: Elaine Fogel
Your website is the most important marketing real estate your small-medium business or nonprofit organization has. It’s the number one location for hosting content and engaging target audiences.
What studies tell us:
- The first impression users have of a website are as much as 94% design-related. Northumbria and Sheffield Universities
- 75% of user judgment about your business’s credibility is based on your website’s design. University of Surrey
No pressure, right?
Whether you hire a freelancer or agency, or do it yourself, designing (or re-designing) your site requires some up front due diligence. You don’t want it to simply look pretty without accomplishing your goals! You’ll save money, too, if you can do some or all of this homework before hiring a professional.
Here are the steps I recommend to plan your site strategically:
Discovery Phase
1. Review your business and marketing plans.
It’s important to ensure that your strategic objectives are current and that you refer to them throughout this process. These will keep you on track.
2. Review your current marketing collateral.
Identify any images and content you want to re-use for your website. If you have brand identity standards in place (logo, typography, colors, etc.), keep them handy for reference throughout the project. Brand identity consistency is imperative.
Research Phase
1. Conduct an audit of your current site if you have one.
Why?
A website audit gives you the tools to ensure quality user experiences so that your organization can achieve its strategic goals. Other reasons include:
- Back-end technology and search algorithms change frequently.
- Website errors can cause traffic loss.
- Stale and irrelevant content drives visitors away.
- Content discrepancies may result in Google penalties which affect search engine rankings.
What to analyze?
- Traffic: unique pageviews, visitors, referrers/sources, acquisition, popular pages
- SEO (Search engine optimization): page titles, keywords, meta descriptions, headings, alt image tags, search engine results pages (SERP).
- User experience: ease of navigation, site load time, bounce rate, mobile/desktop, user flow
- User engagement: conversions, user retention, session duration, bounce rate
- Content: professionalism, spelling/grammar, tone, readability, relevance, recency, frequency, social interest, printability, calls to action
The information you glean will help determine what’s working, what is not, and where the site needs improvements, reorganization, and/or revisions.
2. Conduct a website SWOT and Gap Analysis
If you have an existing site, identify its strengths, weaknesses, opportunities, threats and any gaps you want to fill. Involve team members to bring different perspectives and experiences. This helps decide which content to keep (and tweak) and what to delete.
3. User (UX) Experience Requirements
One of the basic principles of user-centric design is the initial and continued focus on users. The more information you learn from users, the higher the probability of developing a successful website.
During this stage:
- Brainstorm with staff and conduct a qualitative survey of 15-20 current users to identify their user experiences and perceptions of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within the website.
- Establish accessibility requirements. Websites should strive to be accessible and compliant with Section 508in the USA. (Check your country’s accessibility program.)
About 8% of the user population has a disability that may make the traditional use of a website very difficult or impossible. About 4% have vision-related disabilities, 2% have movement-related issues, 1% have hearing-related disabilities, and less than 1% have learning-related disabilities. - Identify any compliance and security requirements.
Planning Phase
1. Strategic Objectives
This section will help you identify:
- The primary goals for the website (educate, inform, entertain, fundraise, etc.). These will determine your audiences, content, functionality, look, and feel.
- The overall goals for each audience. Examples:
- Brand awareness
- Customer engagement
- Lead generation (customers, clients, donors, etc.)
- Loyalty and retention
- Product/service information
- Recruit brand advocates
- Sales (events, goods, etc.)
- Specific, measurable conversion goals such as:
- Increase newsletter sign-ups by X% in [timeframe]
- Increase revenue by $XX in [timeframe].
2. Brand Attributes
If you don’t have an existing brand plan that identifies your brand attributes, I highly recommend you do it now. You’ll want to incorporate them throughout your website and other marketing communications channels. Again, it’s important to be consistent in every facet of your organization.
- Brand positioning statement
- Brand personality
- Brand voice and tone
- Brand promise
- Brand assets (graphic standards, logos, logo marks, colors)
- Brand messaging
3. Key Audiences
Knowing who you want to reach is a crucial component of any marketing plan. Hopefully, you (or your predecessors) have identified your primary and secondary audiences (target market segments). If not, I strongly recommend that you do it now. The information will provide the foundation of your site’s information architecture and will identify:
- The segmented audiences you want to attract and serve (demographics)
- User persona: goals, motivations, characteristics, and behaviors (psychographics)
- User cases: things that users want and need the website to do
- How they will use the information they discover
- Calls to action
4. Information Architecture (User Journey)
Before you develop the site’s navigation, start with an initial outline of topic clusters for your audiences. These can include services, products, programs, and other pertinent top-level categories.
Enlist some staff and/or current customers (users) for this next exercise. Direct the group to collaborate and write each main topic down on a separate index card or sticky note. Now, ask them to make cards for each sub-topic.
Next, sort the cards into piles of main topics, adding their sub-topics on top. Now, ask the group to lay out the cards on a table or board with the main topics on top and sub-topics underneath. Ask them to review their results and tweak them, if needed.
This card sorting system is a common user-centered design method for increasing a system’s “findability” and will help you develop the website’s sitemap and navigation.
5. Content Outline
Once you have completed the information architecture, take the results and develop a content outline for each website parent and child page. Remember, you’ll want to make users’ tasks easy to accomplish while making their next steps accessible. Ensure you develop your navigation pathways for simplicity, clarity, and consistency.
Next, identify the types of additional content you want for each page such as images, video, audio, etc. This would be a good time to start collecting these elements so they’re ready to go.
6. Desired Features and Functions
Identify the site features you want to incorporate in the site. Examples:
- Blog
- Categories and tags
- Event calendar
- Forms
- Image gallery
- Live chat
- Search box
- Specific plugins
- Third-party integrations
- Widgets
7. Site-Flow Diagrams/Wireframe
Using the information gleaned from the exercises above, develop a site-flow diagram or wireframe for the website. This “blueprint” will serve as a visual tool for the design and layout.
If you, or an employee, is capable of using a wireframe program such as Adobe’s XD or Microsoft Visio, go for it. If not, you can try some of these free tools:
Alternately, go low-tech and hand draw the wireframe on chart paper.
Elicit internal feedback on the wireframe draft, after which you can make revisions. This will serve as the structural foundation for the website’s design and layout.
8. Page Content
If you’re doing this project on your own, this is where you may want to consider copywriting assistance. Writing web copy is both an art and science. If you cannot afford a professional copywriter, here are some resources:
9 Website Copywriting Tips That Will Increase Your Search Ranking
(Even More!) Web Content Writing Tips
Tips For Writing Your Own Website Copy
Once you have the final copy draft, find a good editor to:
- Proofread it.
- Make any necessary grammatical, spelling, and syntax edits.
- Revise the copy so it is user-centric, engaging, relevant, appropriate to each audience, and achieves page objectives.
Now, combine each page’s copy, elements, and features so you, or your web designer, can add them to the site.
9. Design and Layout
You’re finally ready to design and lay out the website using a local web server. (Never work on a live site.)
Once you have the home page complete, ask for feedback from key stakeholders. It’s better to tweak it now than to wait until the end. Make sure you test the site on different devices and only migrate to your web host once it has been thoroughly beta tested.
Conclusion
Creating a website takes more than designing something attractive. It must have the meat and potatoes to reach your overall business objectives.
To do that successfully, take a strategic approach. Analyze your results regularly and tweak as necessary to ensure your site is fulfilling expectations.
Do you have any tips to add? Got any questions?