Charl Norman

We recently completed a major revamp of Blueworld’s layout aligning the site’s functionality with modern internet trends. You might say we’re playing catch up in the international game but locally few have jumped at the opportunity to create social networks.

I was responsible for strategizing blueworld’s functionality and designing the front end. Content layout design is what brings a smile to my face, setting out user functionality and plotting out how users will navigate throughout the site from their first click to their exit.

I started with the Blueworld’s homepage and turned it into a summary of the websites most dynamic content. The homepage changes on a hourly basis with new user registrations and uploaded galleries etc. So I placed these items in the ‘feature row’ of the page - right at the top of your view everything above the taskbar in your browser. The feature row of content contains stories around a set list of topics which we duped “For Him” & “For Her” - more on that a little later. Also in your first line of sight is the core of Blueworld’s business - clubbing pics. Almost every night our photographers are out on the scene snapping up the memories driving users to our site to retrieve the pics. Lately we have even expanded to photographing social events such as the J&B Met, One day cricket matches and private birthday parties! This ensures a constant flow of traffic to the main page. The gallery area is the most visited on Blueworld, my goal was to keep the users online after they saved their pics.

What better place than Blueworld to meet new people and socialize online, after all its socializing at nightclubs that got you on the site in the first place. So the second row of content features the Blueworld community with the latest users (get your five min of fame), most popular guys and girls with a Top 100 tags below each. From here any user logged in or not can surf onto user’s profile and view their info. We decided to open the site up more to the general public compared to before when you had to be logged in to view anything. The site looks good, I’m confident visitors will surf around and be impressed and then willingly signup, I don’t want them to be scared off by a 10 field signup page before they’ve seen anything. Although to interact with users and view the larger version of photos you need to be regged.

The Blueworld community content boxes - Black indicating new users and off course pink female and blue male:

With featured articles, clubbing coverage and user profiles out of the way, I placed blogging and “For Him and “For Her” in the bottom two content boxes. The Him/Her sections was the brainchild of Blueworld managing director, Bradley Vogus. We researched and combined the most popular male and female topics (Zoo/FHM) into two sets of news streams. For the ladies fashion, beauty, astrology, “Hotties” (Dam Archers Aqua) and Celeb gossip. The guys natural choices where babes, gadgets, sport, jokes and games. The areas are updated daily by our content manager and streams through the flash feature player down to the bottom two content boxes.

The bottom two content boxes on the homepage:

Now lets get down to the money, user profiles. The recent boom in online social networking with startups such as Facebook, Myspace, Xanga and the originators Friendster has created a new internet hype bubble. Were not looking to compete in their market but bring social utilities to our local web space. More and more South Africans are jumping online as broadband in your homes become more affordable. Blueworld’s 110k user network is 80% South Africans - all in a very specific age bracket - a perfect place to meet online. The user profiles had to look hot but at the same time be clean and not graphic intensive to ensure user friendly controls to our visitor base. You will be surprised how blind some end users are.

I have a two step plan for the profiles the first of which restricts my creatively. The old site layout was in 800px width and we had a short turn around time for the revamp so we stuck with 800 pixels width to make the transition easier. This limited what I could do with the profile’s content but at least ensured that 99% of the computing world could view the site without horrid horizontal scrollbars!

My profile on BlueWorld: (cropped)

Taking obvious inspiration from Myspace the profile features your personal details, photies of yourself, your ‘about me’ blurp, the friend box showing off your ‘friends’, your Blueworld blog feed, the user gallery where you can upload any image format or even zip files to create galleries with thumbnails and finally your profile comments. The latter being one of the most important aspects of basic social networking. When I first joined Myspace I found myself checking my inbox hourly for new comments or IMs. It’s what gets you hooked. I wanted it to make it easy for users to leave comments which would result in active users returning to the site on a regular basis.

The bottom end of user Shelley’s profile (above) - On the left her image gallery and on the right her comment box. I added the ‘quick comment’ to encourage users to post messages especially if they just checked out your pics on the left. So far users have been active on each others profiles and the users are kitting out their pages as a result of this.

There’s nothing worse than an empty profile so we added a little magic to spice things up -

Auto commenting on every new user’s profile. As soon as they register - Hello! Candice (photography manager), Brent Brooks (marketing director) and myself appear on your bare profile ‘welcoming’ you to the site. (hehe)

and offcourse Brendt, myself and a few others are added automatically to your friend or fan boxes. The “Tom’s” of Blueworld. (;

To avoid empty profiles I had to make the backend as user friendly as possible so users would fill out their profiles and upload stuff. All the tools you need to customize your profile are summarized on one page. I found it hard navigating through Myspace at first so I wanted to change this with Blueworld’s user control panel.

Above a cropped screen shot of an area of the user profile backend - changing your wallpaper and uploading images. Users can choose any of the listed wallpapers or upload their own. The vertical black bars down the side of Blueworld fixes the site’s 800 pixel width - this prevents the user’s wallpapers stretching the entire width of the screen. This will be corrected with the stage two’s css layout changes when we expand to 1024 px.

Another very important aspect of building a social networking platform is providing short urls for users to promote their personal pages. We setup www.blueworld.co.za/yourname to redirect to the matching user in the databases profile.

The last edition to the site was User blogs. The blogging system is very basic for now, it was a quick make-shift job coded in half a day to roll out blogs and not loose users to Blogger, iBlog or whatever.

Below a crop of user Supersmurf’s blog. His blog post listings are on the left and comments by users on his stories are on the right. This ensures another level of interactivity by users leaving comments on blog posts. Their avatars serve as a small window into their profile which is left behind on each comment they post. This encourages click troughs onto user’s profiles and ultimately user interaction.

Finally, to get back to the homepage a very under rated-tool to get your visitors attention to the first bit of content you want them to notice. The “flash feature story scroller”… We coded the swf player to pull content dynamically from our “For Him/For Her” areas and automatically update itself each day.

That pretty much sums up what we’ve been busy with for the last two months. Next up is Blueworld Video, code named ‘BlueTube’, we should be online within the next few days. The 1024 version of the site will introduce a host of new functionality and mobile features coming in the next few weeks. More on that later..

My sources of inspiration for the completed revamp - Myspace, Facebook, Bebo, College Humor and the old FaceTheJury layout. (They messed up with their redesign).

Props to Foxinni for the header graphics and ‘Nightstalker’ for the backend coding.

Please share your thoughts on the layout and design.

ps - Check out Blueworld’s “new logo design” contest - You stand a chance to win 10k cold cash for just voting for the winning logo! The winning logo artist wins an iPod. *yaay* Any registered user can submit and vote for logo entries.