IA and UI Redesign of WebHealthCentre.com

WebHealthCentre.com is one of the highly visited medical information portal in India. The site is rich in information, but lacks a proper navigation and Information Architecture. Here is my attempt to update the UI (visually) and incorporate a better navigation.

For your reference, here is the screen shot of existing site :




Updated UI and IA

Home Page:
The modules from existing home page moves into tabs. The home page now acts as a at-a-glance view of dynamic contents (Bulletin and News).

Second/Subsequent Page Model: The subsequent pages will follow the classic 3 column layout as most of the modules in WebHealthCentre are information-centric.



Information Architecture - Categorization of existing modules into new tabs. The interactive modules get into Health Centre tab and information-centric modules gets into Health and Lifestyle tab. Refer the following image for the complete grouping info.



Wish to see some updates of this sort to happen in WebHealthCentre.com. :-)

- Rajesh Sundaram

Comments

Post a Comment

Popular posts from this blog

Harry Potter - Marauder Map Application - UI Design

Image
Introduction: The Marauder Map is a magical map in Harry Potter series. At any given time, the map shows the location of the person in the castle. This quick design proposal captures the idea of porting the Marauder Map into a software application with the following primary and secondary goals. Primary Goals: - Ability to locate a person - Ability to track the location history of the person in a time line Secondary Goals: - Ability to see the location history across various calendar dates. - Ability to load / choose different maps Description of Idea: The Marauder Map application uses Search functionality as the main function, along with Time Line scroll. Like a typical map application (Google Maps) this app has the ability to zoom-in, zoom-out, drag-across-navigation. By default the user must Sign-in, to access the app. The sign-in is a security measure, to show only the user's friends' locations and time-line history. The Screens (The background pencil sketch art court...
Read more

Positioning DIV to the Center of Browser Viewport

Image
Positioning DIV to the center of Browser Viewport Sometimes I write some JS code to prepare my HTML mockups. In this post I am describing the step-by-step approach on how to position a DIV to the center of browser's viewport. Case Assume that you have a DIV and you want to show it upon clicking a link or button. And that DIV must appear exactly on the center of the browser's window. Technically browser's display area is called "View Port". So our aim is to display a DIV to the center (origin) of the view port. How to do this? 1. Create the DIV. 2. Specify CSS properties 3. Write a few lines of Javascript code to position the DIV 4. Insert an action "onClick" to a button or link in the HTML. Step 1 Write the HTML code for the UI and enclose the code chunk with a DIV. Specify some valid ID for the DIV. For example "AddUserDialog". Step 2 A DIV element, by default will be displayed inline. A dialog box or some other "windowed" UI require...
Read more