TechOut_Generalized Workflow
1 like170 views
The document outlines the website design workflow process, which includes discovery, definition, design, development, and deployment phases. In the discovery phase, goals, features, users, and design are determined. Definition involves site mapping, content organization, and wireframes. Design encompasses visual elements and user experience. Development is coding the design. Deployment includes testing, launching, and submitting to search engines. The process aims to strategically plan websites to achieve goals.
TechOut_Generalized Workflow
- 1. The Web Design Workflow Process Keys to a Successful Build Prepared by: Kabeed K. Mansur, CEO/COO © Tech Out Solutions, LLC
- 2. The Website Design Workflow and Process Discovery The first approach in a successful website design is the discovery phase which helps o determine the goals fo the site, features, user demographics, desired functionality, and design aesthetics. This phase should be viewed as the foundation that drives the rest of the site design and development. It will help determine the most appropriate architecture that will create a feature rich environment for the intended user. 1. Strategy Consultation Company Goals – What does the company do? What type of industry does the company occupy? What is the company’s current marketing and branding strategy? What value does the company want it’s website to add to its present infrastructure? Market and Competitor Analysis – Who is the company’s direct competition? What other companies exist that are doing similar things to the client’s company? What companies would the client like to emulate? Audience – Who is the client trying to reach/influence? 2. Design and Strategy Brief Draft a 1 to 2 page strategy and design brief organizing the critical information gathered during the first phase of discovery – that is, explain the contours of the company as identified above, and then a brief general idea regarding the design/style/layout (the information architecture).
- 3. Define Without proper organization, a website will only be a burden to both the client, and the clients’ consumers. If a client or his/her consumers are unable to find what they are looking for within the first few seconds – then they will become frustrated, move on to the next site, and in effect the company with have lost a customer. Therefore, we must begin the process with a site map and wireframe designs to establish the major architecture and placement of the most important content/features. These wireframes are discussed and refined until an agreement that most accurately achieves the intended site goals. 1. Site Map A visual hierarchy 2. Content Inventory Outline for developing and managing content 3. Page Flows / Work Flows Page flows and click paths 4. Wireframes Visual representation of content positioning on the individual pages. These rough sketches will show where important elements fall on a page.
- 4. Design This phase encompasses much more than making pretty things. Rather, we focus on the user experience. We view design as a tool to empower the use to act, to generate emotions, make a complex idea easy to understand, and, ultimately lead a buyer down a desired/mission critical path.. After careful examination and discussion of the results of the information architecture, the design process begins in earnest. Once finalized, the visual elements replace the wire frames and the details of the site design begin to take shape. 1. Concept Initial ideas and a generalized artistic vision/design road map 2. Sketching Design layouts 3. Lock & Feel Visual elements and styling 4. Revisions Modifications to fine tune the designs base on client revisions/comments 5. Page Types Developing subsequent sub-pages
- 5. Development Only after the discovery and design phases are complete does the development of the site code begin. The hosting plan is purchased, the chosen software installed, and the design is sliced and coded by placed into the software application. 1. Tech Review Technical analysis of open source technologies to be used Strategy Discussion regarding best technical approaches to provide desired functionality for site as conceived in the design phase. 2. Programming Coding of the visual design 3. Optimization/Preparation for Organic SEO Site optimized for prominence of following search engines: Google, Yahoo!, and Bing. 4. Content Management System (if applicable) A CMS allows administrators to add, edit, and delete content throughout the site. We can provide full CMS systems or targeted systems for selected sections of the site. 5. Database Application Integration (if applicable) Occasionally a site needs to be integrated into an existing database application or software that is being used for internal purposes. For example, a contact form that automatically populates a new ‘lead’ in Sales force, a popular CRM tool. This feature would be discussed in the discovery phase and then implemented in the development phase. 6. Shopping Cart (E-Commerce Integration)
- 6. Deployment All design elements, development features, and software are tested, adjusted, and re- tested on multiple browsers by a number of people on different systems to make sure all work is built correctly. Every attempt is made to break the beta site to be sure that all bugs are worked out before launch. Once AP testing is complete the site is launched live to the public and submitted to all major search engines to be indexed. Any new features and augmentations that need to be made post-launch are typically addressed in a ‘Phase Two’ project. 1. Testing Browser compatibility – all major browsers (including Firefox, Safari, Chrome, IE< and Opera) will be tested to make sure your site displays as intended. Functionality – Our team vigorously tries to break the site, so that any potential problems will be found and fixed before launch. 2. Launch After final testing is complete the website is launched ‘live’ on the internet and submitted to all major search engines. We announce the launch of your site via our website, case study, and any other applicable venue.
- 7. Conclusion Building a website is very similar to any other building project – take for example, building a house. First, one must determine who is going to live in the house and what type of environment the house will live in. The architect begins sketching the plans based on interviews with the home owner and the home builder. The blue prints are drawn, the functionality of the house is determined, and the drawings are finalized. Only then is the ground broken and the foundation poured. The master builders are brought in to work their trade and the house begins to take shape. In the end the ribbon is cut and home owner moves in. It is very east to lose track of the purpose of the website. We will avoid making design decisions based on what other people are doing or the latest trends. If a website is built through strategic planning with specific goals in mind and a brand to fall back on, then the end product will most likely get you the rests you expect. Think through every decision that we make. Ask yourselves: Who is going to the website? What do I want them to do when they get there? What are my goals for the site: How can I track the results?