I promised a buddy of mine that I would provide him a review of his company. Ramine Darabiha, who is the founder and CEO of MySites, a social OS where you can create and use apps that work anywhere. We’re talking about all types of media imaginable, no limits, except you get ONLY 10 GB of space to store your stuff. I meant that in a funny way. That is a ridiculous amount of space for an individual user to store content. What’s great about the service is that it is compatible with a mobile device.

I will leave the service and architecture reviews to the expert, so I will focus primarily on the user interface (UI) aspect of the site with a hint of user experience as well – as we know, both go hand-in-hand.

Homepage (register) layout

This is what you get when you first go to the site. There is a company logo on the top-left corner and login/register credentials on the top-right side of the page. And there is totally nothing in the middle of the top pane or header. Nada. It’s left totally empty. I see the point of balancing the pane with an item on the left and right, but the emptiness in the center doesn’t provide an added value to me. It needs to be used somehow.

The user thumbnail and login input fields appear to be placed too close to the top and right borders. They are overlapping the horizontal line. And the blue dialogue box, which is the status update, is overlapping the main pane area. This is okay, but the whole area is not nice at all. It definitely needs work.

On the left hand side, there are boxes that has a collapse/expand icon on the top-right corner – this ought to be familiar to anyone using a computer. I must say that the outline of the box in gray is okay, but the bottom line of these boxes appear thicker – around 2 pixels while the rest are 1 pixel. I believe the boxes might be placed adjacent to each other and not actually overlapping. Improvements are needed here. One suggestion is to leave a gap between the boxes.

The News box is fine, but I would rather see a link to read more instead of the scrollbar.

Then again, I’m not so sure about the placement of these boxes on the left hand side. I would rather see it in the center content.

Coming to the content, I thought the information on the top part could somehow be combined with “Browsers, Features and Tech Features” boxes. They are related with one another, so why separate them? You can place similar types of information in one section so the users’ eyes do not wonder around the screen.

The next item below that is a slideshow (illustrations) of features. After looking at this for awhile, it became annoying because it was looping. Again, the illustrations are a bit cartoonish and trying to be funny and needs to be more of a professional grade.

Also, there is a Flash demo below the slideshow. It is not playing by default, unlike the slideshow. Sure, the demo might be needed to tell the story of the service, but at the same time, the animation is lacking smooth transitions. Perhaps it was meant this way, but it doesn’t provide me a good storytelling experience because of the intermittent pauses in between sequences.  When the demo is ended, it doesn’t really end, there is a loop of flag waving and you can’t stop it. So when you have the slideshow and the demo continuously playing simultaneously, it becomes really annoying. Of course, you can stop the slideshow, but it ought to stop at the end and if a user decides to replay it, provide the option for that.

Moving to the right side of the content section, there are a couple of promotional boxes – for bands and more informational texts. These ought to be more powerful looking. Right now, I’m seeing it as just another box with text. It needs to appear more like a commercial ad. Then there is the “Register Now, for free” invitation, but with the light blue hues, it doesn’t draw my attention. It appears to be part of the background. There is a “…….mysites.com” field, but I had no idea what I’m supposed to do here. I guessed it was a username field and it is automatically filled in when you pressed “Go.”

The outline frames of these content boxes are way too thick – at 3 pixels. This is not pleasing to the eyes. You can see alignment errors easily (the band information box is not aligned to the bottom of the slideshow box). I think 1 pixel outline would suffice and more universal with other sites out there. It’s more of a standards issue.

After I clicked on the “Go” button, I get a pop-up with user credentials to complete. The pop-up idea is great, but it is not nice-looking from a UI point of view. First of all, the appearance of the whole pop-up doesn’t appear like a pop-up. It is just a box of input fields with a gray outline and a glossy sheen on top. The pop-up needs to stand out more. Nowadays, sites use a dimming technology when a pop-up is intentionally used for this kind of purpose. If it isn’t used, I suggest having some kind of shadow or edge glow with semi-transparency. Something like that so you get the feeling of a pop-up. I noticed that if I kept on pressing “Go”, I would always get another pop-up stacked on top of the previous pop-up. You can still perform actions behind the pop-up, except for things directly behind the pop-up.

Homepage (logged-in) layout

Once you have signed up and logged in, you’ll get five tabs in the middle area – aligned to right side of the company logo. The five tabs are: Home, My Services, My Buddies, My Messages and My Preferences.

In each of these tabs and to the right of the text, there is a terrible looking question mark. If you move your cursor over them, you’ll get a yellow hint text box. Perhaps the question mark is not necessary and could be replaced by something more meaningful – like in the new Facebook.

Company logotype

The overall look-and-feel of the logo portrays a bubbly and wavy feel, with blue blots in the background. The circular shape has the characteristics of water. The site is targeted towards gamers, students and everyone else who might want to share files with their cohorts. The blue hues are okay, but a bit muted in my opinion. The logo appears to be a tad amateurish. It needs to be more professional looking. Currently, it lacks power and some basic design principles.

It reminds me a lot of the Pepsi logo.

In the “About” section, MySites is written with a capital “M,” while the logo uses a small “m”. I don’t know if this was intentional, but it could be more consistent.

The question that boggles my mind is why are “About, Legal Information, Help” links superimposed on the bottom part of the logo? These links are barely legible because a portion of the logo is behind the texts. Normally, these links would be located on the bottom of the page, like a footer. If this is intentional, perhaps create a cell below the logo so that the text links do not overlap the logo.

Today’s standard sites usually provide the ability to click on the logo to return to the homepage, and MySites is no exception. For some reason, my arrow cursor doesn’t change to a pointing hand cursor when I move my mouse over the logo. Therefore, it provides uncertainty of the functionality, but after clicking on the logo, I am taken to the homepage.

Thumbnail icon

I actually don’t understand this icon at all. This icon appears to be used for the default thumbnail of the user and buddies. The icon looks like aliens in a capsule. The blue hues appear to be a bit dirty looking. A better icon is needed here.

Although it is definitely cool to scale the icon, the graphic designer forgot to optimize the icon so that when it is scaled to the fullest, it shouldn’t appear pixilated. The icon itself ought to be created at the maximum size for scaling down, not up.

My Services icons

All icons are using blue hues color palette. In general, it could be markedly improved for better visibility.

My Updates

The “My Updates” section, again located on the left hand side with cramped spacing, shows all the content uploaded by your buddies. If there is a folder, a default icon, again with this capsule-looking object. If there are photos, then a thumbnail is shown. Above it, there is textual information about the item. This is where it’s a little messy. The status of the upload is displayed right after an icon, followed by the item storage directory and to the right; you have “Share this Picture”. These items need to be situated in a table – perhaps with cell borders visible.

Final thoughts

The concept idea of MySites is good. Of course there are others with similar service offerings, but in order for MySites to gain a foothold on a large user base, it needs to have an overall UI renewal. It also needs a customization option so that I can move contents around – like drag-and-dropping because I don’t want to look to the left of my screen all the time – focus on the center of attention. As for the color palette, this area needs a total overhaul. Currently, the whole UI has a muted feeling because there are no other colors. Too much gradient usage is not good. The logo, IMHO, needs to be redesigned with a more dynamic personality.