Saturday, March 10, 2007

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 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 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, 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.

Labels: , , , , ,

Monday, March 05, 2007

Hybrid Photo Apps - steps to take us from desktop to the SAAS world

You have seen me track the online photo space from simple photo printing options from walmart to shutterfly to desktop apps like picasa.

Here is a potential new player, an expert in the Desktop world entering Web services with lot of promise - Adobe! (

In 2001, before Picasa was born, I had approached Adobe with my mobile Server platform startup Coola, trying to sell the dream of how users would love to upload photos from mobile devices to the Server to create Web Services, offering a strategic sustainability of hybrid Apps across the desktop and Web. This was before Macromedia aquisition and Adobe was not a server company. We were walking with Kodak Pix cameras attached to Palm pilots before the days of cameras on cell phones.

Today I am excited by Adobe's entry in this space because

1. Adobe will increase the standards for photo processing on the web which is set to a basic standard with no differentiation among existing players.

2.Also, Adobe owns the photo space with Photoshop and knows the real users, not just web consumers who would like to gift picture mugs to grandma, but those who appreciate the beauty of creating good pictures and tools that help them express their creativity.

3. It will wake up the online photospace and we can sure see lot of creativity and new solutions.

4.Of course, since Adobe is a desktop software company, I am dreaming here to see not just web services, but Adobe strengthening its place with hybrid Apps that will create a new space taking us from the desktop to the hosted world with a series of products and services. Adobe is positioned well with customer access in the desktop world that a pure online company like Google does not have.

Labels: , , , ,