UNETY's Design & Development Process

At UNETY, we believe that as Web sites become increasing more sophisticated, there is a corresponding need to follow a fairly sophisticated development process.

In many respects, this process is linear. Many dependencies exist on past steps. Changing something in the early stages of the project may cost almost nothing. Changing that same thing later on may double the cost of the project and delay the delivery date significantly.

We've built over 200 Web sites and we have seen that it just doesn't pay to try to figure out this process on your own. The subtleties are many and complex. Missing or not completing even a small step can make or break the project, jeopardizing usability, functionality, budgets, and/or deadlines.

Below is a high-level overview of the design & development process we use at UNETY. This is also what we teach in our management class. Feel free to call us if you have questions or need further clarifications.

1. Project Plan At the onset of every project of significant size, it is important to create a Project Plan. This plan should be used as a guide to keep activities on track and coordinated throughout the development of the Web site. The Project Plan should contain all relevant planning information and should be writing, reviewed, and approved by the client before proceeding. Although contents and level of detail will vary with each client, a Project Plan typically contains: A list of Web site goals to ensure that a desirable result will be achieved and to measure success An explanation of how these goals will contribute to the company and a discussion of the expected return on investment A description of the target audience(s) and their needs, habits, and preferences and an explanation of how the Web site will benefit them A preliminary Online Marketing Plan, containing a discussion about how this Web site will be marketed and how this will be integrated into existing marketing efforts An analysis of the online competition with emphasis on their strengths and weaknesses compared to the client A work schedule in calendar and/or Gantt Chart format An implementation budget A list of team members' roles and responsibilities A description of an assumption or dependencies A written description of the desired look & feel of the site 2. User Interface Design The next step in creating a Web site is to decide what the pages should look like, how they should be arranged, and what they should do. This is called the User Interface Design. In order to create a competitive and professional-looking Web site, it is important to have direct access to graphic designers who specialize in designing for the Web. Professional user interface designers are skilled at creating an easy-to-use site as well as producing stunning graphics and state-of-the-art special effects. Designers work closely with clients to create the desired look and feel and to layout the organizational structure of the Web site. Their design may coordinate with existing collateral or may be a brand new image. The User Interface Design should contain all relevant design information and should be writing, reviewed, and approved by the client before proceeding. The User Interface Design step typically results in the following: A Hierarchy Diagram of the proposed Web site, showing the major sections and navigational links of the site. A Functional Description of each of the proposed sections in the site, describing what users should be able to do and see in that section. If features will be phased in, the timeframe/phase needed should be clearly noted. Also, who is responsible for the work in each section should be noted. A full-color Mockup of the master page and one or two subpages created in Photoshop and suitable for framing or use in presentations, proposals, promotional or fundraising materials etc. Electronic version of final design will be viewable online, to scale and in full color. This version will become the working prototype in the next step Graphical Design Standards to ensure consistency and increase quality. These standards will be machine-readable, to ensure consistent and uniform application across the site Hand-drawn sketches of the layout of the rest of the major screens on the site. These sketches can be used to simulate user sessions and to verify the functionality and ease-of-use of the site    3. Online Prototype The next step in creating a Web site is to make an Online Prototype, which is a full-color, full-scale mockup of the major parts of the new site. The navigation is working, so a user visit can be simulated, but only a minimal amount of programming is done. Prototyping allows clients to take their site for a test run early in the process to verify the site will have the features and functions outlined in the planning step. This allows them to make changes early on, when it is much less expensive. This saves time and money, and helps ensure the desired results are achieved. All significant parts of the new Web site should be prototyped, verified, and approved by the client before proceeding. The prototyping step typically results in an online mockup of the major parts of the new site, produced from the GUI design, complete with: Preliminary graphics rendered at low-resolution suitable for use on the Web A preliminary version of the text to be used on the site including labels, headers, directions, and descriptive text. Buttons and links that work Screens scaled to fit on a typical user's screen with a minimum amount of scrolling Code that is compatible with standard Web browsers. Prototypes can be password protected at a nominal cost, if desired. 4. Database Design The next step in creating a Web site is to create a relational database design for the new site. The database design step typically results in the following: Data Dictionary - a list of the proposed tables and fields showing the table and field names, the characteristics of the data types, field lengths, table indexes, primary and foreign keys, possible values, if any, etc. Table / Field Naming Standards - description of the naming conventions used in designing the new tables and fields Entity Relationship Diagram - a diagram showing the relationships between fields in the tables Database Growth and Migration Plan - outlines what steps will be taken in the design process to allow the database to grow To save costs and speed development, the database will be created with Microsoft Access and then migrated to another ODBC-compliant database suitable for use on the Web, as needed. The database design should be prototyped, verified against the GUI, and approved by the client before proceeding.   5. Business Rules The next step in creating a Web site is to identify the business rules to be applied to the each page of the new site. Business rules are the rules that govern the unique ways a site should work. They could range from calculating shipping costs to determining the closest store to a customer's location. This step typically results in the following: A complete mapping of the fields on each screen to the fields in the database A discussion and written description of how each field on each screen should work, its size, data type, and access permission 6. Custom Programming The next step in creating a Web site is to write the code for the site. This step typically consists of one or more of the following: Converting HTML files to Cold Fusion files by: adding comment blocks at the top of each file and throughout the code removing superfluous, slow, or erroneous auto-generated code fixing tabbing and indentation, adding application variables renaming the file extensions from *.html to *.cfm creating dynamically included files such as headers and footers, etc. Programming session variables, client variables, and/or cookies as needed depending on logic Generating, testing, and installing database queries and output loops Writing code to generate email alerts on specific events Programming the logic to calculate values dynamically such as shipping and handling costs, sales tax, etc. Writing routines that restrict/grant access to various areas of the site Building customized reports, graphs, and charts dynamically Developing maintenance screens to enable clients to modify database contents via a Web browser Writing functions to export information to existing client systems such as accounting, inventory, procurement, etc. Testing each feature within the Web site Creating status reports, as needed.   7. Specialty Items If you want to grab your viewers’ attention immediately with a custom feature such as a multimedia presentation. This is the part of the process when our special effects experts step in. We determine the target audience of your site and come up with an audio, video, animation or Web presentation that will add style to your site. This step typically consists of creating one or more of the following: Flash animations Virtual reality Streaming audio Streaming video interactive chat rooms/sessions Interactive games Quizzes/Exams Surveys/Polls Guest Books Calendars Registrations Online Catalogues Shopping Carts Image Morphs Image Manipulations (for example, rippling water) 8. Full Site Testing Once all the features of the site have been programmed and individually tested, the next step is integration testing. During integration testing, the entire Web site (end-to-end) is checked out on a test server to ensure that all components are working together correctly. All parties should participate the testing, including the developers, the client, and even some friendly users, if at all possible. On customer request, test site may be password protected to ensure privacy. At a minimum, at least one week should be allowed to ensure software and system bugs are found before publication, not after.   9.Site Publication Once the site has been thoroughly tested, the next step is to publish it so that the intended audience can view it.This step typically consists of the following: Cleaning up of temporary, experimental, backup, and/or versions of files that are unneeded Replication of the test site on the official production site Testing of the production site to ensure that the replication was performed properly and the site is fully functional On client request, creation of CD-ROM with Web site code, *.psd files, data sources, and any other appropriate files On client request, grabbing a snapshot the final, installed look and feel of 2 or 3 significant pages from the production site, suitable for use in promotional materials, news releases, proposals, etc. 10. Online Marketing Once the site has been published, the next step is to begin marketing it, both online and in the traditional media, if this is appropriate.This step typically consists a thorough review of the Online Marketing Plan to finalization the following: A final description and analysis of the Target Audience, including any new information found during development An update of the Competitive Analysis Study An up-to-date Keyword List, sorted and prioritized by major Web site section, to be used to register the site online in search engines A Search Engine Ranking Report, showing current keyword search results for the high-priority keywords A final list of recommended Strategic Links and other online marketing strategies, such as newsgroup postings, online press releases, partnering/affiliate programs, rewards programs, direct email campaigns (opt-in only), banner ad recommendations, etc. A up-to-date plan for Integrating online marketing with traditional marketing/advertising An Initial User Feedback Analysis, to identify and implement changes needed immediately Once the Online Marketing Plan is finalized, one or more of the following should be done at least once a month, but usually more frequently, depending on client needs: A Web Site Traffic Analysis, showing current user traffic levels, comparing current levels to past performance, and using this data to recommend marketing and Web site design changes Web Site Optimization to maximize the effectiveness of the search engine registration Search Engine Registration based on the keyword list and prioritization A Search Engine Ranking Report, showing the resulting rankings for the high-priority keywords 11. Web Site Maintenance Once the online marketing has begun, the next step is to schedule a Project Review and Planning meeting to do the following: Recap how the project went from the customer perspective and in relation to our project methodology; identify areas for continuous process improvement Determine what level of support and maintenance is desired for the site. If appropriate, develop a Maintenance Agreement for relatively simple changes that should be done right away. Plan the scope of the next phase of the Web site. If appropriate, develop a preliminary plan for implementing more complex changes and/or additional features and functionality that will be done offline as part of the next release This meeting should be attended by the key employees of the customer, the UNETY project manager, and the sales representative.

Home - Top

25W231 Oldham Rd. Naperville, IL 60563-1589	184 Shuman Blvd. Suite 100 Naperville, IL 60563-8474
630.955.9500 Office 630.955.9501 Fax www.unety.com Email Questions and or Comment: sales@unety.com