Tag Archives: design

15 Best Articles on Product Design & Product Management

Want to become a PM or get better at it? This list of some of the best articles on Product design/management is a great way to onboard yourself (or your team members) on PMship

Articles:

1) The end of apps as we know them #intercom.io
2) How to do a Product Critique – Julie Zhuo #facebook #medium
3) The making of tiiny
4) Stop making users explore #medium #lauraklein
5) Super Normal: Innovation often starts with the ordinary #medium
6) How to Build Products Users Love – #howtostartastartup #video
7) So you want to manage a product? What no one tells you about the role
8) Product Strategy Means Saying No – Intercom.io
9) This Product Prioritization System Nabbed Pandora 70 Million Monthly Users with Just 40 Engineers
10) How Spotify builds products – Spotify
11) Twitter Will Onboard Users With “Instant Timeline”, Inject Top Tweets From “While You Were Away”
12) Chinese Mobile App UI Trends
13) The only metric that matters
14) Good Product Manager/Bad Product Manager
15) Why mobile unbundling isn’t inevitable

 

 

 

Twitter Android App: Beauty is in the detail

I’ve been a Twitter user for about 6+ years and have started accessing Twitter via their Android app a few months back. Not surprisingly my usage of Twitter has grown manyfold since I’ve moved from Tweetdeck to Android app, and frankly the reasons are obvious.

1) Great app
2) Continuous availability/access

The android app for twitter is one of the most beautifully (think usability) designed apps. It has just the right buttons at the desired places, most intuitive functionality and easy on the eye. Here’s a little example of the nifty app’s detailing

Twitter Android App - Timeline

As you can see, the timeline view has app the possible things a user would want to do

General – Most Used (Excluding replies, discovery etc)

  1. Compose a tweet
  2. Search
  3. Follow someone

Pertaining to a tweet in Timeline

  1. Reply to a tweet
  2. Retweet a tweet
  3. Favourite a tweet

Now all these are great but an extra case comes for Retweets. Not only would I want to interact with the tweet but I might also want to follow the person whose tweets are being RTed

Timeline

Yes, that little highlighted icon is what caught my attention. Here ‘Chris Messina’ who I follow, RTed a tweet from Samantha (whom I don’t follow). and Twitter’s app cleverly shows a tiny icon along these tweets which lets users follow the person whose tweets are being RTed. A quick click on this and you are done

Follow the RTed person

That’s a nice example of putting relevant features beautifully without affecting the user experience. I’d love to talk more about the app sometime.

Analyzing Amazon.in Checkout Process

I recently made a purchase on Amazon.in and couldn’t but wonder at their checkout process. Just too many clicks for comfort.
Here’s how it works at present

Step 1) Product Page 

Product Page - Amazon.in

 

Step 2) Edit Cart or Proceed Page

Edit Cart or Proceed - Amazon.in

 

Step 3) Sign in/Sign up Page

Login/Sign up Page - Amazon.in

 

Step 4) Delivery address Page

Delivery Address - Amazon.in

Step 5) Delivery options page

Delivery Options - Amazon.in

Step 6) Payment Method Page

Payment Method Page - Amazon.in

 

Step 7) Review Order Page

Review order page - Amazon.in

 

Step 8) Billing Address Page

Billing Address Page - Amazon.in

 

Step 9) Order Completion Page

Order Completion Page - Amazon.in

 

Phew !! With these many clicks Amazon is making sure that only the users absolutely committed to make a purchase are the ones who make one.

Nine steps to the order confirmation page. Wow. Let’s try to see if we can make things a bit better (less clicky)

  1.  The easiest way around would have been to allow ‘1-click checkout’. Which for some reason isn’t available.
  2. Step 2: The importance of this page is to help those who want to review their cart. Not sure why would Amazon want people to doubt their purchase, unless they have over the period seen people change their cart contents during later stages of checkout or raised a of issues complaining of shopping wrongly.They should encourage users to add more items ala ‘Continue Shopping’ as it is popularly known or checkout. Ideally, however there should be an analysis of the % of people who buy 1 item vs % of people who buy multiple items. The experience should be made smoother for the majority case. It could just be a pop up and not a new page
  3. Step 3: Is an important one. Auto-saved credentials make things easier. I am not getting into the design of the page as in this case, it gets the job done in a single click
  4. Step 4 and 5 : I don’t really feel the need of having two separate pages for choosing delivery address and delivery options unless there are multiple addresses and options in question. The assumption here is most people would order to a single address. This could however be validated by data on median delivery addresses. Assuming most people will not change their address during the flow, I think in the step 5 there should be an option to change address without giving it a separate page.
    UI could definitely be improved 🙂Delivery Address and Options Page - Amazon.in
  5. Step 6: This is perhaps the most important page. The option of putting saved cards makes things easy. Just enter CVV and continue. The layout of other payment options is a discussion to be had another day
  6. Step 7: ‘Review Order’. Wait, why would I want to review order after putting my payment details? Shouldn’t this page come before the payments page?  Step 7 should be Step 6. And Step 6 should be Step 7 with an option (selected by default ) “billing address to be same as shipping address”. An option to change billing address is going to be there of course. I simply don’t see a reason to have Step 8 “Choosing Billing Address” as a separate page.
  7.  Step 9: Order completion page. Informative and having some baits for users to view more items or make another purchase .So here’s the revised flowStep 1 (Product Page) – Page 1
    Product Page - Amazon.in
    S
    tep 2 (Continue Shopping vs Checkout) to come as a popup on clicking Buy from product page and not a separate page
    Edit Cart or Proceed - Amazon.in
    S
    tep 3 (Sign in/Sign up Page)- Page 2

    Login/Sign up Page - Amazon.inStep 4 (Delivery Address and Options Page) – Page 3

    Delivery address and options page - Amazon.in

    Step 5 (Review order page) – Page 4

    Review order page - Amazon.in
    Step 6 (Payments Page with Billing Address option) – Page 5

    Payment Method Page - Amazon.in
    Billing address option could also be a part of the delivery address and options page. But in no case it deserves a separate page

    Step 7 (Order completion page) – Page 6

    Order Completion Page - Amazon.in
    Though in the new order we are down to Six pages from Nine (33.33% lesser pages). I am sure this can be optimized by at least one more page by clubbing ‘Review Order’ and ‘Delivery Address and Options’ Page. For now 5 pages are good enough.

    Eventually a one click checkout for single product purchases is in order .

    What do you think?

Customer Development Design

I’ve been a regular follower of Seth Godin’s blog and like almost all his posts. However there are some posts of Seth that I like way more than others. A couple posts that really caught my attention a few weeks back were on choosing the customer and training your customers respectively.

Posted at an interval of two days these two blog posts taken together offer a nice(different?) perspective of looking at things when it comes to Customer Development. Against the common notion that you should try to attract all kinds of customers Seth suggests that you choose your customers. Yes, you choose your customers for your business by your brand value proposition, pricing, customer experience and other things. All aspects of the way you run your business attracts or repels certain kinds of customers. You might wonder, why is it important to choose your customers?

It is especially important to choose your customers if you have a perspective/vision and you want things to happen according to that and not according to the terms defined by the market. For example sake, consider two product companies, one of which is very choosy when it comes to picking their customers and would rather prefer a smaller set of customers of the kind that they’d like while the other company is not really that choosy and is open to catering to all sorts of customers, the more the merrier. Assuming they both start from the same point, it won’t be difficult to imagine how differently would shape up after an year into the business. Company A which focuses of select customers will emerge out to be almost on the lines of the founder(s)’s vision while Company B which wants to get as much customers as it wants will have significant difficulty living up to the varied expectations and might just give in to the (un)reasonable demands of the majority.

Not only this, Seth suggests that businesses should also train their customers. Yes, training the customers by encouraging certain type of behaviour by rewards etc and discouraging certain type of behaviour. For ex: If you’ve priced your product slightly above the market standard then there’ll be lots of customers complaining about your price and trying to negotiate their way down(in terms of prices). Now there are two ways to go about it, one that you let customers negotiate and other is to don’t bother. Over a period of time if you follow the don’t bother policy you’ll observe how some price sensitive customers will move out and the remaining customers will get used to the higher than market price and stop complaining (This assumes that their is something that the business  offers to offset the high price).

Another interesting effect that this has is that it helps in building a culture among your customers that’s decided to a large extent by your terms and not the markets.

The Design of Everyday Things: PVR’s movie schedule

If you’ve been to a PVR cinema ever you might remember their movie schedule. Here’s a screenshot for your reference (sorry for the low quality picture).

pvr cinemas movie schedule

Did you notice anything?
The listing/sub-section for PVR cinemas in South Delhi looks exactly like the subsection for West Delhi. Exactly my point.

Every time I pick up this schedule I invariably feel there’s something wrong about its design and the problem is that it’s really a pain to find out where the theatre in question(the one(s) you want to check) is located in the schedule i.e. Unless you’ve ingrained the complete  movie schedule layout in your head you will have to spend time locating the cinema of your choice (middle right or left bottom or extreme right top) and the PVR guys haven’t helped us a bit with this problem. Their approach is simple, list all the PVR theatres in NCR, categorize them according to locations, put them class wise (PVR Premiere on Top) and mass print it for each of these theatres.

While this might sound obvious(and most easy) way to go about this situation, it certainly isn’t the best (it takes some time to locate your theatre of choice) and many of you might agree that folks at PVR could do a better job at it by customizing their schedules a bit.

Wouldn’t it be nice for them to print 5-6 different schedules for various regions (North Delhi, South Delhi, Gurgaon etc) if not for all theatres and highlight the show timings for each one of them (for ex: the movie schedule for North Delhi has first/top most space for North Delhi cinema listings)?

What say?

Designing Notification Emails: What you can learn from Friendfeed and others

Email notifications for various actions(like new friend request, new follower) play an important role in getting a user back to the site and making them perform an action (accept/deny or follow back). Also, given the huge size of various social networks and thinking of these emails as a customer touch point it’s helpful to have a nicely designed notification email template. I’ve written a couple of posts on the same earlier too.

In this post I’ll try to compare the notification email by various popular platforms for the basic action of getting a new friend,follower, subscriber etc and see whose doing what and what could they do to make things better.

1) Twitter:


Format: HTML; Display Pic: Included; Call to Action: Visit profile; Direct Action: Block

This template is mostly good enough to decide if a user wants to follow back another user of not but by having a direct follow button would have helped.

2) Slideshare


Format: HTML; Display Pic: Not Included; Call to Action: Visit profileDirect Action: None

This template is plain and simple but it doesn’t have a display pic for new follower and it doesn’t have a direct button for an action. Also, it has two links which point to the same page, which isn’t the best thing .

3) LinkedIn

Format: HTML; Display Pic: Not Included; Call to Action: View InvitationDirect Action: Accept Invitation.

While Linkedin has a direct action button they don’t have any detail about the user in question. Here again a picture or some more description will be helpful.

4) FriendFeed:

Format: HTML; Display Pic: Included; Call to Action: NoneDirect Action: Subscribe back

Friendfeed has by far the best designed email notification template in which they have the display pic, last few updates and just one link to get direct action(subscribe back) from the user

5) Facebook:


Format: HTML; Display Pic: Included; Call to Action: Visit request Direct Action: Accept Request.

Facebook has changed it’s notification from the older one (active till 14th september 09). While they have definitely gone the Friendfeed way, the name  of direct action button is Login which doesn’t kinda look right.

Format: Text; Display Pic: Not Included; Call to Action: View RequestDirect Action: None

6) Orkut:


Format: HTML; Display Pic: Included; Call to Action: Visit profile and Visit friends pageDirect Action: None

Orkut too like slideshare has two links to the user’s profile and a third link which reads ‘visit friends page’ but it takes you to a separate ‘add friends’ page ala facebook.  Also there is no direct call to action here too.

While there could be reasons for not having a direct action button for Facebook and  Orkut(because they need to group friends into categories for example) some sites like Slideshare and Twitter can easily pick this.{Tip 1}

Having two links to the same profile page is definitely not wise and needs to be taken care off {Tip 2}. Other tips like having some profile info and a display picture can help {Tip 3} in a direct call to action(button etc) {Tip 4} if there is.

As you might have noticed eventually every notification email has moved to HTML format as it has more options like better looks and including a direct action call. {Tip 5}

What do you think about these email notifications?

Slideshare: Follow or Add as a contact ?

Got a mail from Slideshare notifying about a new follower. Curious, I opened the email and here’s what I saw.

slideshare new follower mail

If you haven’t noticed what I mean, there are two different terms being used to represent an action i.e. Follower and Contact. While the subject reads ” lindamoodbell is now following you on Slideshare” the very first line in email reads “lindamoodbell added you as a contact on Slideshare”.

So is lindamoodbell following me on Twitter oops Slideshare or has she added me as a contact ? And if they mean the same thing why are these terms loosely used for each other?

Interestingly the email also mentions that I can too add her as contact on Slideshare(no mention about following her back)

I wrote about the changes from term contact/friend etc to follower in both Scribd and Slideshare here and mentioned how exisiting users might find these changes in terminology confusing. A look at lindamoodbell’s page on Slideshare confirms this.

slideshare profile page

Not even a single mention of word follow/follower by users. While Slideshare might want its users to follow each other, its users seem happy adding each other as just contacts.

What do you think about these changes ?

Twitter Search: No Looking Back ?

Have a look at the Twitter search result page below.

twitter search result page

Can you see something missing ?

Ever since we had search.twitter.com ( I think after the summize acquisition) I’ve always wondered how come there isn’t a link to go back to the Twitter home page from the search result page. Though it makes PERFECT sense that there should be a visible link to the main page on the top section of the result page or at least the Twitter logo should redirect to the main page , none of them exists.

Instead they have a inconscpicous little “Twitter Home” link at the page footer which I bet would be hardly used.

twitter home link on page bottom

Thinking aloud, could it be that ever since Twitter acquired Summize they never really thought of putting the Twitter homepage link which was missing in Summize(it didn’t need a home page link as it was just a search tool and search can be done the search result page too).

For those of you who joined the Social Media bandwagon late, here’s what  Summize looked like.


summize (Image credits http://www.flickr.com/photos/toprankblog/)

familiar to the F? 🙂

What do you think about this, a missing chunk of usability resulting from oversight or something else ?