This process was developed by Christina and is described in the book Secrets of Successful Websites.
Phase I - Research & Strategy
Project Site/Client Extranet
This is a primary communication tool for the Simmedia and Client teams. It is a dedicated site that contains all relevant project data and work, including meetings notes, design comps, working models, schedule, contact list, etc. It is the primary viewing area for all design comps, key documents, and reviews.
Comparative Analysis
This exercise provides benchmarks and context and educates Simmedia about the Client's business and existing site. Therefore, it should be completed before the Tsrategy Workshop or Kickoff Meeting. It also serves to educate Client and enable creative thinking. A Preliminary Competitive Analysis often completed in the Business Development phase and should be used for this deliverable.
Project Purpose and Vision
A one page (maximum) description of the project purpose. This is a statement of scope that will be posted on the project site. It is very handy to refer back to as the project progresses, especially when scope changes and decisions need to be made quickly without compromising the overall project.
Strategy Workshop
A 1-5 day meeting, preferably at the Client location. Workshops are appropriate for medium-large projects with a full strategy phase. It is necessary for large web application, e-commerce or dynamic content sites. It fulfills all of the criteria outlined for Kickoff Meeting. It includes a number of specific activities and exercises.
Success Criteria
Identify and document functional- and results- oriented goals. Identify quantifiable success criteria and methods to analyze success of the project. Identify bottlenecks and potential problem areas. Define methods of measurement.
Business Process Flows
Understand and document Client's current business processes. Identify how the web affects/fits into those processes. Identify business decisions Client needs to make about moving or integrating processes to the web.
User Research Questionnaires - Quantitative
Collect data on the target audience, brand perception, technographics, behavior, motivation, expectations.
User Research Questionnaires - Qualitative
Email questionnaires developed for distribution to target users (to be identified by Client). These questionnaires are meant to collect qualitative research about the user's technical baseline standards (computer platform, web connectivity, etc.), their needs, preferences and expectations. This research will be supplemented with one-on-one phone interviews with selected users. Select users for Contextual Research.
Contextual Interviews and Research
On-site one-on-one user research will be conducted for representative users (preferably target Beta partners). We will observe users in their normal working environment and document their work processes, trouble spots, clerical tasks and physical work environment. This will inform the user interface design and also results in specific tactics for communicating the value of the Client's project to each specific user group (including vocabulary, expectations, concerns, etc).
Flow Models (example)
This model illustrates the different roles required to complete a task and how these roles interact, communicate and process information. In many cases, a single person performs many roles at different points along the flow. Once this coordination and communication flow is defined, it is then translated to the user interface of the web application.
Sequence Models
This model illustrates when and where different actions are required to complete a task. It defines dependencies, work-arounds (such as splitting an order to avoid an approval process for high dollar orders), bottlenecks (such as inaccurate ERP/MRP reports), etc. The Sequence Model shows the steps by which the work is done and the triggers for each step.
Artifact Models
Artifacts are collected during interviews. These include hardcopy of various reports, purchase orders, RFQs, quotes, MRP reports, manufacturing specs and drawings, shortage reports, change order requests, etc. These are crucial user interface documents and directly inform the development of the information architecture and user interface layout.
Cultural Models
This model concretizes the intangible qualities of cultural interactions. Cultural influences will drive user acceptance of the system and will determine how integrated the system becomes to a user's work environment. The Cultural Model defines the influences between the different roles (job title) within an organization and across an activity.
Physical Models (example)
This is a diagram that shows the overall layout of the user's physical working environment. Determining the physical constraints of a particular workflow or business process often determines the value-add features of the system that users appreciate most. For example, if the processing of change orders occurs almost entirely by fax and the fax machine is located upstairs from a user, the communication workflow is hindered by fax. The web application removes this contingency. In addition, if users depend on piles of paper for visual differentiation (the 'hot' pile, the RFQ pile, the change order pile, etc.), this will be represented.
User Models (example)
Analyze data collected from the Questionnaires and Contextual Research. A clear understanding of the Client's target users is essential to the development of a system that the user's will find valuable and will, therefore, adopt. Using industry resources, User Questionnaires, and Contextual Research (if applicable), Simmedia will analyze and document the target user profile, including demographics, behavior, motivation, needs and expectations. Describe features the users will want and strategies to meet the user's needs. Also includes an analysis of privacy and security needs for different categories of users (read-only, power user, etc). This will guide the user interface design.
Branding Brief
Define the brand qualities and values (positive and negative). Identify strategies to leverage the brand on the web.
- Corporate Identity
- Online Branding Issues
- Brand Image and Stretch (appropriateness of new channels / offerings)
- Site Architecture (paradigms and schematics)
Provide basic guidelines for creative development. Identify existing branding needs and how these need to be carried over and developed onto the web. Describe the look and feel and branding tone of the site. Outline the approach and context that the designers will use in realizing design elements. Incorporates a brand strategy that examines typography, visual language and use/types of images. It outlines how the Client needs to connect with the target audience - main messages, themes, visual cues, colors, methods of interaction, etc.
Technical Brief
Describe the technical web-specific parameters for construction of the site and why. Based on the User Models, it defines browser and platform standards (including browser versions, screen resolution and color settings), connectivity speeds, appropriate web technologies for specific feature implementation (i.e., DHTML, JavaScript, etc.) and the use of templates for dynamic content. It further specifies how data exchange will occur between various Client business interfaces insofar as it effects the user interface.
Integration Brief (example)
Provides details on the strategy and method for how Simmedia will develop and deliver templates to the engineering team for integration. Includes a discussion of code conventions and code syntax Simmedia will use in an effort to make integration more straightforward and efficient for the engineering team. Includes a list of deliverables that Simmedia requires and expects from the engineering partner.
Site Map (example)
The site map shows the placement and relationship of each unique page template within the site as well as the major levels of navigation. The site map will be used as a road map for the design and production phases. It visually represents and flowcharts the basic architecture of the site. Its main purpose is to identify major areas of content and develop the navigation schema. Provides visual overview/context for Client.
Content Plan (example)
Overall view of content development. Outline proposed approach to development and management (division of work, major sections/types of content, amount of new/existing content, etc.).
Key Learnings
Provide a top level overview of key learnings from Phase 1 documents. Big picture of the project. How the web initiative relates/integrates with the corporate enterprise. High level review of each Phase 1 deliverable.
Strategic Documentation Library, Volume 1 - E-business Strategy
Collect and publish final version of each Strategy Phase deliverable. Collate into a numbered book, format into PDF document, color print and bind for Client.
Phase II - Branding & Design
Logo Exploration
This process is directed by the Creative Brief and includes the design of the logomark and logotype. 3-5 options are presented. From these, a single direction, is selected for refinement.
Logo Refinement
Two iterations of refinement will be completed to reach the final version of the logo. Once final, Simmedia produces a version of the logo for black-and-white and spot-color useage.
Initial Design Studies
Explore different design options, select desirable concepts. Two visual explorations (2-3 pages based on a workflow path) of the overall design approach is created for review and approval by the Client team. These treatments provide an overall visual context and serve to articulate the core branding message of the site. They will address general look-and-feel, layout and top level navigation. In these studies we explore concepts and visual and typographical elements and page layout. They are intended to generate design discussions and feedback from the Client team.
Editorial Guidelines and Formatting Standards
This document determines the production platform, applications and editing guidelines for content development. It defines content standards and specifications. It streamlines content development and ensures that content seamlessly integrates with the technical specifications outlined in the Technical Brief. It recommends optimum format of major content elements. It defines how to best manage and publish news feed content, partner content, third-party (advertising and promotional) content, multimedia content, etc.
Content Outline and Schedule (example)
Detailed breakdown of content into smallest unique elements. Identify owner/doer/approver/publisher. · Element - page name/location · Type - image, text, chart · Origin - dynamic, static · Change - frequent, moderate, infrequent
Publishing Model
A content flow diagram which shows how the content flows from collection/gathering to development to editing/review to publishing on the site. It includes recommendations and guidelines for controlling the information flow of specific business processes and approval check points, such as partner content placement (ads, shopping). It identifies how to prioritize time-based content (some content may be held for future release to maintain a balance of 'newness').
Content Submission Guidelines
A checklist document that defines how content must be formatted and received by third-party content providers (advertisers, partners) in order to ensure that it can be integrated into the Client's site with minimal effort. This document is intended to be given to the Client's partners. Note: some partners will have their own guidelines that the Client will have to conform to.
Content Gathering and Preparation
Simmedia will work closely with the Client team to collect raw materials, gain insight into industry terminology and prepare content for implementation. The various content development deliverables provided above are designed to make this an efficient and optimized process.
Final Design Direction
After review of the Initial Design Studies, Simmedia will incorporate feedback from the Client team into the final design direction which will then be built out for each section or channel. The final design will represent a complete functional path or navigation hierarchy (usually 3-5 pages), from primary to tertiary, or lowest level, navigation. All page development will be based on this treatment. One design illustrating all levels of navigation. Worst case scenarios, or those design treatments which deviate most from the base set of templates, is spec'd out and finalized as part of the Final Design. Navigation and user interface locked down, base set of templates spec'd out. Develop final design direction, including major elements and concepts for graphic vocabulary, navigation hierarchy and information design. Master art for templated pages/areas constructed.
Application Interface Comp
After the look and feel has been created for the corporate site, Simmedia will extend the corporate site design into the look and feel of the application/workflow site. A design comp (2-3 pages based on a workflow path) will be developed for review and approval by the Client team. This treatment will define the look and feel and overall layout of the services site. All page development will be based on this treatment.
Business Applications and Collateral
Simmedia will apply the new corporate identity to 3-5 business applications (letterhead, business cards, folders, envelopes, brochure, etc). This includes the design of the look-and-feel and layout for each application and the final print-ready files for each application. The design assets will be prepared in Illustrator format and the final files will be delivered in Quark format.
Branding Rules and Identity Guidelines
Documentation of the corporate identity specifications including logo placement, size and color restrictions. This document is intended for internal use by their Client's brand and marketing teams and external use for partners and vendors, such as ad designers. This will be a web-ready document for easy distribution to the Client's employees, partners and media vendors. The guidelines includes all of the final resources (Illustrator files, Quark files and fonts).
Strategic Documentation Library, Volume 2 - Online Brand
Collect and publish final version of each brand deliverable. Collate into a numbered book, format into PDF document, color print and bind for Client.
Information Design
Identification of the types and amounts of content (defined by content deliverables) will determine the optimal information design. Each of the major sections and functional elements will require customized information design to best accommodate the user's interaction within these areas. Information design determines the structure for location, flow, sequence and availability of types of information. Includes review of system logic, input/output information and points of feedback (error messages, pop-up screens, etc.). This review requires the Functional Spec from the engineering partner (TBD).
Page Elements
User Interface Design
Simmedia will develop the user interface design and layout for each section and user path based on its specific features, functionality and content. The user interface development includes a wide range of tasks including forms development, navigation paths, functional buttons/links/elements, page layout, contextual and container elements (line art, etc.), brand messaging, color schemas, typography, functional page layout, etc.
Zoning Schema
The Zoning Schema documents the design architecture and details the layout for each page element, including:
- primary navigation
- secondary navigation
- tertiary navigation
- utility navigation
- footer navigation
- branding messages
- logomark and logotype
- typographical images
- body content
- form elements
Strategic Documentation Library, Volume 3 - User Interface Architecture
Collect and publish final version the Page Elements and Zoning Schema. Collate into a numbered book, format into PDF document, color print and bind for Client.
Instructional Content and Editing
This includes the development of instructional and functional content (feedback messages, dialog boxes, etc.). Simmedia has extensive experience developing and managing content for highly functional web applications. In addition to the development of all of the instructional copy, we work closely with the Client team to develop and position the brand statements, slogans and messaging.
Phase III - Production
Working Model
The Final Design is handed off to the production team for live implementation. Simmedia builds these pages out to ensure that navigation and performance conform to the design team's expectations and requirements. This is especially useful for reviewing navigation and interface structures. The Working Model ensures a smooth transition into Alpha.
Flash Components - Script and Storyboards
Simmedia will develop the script and storyboards for the Flash components of the website. This includes the development of the content, layout and pacing of the Flash component. Most Flash components are between 10-15 pages.
Flash Components - Development
Based on the script and the overall design direction of the new website, Simmedia will design the Flash Demo.. The demo will be developed as both a stand-alone, or 'canned', piece (to be included as part of the press kit) and an integrated aspect of the website.
Online Press Kit
Design and develop an online press kit which provides a one-stop resource for press and investors to download everything they might need to write a story or track their investments, including press releases and archives, Flash demos, product briefs, executive management bios and photos.
Usability Testing
User testing to collect feedback about specific design direction, with an emphasis on layout and design elements. Reality check with target users. Modify/refine the navigation and user interface.
Usability Analysis and Recommendations
Immediately after the Usability Testing has been completed a report analyzing the feedback will be developed. Recommendations for changes or revisions will be based on this Usability Testing and it will also be informed by the user research completed in the strategy phase.
Revision Plan
Based on the findings and recommendations from the Usability Testing a Revision Plan will be developed that plots the method, timeline and approval process for the revisions.
Revisions
Review and analyze feedback from Usability Testing. Implement selected changes based on feedback from Usability Testing.
Design Catalog
The final visual treatment, in relation to the site map, is developed into numerous site design files, mostly in layered Photoshop format. Files are created for unique page designs, and also often for representing global elements such as logos. The development of these files is documented in the Design Catalog. This document catalogs the relationship between the site map and the graphic design files, plus notes the role of additional graphic design files.
Design Rules
Define design specifications and standards. Spec the visual elements for the production team to review and implement. Provide unambiguous guidelines for Client Documentation of standard design elements, including typography, color palette, page layout. These rules govern the design's image alignments, provide important reference for understanding the implementation of the site, and for considering design issues that may be involved in future site expansion.
Vertical Build-Outs
Once the Working Model is complete, we will develop all the visual, typographic, layout, forms, etc. elements for each section of the site. Each primary section, or functional path, is built out vertically, from the top down, and delivered to the production team for implementation in Alpha.
HTML Development
Using the Working Model as a template, HTML for each page and functional element is developed. Discrete functional elements are built and prepared for integration into Alpha. This process includes production and building of overall page layout, navigational structure and major graphic and typography elements for all unique pages.
Template Development
HTML templates will be developed for all unique page layouts. Each template will be an HTML file with commented areas for headers, text, images and live data, form data, links and navigation elements. We ensure that templates accommodate future growth and ongoing development. Template guidelines are documented to guide development of new templates in the future.
Alpha Builds
The Alpha is the initial build of the site templates including primary levels of navigation, major features and functional paths. Content is combined with top levels of navigation. Achieving partial functionality with the Alpha allows the production team to perform initial Quality Assurance testing. At this stage we develop and implement production processes and production scripts to automate certain aspects of production. As more sections of the site are built, these sections are added to the preceding Alpha. Each Alpha build is tested and debugged. In this manner, there are many Alpha builds. Each Alpha Build corresponds to a Page Drop for the Engineering team.
Production Catalog
The development of HTML templates, CSS style sheets, JavaScript files, and graphics is documented in the Production Catalog. This catalog includes details on directory structure, file naming conventions, and specific file names. During the production process this catalog also provides a mechanism for tracking the build, QA, and delivery of alpha and beta builds of the site.
Production Rules
Important site build rules developed by the HTML production team are documented in the Production Rules. These rules, for example, govern HTML table construction, provide important reference for understanding how the site is actually built, and provide a foundation for builds associated with future site expansion.
Implementation Notes
During the site build, many specific techniques are used to realize the graphic design using HTML, CSS style sheets, JavaScript, and graphic images. These techniques counter browser idiosyncrasies and limitations, and therefore must be noted in documenting how the site build achieves the rendering of the design. These notes provide a useful background for ongoing and future site expansion.
Beta
The Beta stage is the complete build of the fully functional site to test stability, functionality, dynamic content and performance. At this stage initial quality assurance is conducted on underlying functionality, the primary templates, page layouts and visual elements.
Phase IV - QA & Integration
QA & Testing
Quality Assurance is a part of each step in development, but the final stage of QA and testing occurs on the Beta Site which will be migrated to the live environment. All functionality and interactive elements, as well as layout and design, are tested for cross-browser compliance and performance.
Debugging
Bugs are localized, identified, detailed and prioritized for the debugging process. Debugging occurs simultaneously with testing. This process is tightly managed through use of a rigorously structured reporting system which routes bug fixes and integrates the various resources needed for debugging.
Integration Support
As the templates and final pages are integrated into the live, dynamic environment by the Engineering Team, Simmedia developers and designers will review the live pages and make recommendations and/or tweaks to the live pages in order to insure design and user interface consistency. Verify directories work, permissions are correct, scripts map to correct code libraries, etc.
Delivery to Live Environment
Move development system or FTP all the files to the Client's live server environment. After debugging and associated modifications are completed, the final templates are reviewed, approved and delivered to the Engineering Team. At this point the Engineering Team will integrate the templates into the live, dynamic environment and then conduct QA on the integrated site.
Documentation/Build Spec
Detailed documentation with instructions for production processes, content integration, how to build unique pages, template development, file management, file format definitions, navigational hierarchy and user interface components is delivered in a web-ready format. Documentation of standard design elements, including typography, color palette, page layout, headers, logo placement, image size and placement. This provides unambiguous guidelines for Client Team and is an essential resource for ongoing updates and maintenance as the site continues to grow.
Archived Assets
CD archive with final templates, production processes and scripts, file format definitions, recommended content management processes, etc. Includes Documentation/Build Spec and Strategic Document Library.
Strategic Documentation Library, Volume 4 - Build Spec
Collect and publish final version the Documentation/Build Spec, File Hierarchy, etc. Collate into a numbered book, format into PDF document, color print and bind for Client.
Post-Delivery Support and Training
Simmedia will be available to work with the Client's staff to provide direction, clarification, training and recommendations in support of site updates and maintenance. This includes a review of the Build Spec documentation and page revisions exercises.