Website Design and Development Process
The web department at Design Action has spent years developing and refining a website design and development process that is geared towards meeting the specific needs of our social justice clients. Whether we are designing and building a site for a national organizing campaign, a fundraising drive and membership portal, or a regular-ol’ brochure site — our web process is designed to allow us to work hand-in-hand with your organization to plan and execute professional websites on limited budgets.
The Design Action Web Team
In our worker-owned and unionized shop in Oakland, California we have information architects, web designers, web developers, and project managers knowledgeable of and rooted in social justice movements. We are professionals that come out of the movements we serve. We are ready to walk your organization through an efficient and effective process to design and build your new website. Meet our staff here!
What Makes Our Websites Special?
All Design Action websites are custom crafted to meet the needs of social justice organizations. We build all of our websites on open-source Content Management Systems (specifically WordPress) that allow organizations to easily update and edit their website content without any knowledge of HTML or programming language. Through our easy to use Content Management Systems, even people with limited knowledge of the internet can login to a web-based administrator interface and easily keep their dynamic sites up to date. This allows organizations with relatively small budgets to manage their websites in-house and maintain a powerful dynamic website without a large dedicated communications or IT department. We consult with you throughout the process to build a site that meets your needs and looks great, then we train you how to use it, and support you once its live. We’re with you every step of the way.
Why Open-Source?
An Open-Source Content Management System (CMS) is a non-proprietary website administration system that shares its code and systems online amongst a community of thousands of developers. The community of developers that work with a specific open-source CMS are constantly adding to and updating the system to make it better. Technical support for the system is also available freely via online forums. We endorse this community-supported system for web development 100%. You can learn more about Open-Source software here.
Our Process:
Our website process is broken down into seven distinct phases of work, each of which builds on the previous phases.
- Intake and Estimating Phase
- Information Architecture Phase
- Programming and Content Migration Phase
- Visual Design Phase
- Theming/Templating Phase
- Soft-Launch and Testing Phase
- Launch
- Maintenance
Phase-by-Phase Process Details:
1. Intake and Estimating Phase
Before we can give a detailed and accurate estimate for a website, the Intake and Estimating Phase must take place. It has been our experience over the years that without having a deep understanding of the organization’s needs and objectives, an accurate estimate cannot be prepared.
The goal of the discovery phase is for both the client organization and the project manager at Design Action to clearly understand the goals, scope, and requirements of the website project, as well us understand the process that we will use to develop the website.
The deliverables, at the end of the Intake and Estimating phase, is a set of documents comprehensive enough that the client organization understands the scope of the project and so that our design and development team can read the documents and be able to give an accurate estimate and timeline.
These deliverables often include, but are not limited to:
- Completed client website intake questionnaire
- A functionality list (a list detailing the technical functions the site must perform)
- The final estimate/budget
- A general project timeline
Project requirements often change after design and development begins. A good discovery phase will keep these changes to a manageable minimum that will affect the budget and timeline as little as possible.
2. Information Architecture Phase
One of the most important phases of work in developing a new website is the “Information Architecture” phase. The goal of the information architecture process is to create a blueprint of your organization’s new website. In other words, it is the process of figuring out what you want your new website to do and planning the structure of the website in order to meet those goals.
The first piece of work in the Information Architecture phase is the development of a sitemap. A sitemap is generally a list of all the pages on the website organized in a hierarchical fashion, showing both the pages and the global navigation structure (the menus). We will work with your organization to draft a sitemap that best meets your needs.
Once we finish the sitemap, and it has been approved by your organization, we will know what all the pages, sections, and menus on the website will be, and we can then move into developing “wireframes” for the website. Our goal with the “wireframes” is to create a visual document that we use to plan the structure of each of the main pages on the website. We have the thorough list of pages from the sitemap we developed, but now we need to breakdown what content is going to be on each page, and how that content is going to be structured. We develop wireframes to show that. Wireframes are essentially a skeleton, or blueprint, that gives us a chance to explore and confirm the structure of your website’s primary pages. Note that wireframes DO NOT show any design elements (colors, images, textures, etc.), only content hierarchy, placement and prioritization on a given page. We will start with developing a wireframe for the home page, and then move on to developing wireframes for each of the main internal landing pages on the website. You can see examples of completed wireframes here.
In creating a wireframe we consider how your audience will use the website. We’ll be asking, what’s the most important thing for them to see? If we aren’t careful, they’ll be here and gone in 30 seconds. It’s the nature of the web. We need to deliberately arrange your content and figure out how it will keep your visitors moving toward your goals. After we’ve finalized the wireframes, then we can sketch out the site’s visual design/aesthetics, confident that the design will support your content and not interfere. We will walk you through the whole process. It’ll be painless. We promise.
3. Programming & Content Migration Phase Process Programming
In this phase, the Design Action developer is given the deliverables from the Intake and Estimating phase, and the Information Architecture phase, including the sitemap, wireframe and detailed description of the functionality. With that information they begin to build out the site on your web server. This work begins with installing the latest version of the CMS and then creating a click through wireframe of your site by building out all the functionality, pages, and menus. Once this is done, you can see the blueprint of your site in action, get a sense of how the navigation flows and begin to see how your users will interact with your content.
Content entry begins with a back-end training on your site. During this training you will receive instructions that cover how to work with your Content Management System as well as detailed instructions on how to use each area of functionality unique to you site. We will provide you with a sample style guide page in the design phase, detailing the how to create visual hierarchy in your content based on the unique design of your website. Using your skills from the training, the reference materials, and support from Design Action, should you need it, you are then fully equipped to add your content and manage your website.
4. Visual Design Phase Process
The first part of the visual design process is a conversation between the Design Action graphic designer focused on design, aesthetics, and branding. The conversation will be largely based on examples provided in the questionnaire by your organization of sites that you like and dislike. It is important at this stage to think about the way that the organization or campaign wants to present itself to the public – formal/official? grassroots activisty?
After this conversation, we will walk your organization through a visual design process that will begin with Design Action presenting multiple home page design directions/options and receiving your organizational feedback on those various design directions. Then we’ll go through design iterations tweaking and altering the home page design until a successful design has been decided upon. Once the home page design is finalized, we’ll move on to designing the interior landing pages based on the same aesthetics.
5. Theming/Templating Phase
In this stage your organization’s finalized design is given to the developer and applied to the website. The color palate and other design elements are translated into code and laid onto your website. As you are entering your content you will notice the look and feel of your site shifting and changing as you work, until it matches the visual designs you chose.
6. Soft-Launch & Testing Phase
The soft-launch occurs once the site is complete. Once all programming and content entry is done our team, in conjunction with yours, combs through the site for errors, checks that all functionality (email submission forms, slideshows, etc) are operating properly and do any final browser testing. This is your chance to send the site out to a close circle of peers to get feedback and make final small tweaks before you publicly launch and show your new site to the world. The length of this testing period can be variable depending on the depth of functionality and deadline needs for your website. We can take an afternoon or a week to review and test a site. Once this review is complete we ready to launch the site.
7. Launch
The launch process can consist of simply pointing your domain name, or URL (for example our domain name/URL is www.designaction.org) to your hosting company’s server. Or it may also entail moving your site files. Domain or DNS changes can sometimes take up to 48 hours to propagate across the entire internet. Once the site is live, we will do a review of the site, repair any broken links that may have resulted from moving the files and make sure everything is in working order. Sometimes the launch process is completely quick and painless. Occasionally issues come up. For this reason we ask that your point person be available for any last minute questions and consultation on launch day.
8. Maintenance
Your website and the CMS that powers it are living, ever-evolving beings. Like any living thing they need to be taken care of. WordPress developers are constantly working to maintain and improve the core of this open source Content Management System to keep it functioning well and secure it against would be attackers and spammers. Therefore, system updates occur on a regular basis and should be implemented. Changes to the system can sometimes result incompatibilities with third party software installed on your site, such as plugins. For this reason we recommend that you do not run automatic updates to your live site, but rather you have a WordPress professional run the updates on your site in a testing environment before making them live. We offer a range of continuing support options for on going maintenance. Examples of these support contracts will be included in your estimate. Contracting with us on an ongoing basis means we’ll perform system updates on your website monthly, thus keeping it up-to-date and secure. For support on an ad hock basis please contact us to provide updates to your CMS regularly. Often a CMS update will take only a short amount of time to perform if done regularly. Frequent updates are often your best defense against attacks on your site. So it pays to stay on top of them.