When a website or web application is planned properly the project is more likely to run smooth and profitable. One way to effectively plan a site or application is to have good techniques when you are planning the website’s information architecture.
Step 1: Interview your customer
This step is obvious, but surprisingly it can be overlooked and mishandled. The goal is to have a casual conversation with the client or stakeholder to understand how they operate their business and how they make money. An effective way to do this is to use a website planning checklist. A good set of questions to use in your website planning checklist are as follows:
- Who are your customer segments for each product/service line?
- How does each customer segment buy from you?
- What are the operations behind delivering your product and/or service?
- List products and/or services from most important to least important.
- What are your measurements for a successful website?
- What type of information would like to capture from site visitors?
- What geographic regions do you want to target?
- How would you like each customer segment to use your site?
It’s important to help the parties involved seriously think about these questions and answer them accurately. From these questions you can start to write your functional specification, which is a document that lays the foundation for the website.
Step 2: Write your functional spec
The functional specification is where the majority of the website’s information architecture is formulated.
The beginning of the document addresses the business case for the website and clearly defines the customer segments, methods of reaching those customer segments, and website metrics.
The next part of the document explains functionality and illustrates the global navigation, site sections, site pages, page functionality, workflow, and information flow using process and hierarchical diagrams.
The last part of the document specifies the technology needed to support the proposed architecture such as: server stack, security protocols and certifications, and the content management system.
In order to define a good website information architecture the components of your specification should include:
- Objective of the website
- Functionality overview
- Define customer segments
- Identify goals and key metrics for each goal
- Global navigation diagram
- Diagram each site section with their respective child pages
- Diagram workflow and information flow for forms and applications (shopping cart/checkout, log in, etc…)
- Complete sitemap diagram
- Technical requirements (server stack, content management system, security)
Step 3: Build your content survey
Once your functional specification document is complete you can begin to develop content surveys based on the information. The most effective way to do this is to use your complete site map that you developed in the specification and use it as a guide to enter the content elements into a table for each page in your site map.
For ecommerce sites, real estate sites, and other dynamic content heavy sites its wise to use page types for each table. An example would be to develop a content survey table for all category pages and a content survey table for all product pages. The columns of a basic content survey table should contain the following information:
- Content Element (e.g. logo, site navigation, image slider,)
- Content type (e.g. branding, informative, navigation, section)
- Section ( e.g. site-wide, page, category)
- Priority (comes in handy for tablet and phone layout when elements need cut out)
Step 4: Mock up your templates with Adobe Reflow
Once all of your content survey tables are built you can start grouping together similar page types in order to create page templates. You can end up with 4 page types or as many as 15 depending on the size of the site and its required functionality. The page templates make it easy for the development team to build out the frame work of the site, and also visualize the different layouts for tablet, phone, and desktop devices.
A great tool to mock up your page templates is Adobe’s new Edge Reflow application. This application allows you to effectively design the user interface for all of your page templates on multiple devices, which is a great boost the workflow between planning and development teams.
If you follow these steps and learn how to manage the process effectively I guarantee your web projects will run smoother, and you will have a website information architecture that provides a great user experience for your users and better search engine rankings. In summary, the four main steps to this process are:
- Interview stakeholders by using a website planning checklist
- Write a functional specification
- Develop content surveys
- Mock up your page templates with Edge Reflow
