Website Architecture

Studies have shown for every day spent planning and getting the details right, you’ll save three days of remedial tinkering and development. 3-to-1!

That’s why we place such an emphasis on Information Architecture (IA). Because building the structure and wireframes of your website — before any programming and/or design phases are started — will save you money and improve the user experience (UX).

Our I.A. process helps organize the overall website goals by defining, simplifying, and enhancing the overall structure, functionality, processes, and site navigability your customers will experience when; visiting your site, using your services, and purchasing your products.

The easier it is for your audience to use your website and find information, the more likely they will convert from being a potential prospect to a paying customer.

Higher sales with less overall development time — now that’s formula for a success!

The following information outlines the steps involved with a website architecture project and the final elements you will receive once completed.

Website Development and Information Architecture

PHASE I: Data Collection and Analysis

During this phase we work with you to gather and organize information about your prospective product and/or business including:

• Analyze your existing website (if present)
  • Analyze competitors’ websites
  • Determine communication objectives and identity positioning
• Identify target audience
• Define website goals

PHASE II: Build Feature List

A “feature” is defined as any functional Website element that’s integral to its operation.

This is an initial project-wide activity to identify all features required to support the project requirements. The focus that this step brings is incredible and affects the project in many ways.

• Identifies unforeseen features and user elements that could have otherwise been overlooked.
• Assembles a comprehensive list of functions necessary to successfully building your website
• Creates the umbrella vision for potential site expansion
• Provides both the programming and design teams with a framework to build from

The key to this process lies in defining the entire project into features using a simplified, non-technical language.

This means you’ll be able to understand and value each feature. It will also enforce a common language across the project team and reduces the risk of mis-communication or assumptions. This might sound simple and obvious, but it shouldn’t be underestimated.

PHASE III: Develop Site Map and Wireframe

A Wireframe is essentially an enhanced flow chart (without graphical images) that demonstrates every click-through possibility on your site.

The purpose is to define entry points to, and exit points from, each page. It answers questions such as “What actions can be taken here?” and “What is the user’s state of experience as they enter this page and when they leave it?” It focuses on the click-through sequence and user-experience flow of the site.

A proper Wireframe explicitly does not include graphical design, copywriting, programming, or other components; those, at this first stage, serve only to distract from clarifying — exhaustively — exactly what your site must do (and not do) at every point in your visitor’s click-through journey.

Annotated Page Wireframe

• Site map describing the relationships between the web pages
• Key page elements such as header, footer, navigation, content objects, and branding elements
• Grouping of elements, such as sidebars, navigation bars, content areas
• Labeling, page title, navigation links, and headings to content objects
• Place holders, content text and images
• Functional Annotations
• Content Annotations
• Potential Issues
• Goals and overview information — general information about the function and goals for the page.

Page Description Diagram

In a page description diagram, the content areas of the page are described in prose, as in a functional specification. The content area descriptions are arranged on the page in priority order.

• High priority — elements essential to the page.
• Middle priority — suggested items for the page.
• Low priority — elements that would be good, but aren’t needed on the page.
• Goals and overview information — general information about the page’s functionality, goals, exits (links to other pages or processes), and any server side processing or business logic that needs to be addressed.

PHASE IV: Estimation

When the finalized feature list and Annotated Page Wireframe is completed, we will provide you with a line item estimation of the costs to design and program your site into a comprehensive and functional site.

Should you choose to acquire additional estimates, the completed Site Map and Feature List can be provided to other vendors so you may get a true apples-to-apples cost comparison.

Due to the proprietary process we have developed for this service, Annotated Page Wireframe’s and Page Description Diagram’s may not be shared, or otherwise distributed without prior written consent from Kristof Creative.

Let’s get started!