So what does Champions do?

• Easy to read summary panels
• Games schedule
• Ball-by-Ball coverage
• Full scorecard

Why did we build this?

Frankly, there are a few cricket applications on Appstore that provide somewhat similar functionality but all of them lacked one  thing – usability. I have written a complete review of Cricinfo’s cricket application on iPhone and you can read my frustration there. We wanted to build an application that will make cricket easy and fun to follow. So this is our first step towards that.

One of the main design decision that went into this application was the “summary panels”. We wanted to allow our users to quickly look at the game summary without scrolling or tapping too much. So we decided to create “summary panels” which give you a quick summary of the game and allow you to view full scorecard or ball-by-ball coverage of the game quickly and easily.

This is just version 1.0, we hope to add many features in our next release.

Give it a try and tell us what you think. If you like the application please leave a review.

I have been using iPhone since the first one came out. I have been following cricket since I can remember. Naturally when I got my iPhone I was excited to follow my cricket from anywhere, anytime. Cricinfo has been the leader (and the only website) when it comes to cricket coverage. They simply have the best coverage, not necessarily the best UI though.

I have written before about their website redesign. So I won’t talk about that today. Although, there is so much that they can be doing with their website to make it more user friendly.

Today, I am going to be talking about their iPhone application. It is so disappointing that it made me browse to their actual website more frequently via my iPhone than to use their mobile application.

So those of you who haven’t used their iPhone application, I highly recommend you to give it a try before further reading this review.

Initial thoughts:

The application is very rough. It is not completely a native application. The only native component is the tabbar at the bottom and the actual content is rendered inside a UIWebView. My guess is that this application is built using PhoneGap or some similar technology. Nothing wrong with using such technologies but when the UI doesn’t follow the convention it creates all sort of issues.

The Main Screen:

The main screen contains three different sections: Summary, Current & Recent Matches and Upcoming Games. The idea is well thought out at least in a sense that it gives me a snapshot view of what’s going on. When you tap on a game it has two reactions: 1) dispatch a request and 2) flip the current view. This flip is not so user friendly. The reason being that it is not a “native” animation, it is a webkit enabled animation which isn’t that smooth.

Also the tap has no response, the usual tableview on iPhone has a “blue” or some sort of background feedback that a touch has been detected, which doesn’t happen here.

The tabs at the bottom react very differently as well. When you tap on a tab it first shows a loading image and then shows the actual view. This should be the other way around. First show the view and then load the data.

Match Details Screen:

Once you tap on a certain game you are then presented with a mini-match detail screen. This screen has a sort of tabular layout where information such as score, last 12 balls, run-rate and a small quick highlight from the game is present. There are also two large buttons for “Scorecard” and “Ball-By-Ball” view of the game. This is perhaps the only sane UI in the whole application. One thing that bothered me a lot was the “back” and “refresh” buttons at the top. Those were trying to simulate “UINavigationBar” but really when you scroll down you loose them from the screen and every time you have to refresh you have to scroll up. Again this is a restriction due to the “design” of the application.

Scorecard:

A very ordinary looking scorecard. One of the key vital information missing from this screen is the “balls faced” by the batsman. Seriously, that is so needed here. But I guess Cricinfo doesn’ t think that’s important information. Also, the tabs don’t really look like tabs at the top.

The refresh and back buttons are still having the same issue.

Ball-by-Ball:

This view really lacks the visuals that would make it much more exciting and pleasure to use. It is very plain and simple and missing a lot of key elements. While reading the ball-by-ball commentary, if you want to check on current batsman’s score, you have to actually go back one screen and then come back. Why can’t the “Match detail” view and this view be merged somehow?

There is a lot of room for improvement here.

While Cricinfo does a decent job of covering cricket on their site, their mobile application can certainly use a complete redesign. There have been some major bug fixes in recent updates. Most notable bug was the inability to view more than two innings of scorecard. So during the test match the scorecard view was only showing the first inning scores for both teams.

Another short coming is the inability to distinguish the follow-on of a team and no push notifications (not that big of a deal).

I think this is just super-creative from Pixar.

Also check out the following video:

Be sure to get your interface in order before you confuse your customers.

So the question that ProPakistani (and others) raised was: How come no one from these TV channels taking a legal action against them?

Good question. There answer?

“Of course it’s illegal, we never allowed anyone copy our videos – they are doing so without rights”

Ah! So they do admit that these websites are taking content without their permission. Good, next step? They have no clue. How can they?!? Have you seen their current web presence?

Lets take a look at that. I am going to talk about the two major channels in Pakistan: Geo TV & ARY Digital.

ARY Digital:

I am not even sure where to start from. Lets look at it from a non-designer point-of-view first.

1. Who decided to use IFrames? Call him up and tell him that the world has moved on and then fire him.
2. Image swap on navigation menu? Are you kidding me? Seriously, I want to know.
3. What’s up with all the flying-and-dashing Flash content?

That’s my conservative list. I don’t want to bore my non-technical friends.

From the design perspective:

1. Some colors appeal to certain demographics, some are trendy, some have universal appeal, some are boring; others invoke no reaction. The color that ARY Digital picked for their website is just simply horrible and unpleasant.
2. The layout has no structure to it.
3. Links open in a new window (or they just open within the IFrame and I can’t bookmark them)
4. No social network integration. I am not even sure why am I saying this. I mean I didn’t really expect them to have that understanding anyways.
5. No clear way to see how the TV programs are categorized.

Oh this list can be long, but I will stop here.

Now let’s look at the other channel, Geo TV:

At least one thing that Geo did right was not to go with any weirdo color scheme.  But after that its all down hill.

Non design related issues:

1. No SEO optimization
2. Please give up on table based layouts
3. Hey, at least they are not using IFrames
4. Why do links to Geo ME, Geo Japan etc open in a new window?

Here are my biggest design issues:

1. No structure to the website.
2. What’s up with a small font-size?
3. Ads by Google? Are you serious? What happened to your sales team?
4. The navigation on the left has everything but what the user is looking for. Which shows are aired on Geo?

So with these kind of online presence how can they even think about taking any legal action against those sites. They have no way to provide that service to their customers, if it weren’t for these illegal streaming websites.

Solution?

Hire a design firm. Seriously, these guys have enough reason and responsibility to hire a design firm to work with them on their website to bring the content to the users. There is some really valuable and noteworthy content, but content without style goes unnoticed.

TV networks in Pakistan need to realize the potential that they are sitting on. Opportunity is with them to get the best solution out there so that their viewers can really enjoy their content. Its not hard, its very doable.

I would’ve provided my design thoughts on how these websites should look like but that is for another day. I would love to hear from someone at Geo and ARY on why is their site so badly designed. Its a long shot but hope never hurts.

So what is good or bad about the new design?

The Good:

1. Improved navigation bar. The top navigation bar is a bit of a relief to find your way around cricinfo. Previously, these options were buried under a pile of other useless stuff, making it hard to use the website to the fullest.

2. News and video highlights. The core of the site is the instant news about the cricketing world, and they have done an excellent job in highlighting that part of the website. Making it easy to gaze over the latest news and consume it.

3. Scores. A bit mroe detailed score right on the right-hand panel. Makes my life much much easier.

4. Scorecard. Beter colors and layout. The ugly toolbar on the left is gone (woho!) and it gives the actual scorecard a bit more breathing room.

The Bad:

1. Hard to focus on certain portions of the website. I think the background gradient distracts the reader.  A boxed container to overlay the gradient would have helped a lot.

2. Scorecard. The tabbed navigation is just over used. Everything is crammed on a single page and tabs are used to organize them. Tabs within a tab ain’t good for usability. Another nifty idea, gone wrong is the commentary along with the batsmen dismissal. I think this is a neat feature but gone wrong. So far, for me, in a live game this info is always wrong.

Overall:

I think this is a positive step towards a nice redesign. I am sure they will work on some of the quirks in coming weeks and fix it up.

One such great technology is powered by PakTranslations.com – To see how awesome the technology is you can see the urdu version of Mazaydar.com!

So what’s this blog post all about? While I love their technology, one thing that bothered me was their UI. I think they can make the site and technology a great hit if can make users life easier. They already have a great way to do it but its sorta hidden.

So I spent about an hour or so last night, while I couldn’t sleep and came up with this small mock layout.

Some thoughts behind the layout:

1. My goal was to keep the focus on the cool technology. I certainly didn’t spend too much time on the logo, which can certainly use some work

2. The “Instant Translation” is a nifty feature. Users need to know that they can place http://www.paktranslations.com/? infront of any url to get it translated.

3. Bookmarklets are also awesome, I have been using them and they are just simply great to translate anything instantly.

I think the whole website is an amazing idea, a much needed innovation coming out of Pakistan. I am sure as they progress the technology will just keep getting better and better. But I also strongly believe that a good technology which isnt’ accessible is not worth much. People need to be able to use the technology easily to be able to provide feedback that is needed.

Note: The design is totally opensource for PakTranslations team to adapt.

The ultra-new Dawn.com does not suck (that much) anymore. The layout is clean, neat and better. Check it out!

So what could have prompted this change? I certainly hope that I had caught them off-guard with their previous layout and they were already working on better layout and design. They certainly have made the site look much better and kudos to them for taking the step.

I will do a much detailed review of what I like and what I don’t like of the new layout in coming days.

So today, I will be looking at the lootmaar.com site and give my two cents on the good and the bad about their UI. 

Brief Overview:

The layout of the main page is a fixed width. I wonder why didn’t they use flexible width layout to provide better viewing experience. The user is presented with large tabs for “Buy”, “Sell” and “Sign in”. These three actions are important and the base principle for the site. Actually just the first two are the important ones.

They have various categories that users can post auctions under. A large “How lootmaar works” banner and quick link banners are also presented on the initial view. Scrolling down on the main page, gives us the “hot items” view. 

The auction page is simple which three columns that provide picture, bid details and the seller details. Underneath it is the item description which is provided by the seller.

An interesting layout. Lots of white space and large font size. 

So what about it?

Color scheme is nice and easy on eyes. Its mostly white so that’s not really an issue. The small FAQ type banner is very interesting and I think gets the point across. The auction page has the information in nice and easy distinctive fonts and colors which is easy to read.

The thing that bothers me the most though is the fact that the designer didn’t really design it for an auction site. Don’t get me wrong, the layout does not maximize the purpose of the site. Which at the end of the day should be the sole purpose of lootmaar.com

Let’s start by looking at the main page. The header is just a complete waste of space. There the tab for sign-in is just simply not needed there. I would have made the search box more prominent since that is what I would like to do almost 90% of the time. 

The whole strip bar underneath the tabs are also not well placed. The search box repeats itself right away! And the two other blocks information are totally irrelevant for the user, I would rather offer them a link to a quick tour of what Lootmaar is. 

Categories list on the left side needs to loose the circles and the width for this column needs adjustments. I would put the “One Rupee Auctions” and “Auctions Ending Soon” banners right above the categories list. 

The list for hot auctions should be moved up a bit so that they are right there for the user to click and buy. There is a lot of wasted whitespace on the page. The three column layout for hot items section should be fixed to make space for at least one more column. The images are a bit too big for previews. There should also be a button for making bid right away on the item, currently this isn’t the case. I am sure this will drive their auctions up rather quickly. 

The auction page for an item has an interesting layout as well. I think they could really really use a re-design on this page. The page fails to attract a user to quickly make the bid or instantly buy the product. The icon should be placed underneath the initial item description. The message for the user to login (to be able to place a bid) needs to move out from there. Rather this shouldn’t be on this page at all. The user should not be forced to register at all. See Lazy Registration Design Pattern for more details.

There is another odd panel that I saw on this page. When you scroll all the way to the bottom, you will see a “Bid on this Item” section. Where there is a login form, right there! In the middle of nowhere! 

Overall, while lootmaar is trying to bring a great service to people in Pakistan, it should also work on the UI development of their site. I strongly believe that just like any other e-commerce site, the layout for lootmaar.com can drive their user registration up considerably. What is rather more important than user registrations is user bidding. If they can get a user excited about a listing, by letting him find the product that he is looking for quickly, then their auctions will be more successful. 

In the end I believe that lootmaar’s success is very much directly related to a successful auction. I wish them all the best for future and I hope they really do become the eBay of Pakistan!