Product Management—User Interface Design of a web product

August 31st, 2009

Green HoneycreeperUser Interface is the visual part of your product; this is where all your back-end gets exposed. This is where your users interact with your application tier, middle-tier, database-tier, third-party & whatever-tier. The user interface could be visual, wherein for web products you have HTML pages interacting, for desktop-based products it’s your screen (or window) where the user interacts by clicking links, submitting forms, scrolling windows, or even closing the application.

The user interface design consists of four parts and is normally done in this order of development process:

  1. Information Architecture This is the sitemap & structure of your website. For example, when you visit http://bing.com what options do you have for interacting with the site, some include (a) Typing a search query & submitting the form (b) Clicking on maps link (c) Clicking of the about us link etc.  These three options represent navigation pattern, the conceptual layout & the flow (form submissions showing a result page) of the pages. However, The Information Architecture does not depict logic of page flows, but just linkage of pages. Here is a simplified Information Architecture of bing’s home page. Bing.com Information Architecture Example
  2. Interaction Design This is the flow chart of your website which captures a lot of details which shows how the pages could interact with each other and under what conditions. For example, a home to login linkage on the Information Arechitecture would show a linkage from the login page to the my dashboard whereas the interaction design would capture how the user can or may not be allowed to navigate from the former page to the latter. A login interaction has logic to check for user name & password validity, account expired/active status, session timeout, etc. The interaction design builds upon the elements of Information Architecture (the “login” & “my dashboard” page) and applies logic to connect them together. Here is a simple interaction depicting which “index” to be picked up for the given search query.Bing.com visual interaction example
  3. Wireframes A Wireframe provides the guide to the layout of the page, where the buttons go, where the form is, image, nav bar, etc. It is also developed by the product manager. Here is an example wireframe of bing’s homepage:Bing.com Homepage Wireframe
  4. Visual Design The visual designer (aka the “photoshop” expert) converts a wire frame into a mockup. Different screens could have different wire frames hence different mockups. The designer may do HTML/CSS/JS mockups from the wireframes without going the photoshop route. The visual design goes into the details of every pixel which may be manipulated on the screen. Here’s the visual design output of bing (which you may have seen already)Bing.com Final mockup

Who does what? What are the roles & responsibilities?

1. Product Manager Overall responsibility. Creates the Information architecture. May take help of software/system architects for existing components and their behaviors. May engage web designer for existing sitemap & functionality. For startups, the Product Manager role may be assumed by the CEO, CTO or an architect on board.

2. Visual Designer Does final mockups based on wireframes and IA. May also do the final HTML/CSS.

3. Web Developer Converts the HTML/CSS using Javascript to product a working user-interaction.

The user-interface once connected to the back-end becomes complete & is revisited for usability testing, customer feedback, focus groups, scenarios etc. More about them in a future post.

(The bird is a Green Honeycreeper found in Mexico & Brazil. Pic courtesy Dario Sanches)

Build. Sell. Build. Sell. Lather. Repeat

August 25th, 2009

One of the biggest dilemmas faced by an entrepreneur who is starting up is to figure out when to stop building and when to start selling. Although, easy it may sound there are no hard boundaries between one or the other. Once, you have 5-10 people in the team then the question is different — you can have half of the team building the product and the other half selling it. What do you do when you have have 2-3 members in the team?

The idea is simple — build an initial set of features and then instead of only building, you, build, sell, build, sell. Repeat. Put a constraint that for every 5 new features, you acquire double the number of leads (or users if you are a consumer internet  product) than the last time. That would be a perfect balance.

Here is a chart depicting a hypothetical idea where for every 5 new features you add to the system, you double the number of leads you acquire (or acquire users for consumer internet products). ‘R1’ in the figure below represents a baseline set of features for acquiring first set.

features_releases_leads

Lead (definition): A prospective customer, or someone who you have talked to but is not ready to use your product unless few more things are added. Or he is a free/trial user but not ready to pay the money, yet (Keeping it broad so that theory could be modified in specific situations)

Requires great discipline. As a coder-entrepreneur you may wanna go into the “comfort” zone of continuously building or if you are a non-techie entrepreneur you may just sell without a product in hand. Both are extremes and equally detrimental. Especially, in Indian conext where capital is meager and having the revenues in the books is golden, you strike a balance until your next inflection point where you are cash-flow positive.

So, how do you attain that perfect balance between sales vs. development OR feature build vs. lead acquistion? Here’s the recipe:

  1. Build an initial version of the product which has some baseline features. These features may be targeted or have been developed after talking to a set of potential customers.
  2. Call that base version as alpha, beta, R1, whatever. Sell the product or convince your leads to start using it. Maybe a small set of people would start using it.
  3. Don’t start building new features, just yet — Talk to them. Get feedback.
  4. Now, add another set of features and then widen your net to bring additional leads (or convert existing leads who may have told you that they would use the product if a, b, c is implemented)
  5. Now, don’t go incremental, go exponential in acquiring leads (or converting them). For every 5 new features, try to double your lead flow.

(The above example; for consumer products however, you may add few zeroes to the y-axis legends to get the point).

Thanks to Ankit, Sameer & Nandini for vetting the thoughts & clearing bugs in the draft

Morpheus Venture Partners, the new batch of 10 & my official onboarding

August 15th, 2009

Visitation rights is a term used when a mom/dad gets the right to see his/her child on a fixed interval basis. Most of the times, visitation rights & monetary support are also intermingled.

This is what is my observation of funded startups in general in India. They raise money — the investors come & “visit” them time to time — Best, you send weekly reports and harness few contacts in their rolodex. Question to ask; are they helping you in building your business?

Entrepreneurial ecosystem is in it’s infancy in India — resources are not available, event platforms are sparse, celebarations of success barely exist, peer support is meagre, etc. What we need is hand holding, support, building of business and not just money & remote supervision. Of course, money helps to reduce the friction of starting up — but it’s not the only lubricant required.

Comes Morpheus Venture Partners, a Business Accelarator out of India which I joined as a Partner few months ago. Our vision is to reduce the friction of starting up & provide end-to-end support ranging from building your pricing model to finding the right technology stack for a startup. Of course, we want to provide money too, which we are working on.

Less than 24 hours ago we announced our latest batch of 10 startups — each one of them is envisioning to bring a change using their model for people of India. Being a deep technologist, I always thought that the next big thing can only come out of technology and maybe the next Google is going to be from India. That’s very much a possibility but it’s hard to sustain a viable business when less than 40 million users are online (a large % of which use the net only once a week!).  

So who are these guys? What’s the new batch of 10 upto? I totally resonate the way Nandini Hirianniah (Founding Partner at MVP) summarized these 10 heavy-hitters:

Adscoot’s Suyash, stands for hours in the major junctions at mumbai to learn traffic patterns and measure footfalls!

EasySquareFeet’s Ashu & Snehesh are the most positive people i’ve seen! I can see their smiles through the phone when i talk to them (serious!)

Viv & Hari of InterviewStreet are two rockstar techies who are consciously & fast learning other skills to take their product to market. They have the passion & drive to make things work!

Shashank & Abhinav started on Naabo right out of college – the freshness in approach & the passion they bring with them is infectious.

Arjun of Picsean is an engineer, but his passion towards photography is amazing! He’s a good friend & i’ve seen his focus and smart work in his past ventures. His attitude to learn is commendable!

Robin of ReachTax is a star CA, but i love his humility and the motivational skill he has to make his entire team perform month after month!

Pankaj & Gaurav quit their fancy paying jobs to work on Retail Vector. Focus, quick work and frugality of life is what they are committed towards as they scale this venture!

The first thing that stood out when i met Abheek first was such an young guy and such maturity & humility. (Often age and humility dont go too well). This guy was 7 years old when he started putting Lego pieces into perfect ensemble & several years later, he’s using them at RobotsAlive!

I loved their designs and the quality of tees – Rahul & Mohit of Scopial have their focus completely on “Quality” “Design” “Niche”! They sell tees one could die for! Check a sample out here

I read about these guys in a print article & the next time we were in Mumbai, we met Jayesh & Karthik of VeriCAR. Two guys crazily passionate about automobiles!

Thanks to the startups for choosing us their ‘limited co-founders’, I’m sure this association is going to go a long way. Now, for the next 4 months, we spend dozens of hours every week with the founders poring over the details of their business and helping iron out every possible kink.

Agreed, we can’t change how users would percieve their offerings and how big they could possibly get — Yes, we can influence the positive outcome to a great extent.

Update: Added VeriCAR’s sound bytes from Nandini’s post

5-years of work bites the dust!

August 14th, 2009

I started blogging in April 2004 Feb 2004  & thanks to a billing glitch — my blog went dead (I was refused the backup files as well..khair thats a different crib, altogether) Today, after months of deliberation, I finally revived it — Now, I have to rummage through various caches (FeedBurner, Google Reader, Bloglines, etc.) to get the post & comments back.

Welcoming myself to the blogosphere again!

Update: Found a cache and imported the entries upto Sep 2007! Looking for more.

Update: Additonal 1-year of data found! Now posts upto Nov 2008. Comments still missing.

Big Bazaar’s ‘your money is gone in 15-day’ return policy

November 8th, 2008

I was looking for a multi-region DVD player and hopped into Big Bazaar, a multi-brand chain store which sells everything from vegetables to LCD TV. The sales guy pitched me to a buy a Philips DVD Player stating that, “it will play everything!”. To my surprise there was no region code mentioned on the box packaging of the DVD player (Philip’s own deceptive packaging). As a skeptic, I asked that guy whether the item is returnable. Yes, he said.

Once unpackaged, the DVD player only played region 5 (India/Asia) DVDs; and not the ‘Region 1’ (US/Canada), a cache of which lugged from US.

Went back to Big Bazaar after 10 days, was able to return the item with a little play of words but to my surprise was a credit-note instead of the cash Rs. 3500, I paid. The credit note was okay as that may be a way to dissuade fraud. The fine line was that the credit note expires in 15 days from issue date. The money will evaporate if I don’t go back to the same store and spend it all. This is unfair. I’m planning to file a complaint with the ministry of consumer affairs on this practice. It may not be illegal from Biz Bazaar’s point of view as in India returning an item itself is a new concept!

There are a few things Big Bazaar should fix to avoid consumer complaints:
1. Issue a non-expiring credit note or make it 6 months/12 months to the least
2. Allow that credit-note to be encashed at all Big Bazaars and not just the specific store where the note was issued.

Does SalesForce.com really locks your data?

November 4th, 2008

I love Zoho and what they have delivered as a product suite. SalesForce.com and Zoho have a bitter relationship after their failed talks of merging (Benioff made the offer which Zoho rejected)However, I disagree with Sridhar on one count in his latest post:

Since then, Salesforce has repeatedly tried to block customers from migrating to Zoho CRM, by telling them (falsely) that they cannot take their data out of Salesforce until their contract duration is over. We have emails from customers recounting this.

Isn’t that the natural tactic any sales guy plays to prevent customer migration? Migrating data out of SalesForce.com is one email away. Even if you are during trial period, they give you the complete dump of all the object as excel spreadsheet without a word.

Dr. Arvind Shenoy’s clinic just gets you in!

October 31st, 2008

In Bangalore since last 20 days and lots of ranting to do. Starting somewhere.

I had to take my young one to a pediatrician urgently on a Thursday evening. Someone mentioned Dr. Arvind Shenoy; he is the Head of Deptt. at Bangalore’s Manipal Hospital. I called up his private clinic (yeah, more on ‘private practice’ of docs in a later post), got an appointment. The lady, “Just come over, it is an hour wait for last-minute appointments.”

Once we checked in we were told that our turn would be after 2 and half hours, “The consultation is moving slow, sir”, quipped the reception.

Prevent SSH password attacks using denyhosts package

September 10th, 2008

When I saw this in my daily log report. I was like WTF! Script kiddies are having fun. Little bit of Googling and I installed the denyhosts package on Feodra Core 7. Here’s the step by step guide.

shell>yum install denyhosts
shell>/etc/init.d/denyhosts start

Most probably denyhosts is going to run on server restarts. However, make sure that’s the case by

shell>chkconfig denyhosts on

The denyhosts package watches the /var/log/secure log file at a fixed interval and then when it finds a match (like illegal login attempts, etc.) it adds an entry in the /etc/hosts.deny file. The /etc/hosts.deny file contains pairs of entries in network daemon, client ip (or hostname) format which looks like this:

daemon_name: X.Y.Z.W
 
After installing the denyhosts package, you can tweak the configuration by modifying the /etc/denyhosts.conf file. Here’s what I changed essentially


#Block the host after 3 failed attempts
#for non-existing logins
DENY_THRESHOLD_INVALID = 3
#Block the host after 5 failed
#attempts of existing logins
DENY_THRESHOLD_VALID = 5
#Block after 3 failed attempts for root login.
#Ideally, you should disable root login for ssh
DENY_THRESHOLD_ROOT = 3
#Good idea to capture the host name from IP
HOSTNAME_LOOKUP=YES
#I left this blank as we capture the
#reports via logwatch
ADMIN_EMAIL =

Here’s what my /etc/hosts.deny looked like after a few days

# DenyHosts: Sun Sep 7 06:00:08 2008 | sshd: 210.51.1.231
sshd: 210.51.1.231
# DenyHosts: Sun Sep 7 18:34:01 2008 | sshd: 117.36.50.66
sshd: 117.36.50.66
# DenyHosts: Mon Sep 8 05:05:04 2008 | sshd: 218.4.150.50
sshd: 218.4.150.50
# DenyHosts: Tue Sep 9 01:36:18 2008 | sshd: 12.174.168.124
sshd: 12.174.168.124

Don’t forget to restart denyhosts if you change the config file.

deli.ciou.us vs. Delicious Toolbar buttons: Keeping logged in

August 19th, 2008

Delicious launched a new version a few days ago. All good, new features, etc. etc. But, I liked it’s simple interface — just Tag the things you visit and save it for future use. What else is needed when you wanna bookmark.

The new IE7 Toolbar buttons are way too much — like recently visited links, and a lot of new features which I don’t necessarily need. So, I wanted to keep using the old toolbar buttons — but it won’t work! Everytime I try to bookmark a page, it will force an account sign-in for a new session 🙁

Here’s how to keep using the old IE7 Toolbar buttons without the pesky sign-in:

  1. Install the new toolbar buttons on IE7 (the install process itself is quirky). Do not uninstall the old toolbar buttons
  2. Sign in to delicious.com using our account via the new IE7 buttons
  3. Hide the new buttons (forever)
  4. Keep using the old ones without any trouble

 

Apache logs, Load Balancer and X-Forwarded-For

August 13th, 2008

In most normal configurations Apache’s web server logs look like this:

75.104.128.36 - - [13/Aug/2008:14:06:32 -0700] "GET /index.html HTTP/1.1" 200 21279 "http://khaitan.org/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16"

This is achieved by using the following log format in the apache virtual host config, which looks like this:

%h %l %u %t "%r" %>s %b "%{Referer}i" "%{User-agent}i"

However, when you move apache behind a Load Balancer say F5 BigIP, the logs start showing the IP of the load balancer instead of the actual client IP. This may result to error in reporting viz. uniques, and other issues if your application relies on knowing the client IP. It is also possible that any geo based code may also stop working. There is an easy way to fix it.

Good news is that most of the modern load balancers already have a mechanism of sending the client IP. This is done by inserting an HTTP header X-Forwarded-For. It may look something like this: UA-CPU: x86
Accept-Encoding: gzip, deflate
X-Forwarded-For: 67.161.42.194

First, Make sure that your Load Balancer is sending the X-Forwarded-For header. Drop this small php file on your server which is behind the load balancer and make sure that the IP of the machine from where you are connecting to shows up in the header as shown above.


<?php
$headers = apache_request_headers();
foreach ($headers as $header => $value) {
echo "$header: $value
\n";
}
?>

If you do not see that header, change your load balancer settings (Google X-Forwarded-For for your specific load balancer) or better still call your Sys admin to do it for you.

Finally, modify your log directive in apache by replacing %h to %{X-Forwarded-For}i

%{X-Forwarded-For}i %l %u %t "%r" %>s %b "%{Referer}i" "%{User-agent}i"