My 10 Step Process
A young up and coming developer friend just asked me, “Jahdy, how do you start up a new website? What’s your process?” Well, I answered him, but I figure there are tons of other young developers that really haven’t decided whether or not they’ve developed a process. Well, maybe this post can help.
I’ve broken everything that I do when developing a new site for a client into ten bite-sized, streamlined steps. This overview assumes that you are also the copywriter for the site.
- Research the Product or Service
- Research the Audience
- Secure the Assets
- Sketches / Wireframe
- UI Design
- UI Development
- UI Testing
- CMS / DB / Dynamic Integration
- QA
- UX Testing
1. Research the Product or Service
This is the first step of any web development project that I do, and likely the most important. Understanding the product or service will enable you to communicate better with the client and allow you to speak somewhat confidently when explaining certain facets of design in relation to that product or service. This will also serve to benefit in that a client will feel more assured if you are able to speak on product/service specific traits and conventions. This can score points in the long run which in most cases results in more $$$.
Research of a product or service could be as simple as checking out the competition. Going to a few sites and identifying the dominant similarities can go a long way in understanding the client’s vision. In most cases, the client has already seen at least the most immediate competition’s sites. Look at graphic elements in the site, but also take time to read some of the copy. This could be helpful in learning terminology that may be useful when writing effective, concise, SEO (Search Engine Optimization) friendly web copy.
2. Research the Audience
As well as knowing the product or service, it is imperative that you as the designer and developer know the audience. Not knowing who the audience, or worse, designing for the wrong audience could have a disastrous impact on the success of the site — success being defined as useful and accessible. Say, for example, you have a website that sells prescription bifocals. Well, the product makes it pretty clear who the audience is. The visually impaired. That means that you as the designer must be mindful of the fact that the natural audience of your site have a hard time visually. Care must be given when selecting the color palette, font size, and even the font face of the site. Certain colors are difficult for those with disabilities. Additionally, having dynamic or rich media content fly and flicker on screen could be a violation of the WCAG (Web Content Accessibility Guidelines) and 508 Compliance guidelines.
3. Secure the Assets
Agree with the client on when you will receive assets that are needed in order to begin development. Be sure that the client is aware that delay in the receipt of agreed upon receivables can delay the eventual completion of the site. Make sure that this is clearly stipulated in the contract. There WILL be an occasion when you will have to point the client(s) to that clause and it will save you a lot of grief.
4. Sketches / Wireframe
Because it is so easy to do, and such a helpful step, I advise creating a wireframe BEFORE going into the design application of choice and designing the GUI. I say this for two reasons. #1. it is so much easier to sketch a design on paper with lead and eraser than it is to go into PhotoShop or Illustrator and add, remove, or edit elements. You can then create a very bare-bones digital version to show to the client. This does not need to have color, fonts, or even images. This only needs to have shapes labeled as images, and as text. This will allow you to get the IA (Information Architecture) of the site down. This step will include conceptualizing the navigation, and understanding how one page relates to another. Flow charts are also extremely useful during this phase.
5. UI Design
Now that you’ve received approval on the IA of the site, you can begin to add your artistic touch to the site. This step, depending on the nature of the site, may or may not include a bit of copy writing. With an approved wireframe, you can now go into PhotoShop or Illustrator and begin to design the site, keeping in mind the audience, and the overall mission of the site. Be careful to avoid a design that takes attention away from the subject matter of the site. Some designers get so consumed with having a well designed site, that the primary goal of promoting the product or service falls by the wayside. Because in most cases, the client is less concerned with the designer’s superior artistic abilities and more concerned with the visibility and accessibility of their product or service, an over-designed site may lead to the undesirable outcome of the client asking for a redesign–a valid and just request, but one that can be painful to a proud designer.
As far as the actual design goes, make sure that the audience research results are respected in your design. As mentioned earlier, older audiences may find themselves a bit disoriented and overwhelmed by a really complex, flashy site. Instead, a well designed, more conservative site, with the native ability to increase font sizes, and large clear images may be the route to go. Adversely, for a site geared towards designers, the conservative approach likely won’t be as effective. The more colors, patterns, and flashy things, the better–as it relates to the latter.
6. UI Development
Now comes one of my favorite parts. This is when we get our hands dirty. Upon receiving approval from the client on the UI, you can begin coding your XHTML, CSS, and DOM scripts. This step really brings things together. For the purposes of improving the potential for receiving good search engine page ranking, use semantic and descriptive code when writing the HTML for you site.
For example, for section headers, use the header tag “<hx>” tag with x being the size/importance of the copy (1 being the most and 6 being the least). For paragraphs, be sure to use <p> tags. To learn more about writing valid HTML, or XHTML, as it were, visit lynda.com and create an account. There are also free tutorials online for XHTML and HTML. Using semantic code serves many purposes, two of which stand out, at least to me, more than others. One, accessibility. Accessibility refers to the ability for those with disabilities to be able to view and use your site. Semantic code allows screen readers to properly discern what content is most important to the user. Secondly, SEO. Search Engines when crawling a site, look for keywords within your copy. An < h1>, naturally holds more weight then a <p> tag and indexed as such.
7. UI Testing
Testing is important throughout the development process. One of the most important tests, at least in my experience, is to see whether or not the average user is able to effectively navigate, browse, and use your site. UI testing is key for this. Sometimes, standing behind a user and asking them to click around your site to perform specific tasks can really give you an idea as to the ease of navigation. Assign them tasks such as locating the log in page, or getting to the product check-out page.
A poor UI can lead to frustration on the part of the user, and eventually lead to drop-offs from the site… so TEST TEST TEST!
8. CMS / DB / Dynamic Integration
After making sure that the site works statically from a UI standpoint, move into the dynamic realm. Whether you will be using a CMS (Content Management System) such as WordPress, Drupal, and Joomla, or you plan on using a framework, such as Smarty, Ruby on Rails, or Zend, or you are writing your server-side code from scratch, this is the implementation step for that.
9. QA (Quality Assurance)
Omitting this step from your procedure could lead to the loss of user trust on your site. Broken links, misspellings, misinformation, and obvious design flaws can cause users to leave your site in search of a more reliable source.
In my experience, you as the designer, developer, and copy writer should not take on the task of QA. The likelihood is that you’ve grown used to certain design, spelling, grammatical, and usability flaws. You’ve likeyl proofed and re-proofed your copy in making sure that all of the copy flowed and consisted of certain SEO friendly keywords. You’ve clicked on all of the links that you think your users would be likely to click, and have inadvertently skipped over what you deem least important. Privacy policy, and footer links will usually fall into this category.
Have a few people click through the site, and document any issues. Allow the site to be proofread by a few savvy and trusted word-smiths. This has the added benefit of diversifying your copy if it all sounds the same or seems stale.
10. UX (User Experience) Testing
Lastly is UX testing. This process allows you to get real feedback from real users. Try to identify a few individuals from the client demographic. To continue with the bifocals example, identify 6-10 individuals that have poor vision, or that are likely to need or use bifocals. Direct them to the site, and set them loose. The hope is that they take something from the site. Similarly to the UI test, give them specific directives and see how they fair. It may also be helpful to walk away for a few minutes. This may make them more comfortable and vocal in their responses. Make sure to ask both directly and indirectly about the overall experience of the site. What were their frustrations? Could they find what they were looking for? Was there information that they expected to find but couldn’t? Was there too much information? Was everything easy to find? Was the design of the site distracting to the visit? These questions and more can really help to grade your site and to be able to improve on certain elements before launching.
I hope this helps. Feel free to comment and ask questions as they relate to these steps.
