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

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.

This is what BBC had to say:

Slightly dated design and seemingly most of the site still under construction – clear navigation though on the left hand side. News section is kept fairly up-to-date. But again no visible method of contact through the site.

So I wanted to create a bit of a challenge to Pakistani web developers. Lets create a one-page mock of what you think the site should look like? No prize for the contest but I think it will be fun to see what our creative minds can come up with? So who is in?

BTW the screenshot is 1024px wide and that is an interesting view..

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.

Oh my! That is one ugly redesign. It gets even worst when I actually checked out the source-code. It is just pathetic. 

Let me tell you why I think the redesign really sucks. 

1. What sort of layout is this? The content is all over the place, there is no flow in the user’s reading and why is there a big advertisement banner between the menu on the left? They are still using TABLES? (I almost fainted when I saw that). The width of 780px is just not that fun, especially with wide-screen monitors it just looks ugly.

2. Color choice. Seriously? The color scheme is boring. Again, please do something with the lack of visual appeal

3. Where is my headline? Every newspaper has a headline or a developing story that they need (or want to) push out to the reader. It would have been better if they used some space (which they have a lot of) to showcase the latest developing story. 

4. Navigation. Where is the top navigation? The top navigation provides the visitor easy access to different sections of the site. It also makes the top banner more visible to the user as that’s the general area they are looking at. You can even use two-level menu layout to maximize the usage of that space.

5. Tabbed content areas. When you have a lot of information to display on a page, usually a tabbed interface is preferred as it really cleans up the UI and makes it easier to read. This gives more control to the users over what content and links they see, and it saves space in the design.

6. Grid based layout? Coming back to layouts again, why didn’t they go with grid based layout? It is the most effective way to manage and organize large amount of content. 

7. Popup windows? And that too for comments? What the heck are they thinking?!? enough said, I don’t think there is a single designer out there who would put commenting functionality in a new small annoying popup window.

I am really disappointed with the new layout and the redesign. It just doesn’t do justice to the content what-so-ever. I hope they work more on the site and scrap this redesign and hire someone who can actually design beautiful layouts.

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!

Before I start here are some screenshots of all three:

OK this is where I have a problem: all of these sites look like a 12 year old designed them! Don’t get me wrong, I know a lot of talented designers in Pakistan and being a university in this day and age, your site does matter. 

I spent 30 minutes on each site to find some information and at the end just gave up. The amount of grammatical errors, visual errors and layout issues just turned me off completely. 

There are so many things that I want to change on these sites that it will take me forever to list them all there. I will be doing a separate post for each of the site in coming days. BUT I also wanted to take this chance to openly challenge the talented designer in Pakistan to come forward and create a mock-frontpage for any one of these universities. Are you up for the challenge?

My first target is Rozee.pk. Rozee has been a very successful job portal in Pakistan. I like to think of them as Monster.com of Pakistan. They are the place to go for job search. However, when I visited the site, I felt like a huge chunk of data was just thrown at me. I have taken a screenshot of the whole webpage. The page has a height of 2500px — that is ridiculous! 

I have marked the image with few numbers (the awesome paint skills) which I would like to touch upon:

1. What’s with the side banner? I never understood why the heck do they have a side banner. It not only looks ugly, it is completely useless. Complete waste of space. 
2. All this wasted space on the sides. Main content has a width of 776px which does not include that side banner. I would prefer that the site used flex width layout. That will not only make it look good on the new resolutions, it will also give more space for content.
3. Do I really care about all your top employers? Talk about wasting prime real estate. The list is huge! It takes the prime spot and conveys nothing to me. Yes all these top companies are hiring but really what does that tell me? Rozee should’ve listed a top 10 employers list in a carousel fashion with an option to see “more” if I needed to. 
4. Hot jobs are not so hot. So the next piece of wasted real estate is taken up by “Hot Jobs” section. Again too much information cramped up into a small area and on top of that it tells me nothing about the job itself. The title for most jobs is cutting out and its very easy to ignore.
5. Recent Jobs. Ah, finally what I came to find on Rozee — JOBS! This list should be at the top of the site since these are the most recent jobs and most people looking for jobs are always checking your site day-after-day, this is the section that they are interested in. Which are the recent jobs that they can target.
6. Localize options. It is beyond my understanding why this little feature is sandwiched between everything else. This should be at the top of the site so that the user can easily customize the location on the whole site and everything else around me should be sensitive to this.