An Entrepreneurs Guide for Desiging Consumer Web Site FrontEnds

I decided to write this article about how to build a clean Web Site UI in terms of developing specs for the web designer, communication tools and techniques and good guidelines for entrepreneurs because I could not find one overall primer on the web.

This is meant to help an entrepreneur building a web site with an application on the backend or outsourcing frontend to any web designer. The goal is to help articulate what you need and break it to manageable pieces so you can have a clear understanding of what to expect and how much it will cost in terms of time and money.

Thanks to my customer Dan Pouliot of Cabletron.com who challenged me to develop a process to spec out and communicate the user flow on a ecommerce site in 1998, to Perry Hewitt who excited me about caring so deeply for the customer with great usability for Harcourt.com and Paul English, we meticulously tabled product specs and screenshots and taught me focused execution as I built my first tech startup Coola.

A good web site design is what excites your users to do what you expect of them and builds loyalty to return to your site.

Here are steps to follow to execute on building a clean frontend for your Web 2.0 consumer site.

1. Always start with a CED (Customer Experience Definition), which forces you to clarify who is the user and what is your expectation of their usage of your site.

2. All sites have several different constituencies - customers, consumers, media, investors, job-seekers and influencers who judge the reliability, size and value of a company by their experience on a site.

3. List all users. Remember who is your target user when you launch your site, some type of users may come later, so plan for them but don't worry too much about all type of users for your initial launch version.

4. For each user type, list all possible actions they would take on the site. For example, a consumer can register/signup, try a demo as a guest, just surf and read about what you offer, refer friends, or turn around and become a customer as is the case in most B2C sites, in which case they transact and make a purchase.

5. Look at all possible combinations of these actions. For example a user may register first then try a demo, and refer friends. Another user may try a demo and surf around and then register.

6. Now plan a use case for all possible paths of action sequences for each user.

7. For every action, (this is a discussion between the product manager and UI designer) design the User experience by making screenshots.

8. Translate this (discussion between product manager with Engg) to become html for structure, CSS for presentation and Javascript for user behavior.

9. Find what user actions call the backend database or backend application (or middleware in a large system) by means of dynamic or interactive pages to send or receive data and ensure those are communicated in the product requirement specs.

10. Plan the best way to render data to the users in a clean and friendly fashion. For example, kayak.com is my favorite example of a Web 2.0 site that shows data and engages the users while they find travel deals with cool UI.

11. Decide on the branding message - cool and hip or funny and lighthearted or more formal and plan on content placement and graphics accordingly.

12. I am a big believer that all sites should have relevant apps to engage and communicate with the users. Place them strategically around the site.

13. Like the 90s had a blue as the favorite color, web 2.0 sites have an orange, or light shades of colors with simplicity as the key in their design.

14. Break the design into number of html pages, javascripts, widgets, flash apps, and CSS neccessary and execute on your design with a cool UI designer. This should get you a list of what needs to be built and what are the dependencies and help understand how much time and money it will take.

Here are my delicious links to good Web Site Design and UI. I'll add more here as I find them.