Dhwanit

Posted: Jul 6, 2010
By: Dhwanit | 1 comments
Category: Design

Online Competitions, WizKids

HomeBlogDesign → How we built the Horlicks WizKids website
Share/Bookmark
From our Design blog

How we built the Horlicks WizKids website

Horlicks WizKids is South Asia's largest interschool fiesta with over 200,000 children...

HTML and CSS tricks for good website design

Even the most experienced and best CSS/HTML designer out there does not have the vast myriad sets...

HTML 5: The future of rich-media web

In the ever-changing world of the web, its surprising to see how long HTML 4.x has held on to its...

From our Apps blog

Calculate your Amazon AWS Hosting Costs using Excel

One of the most common questions that come up whenever we recommend Amazon AWS as a hosting...

Drupal in the Amazon AWS Cloud

Recently, we worked on and delivered a user voting web application, hosted on the Amazon Web...

Apache (httpd) and lighttpd on an Amazon AWS Basic AMI

Over the last couple of days we did some intensive work on comparing execution of a complex...

How we built the Horlicks WizKids website

Horlicks WizKids is South Asia's largest interschool fiesta with over 200,000 children participating from four countries over a period of five months. “iWiz,” the online competitions section of the website, was built by WebrMedia to capture the buzz in a youthful looking website. iWiz is a platform for school children to participate and win online competitions for best photographer, best journo writer, best digital artist and various other categories.

The website was built over a span of six weeks. This period included the initial requirements gathering, design of the user interface, discussions on the user experience workflow and development of the server software. The website was launched after the culmination of three independent specialists who tested the website on the launch server.

Horlicks WizKids

Initial requirements

Week 0:

Being connected to the Internet all the time has its distinct advantages. Most importantly, client meetings are reduced (if you live in Bangalore or have an idea of its vehicular traffic, you’d understand why) and a lot of discussion happens over chat. The salient points are noted on-record in email conversations seeking client approval. Having approvals on-record is advantageous to both the client and us. The client need not worry about their ideas not being implemented on the website: if they’ve signed off on an approval email, we will implement their requirement on the website. We don’t have to worry about unnecessary scope creep that can potentially delay the website or add to the client’s cost of development.

For the WizKids website, the initial discussion took place in a face-to-face meeting which kickstarted a back-and-forth email discussion before we formally presented a proposal. The client took close to ten days to compare our proposal with those from other providers – a due diligence task we encourage our clients to do – before awarding the contract to us.

Week 2:

We learned at a later stage that the estimated cost we had quoted for developing the website was amongst the highest in all the proposals they received. The reason they chose us was the professional manner in which we collected the requirements, visually presented a mindmap of the website and provided a detailed estimate with individual break-up of hours required and costs involved for design, development, testing and deployment.

We do this for every enquiry we receive, regardless of whether we’re selected in the end. We’re proud to say we’ve achieved close to 80% conversion rate (till date) on the projects that we’ve bid on.

Design

The Horlicks WizKids website is a few years old. It had always been a static website with a “new” design each year. It contained a page for event schedule, a page for students to download PDF brochures & registration forms for the event, a page about the event itself and a contact information page. The dynamic component was spread over Facebook, Twitter and other social networking websites.

From 2010, EduMedia wanted to have a consolidated website to incorporate both the static information as well as the dynamic component into a single Horlicks WizKids website. We extended it by converting the dynamic component into a playground for children to engage in a participatory prize winning set of online competitions.

Week 3:

The design was a challenge. We had never worked on websites that had to first of all, integrate well with a “static component,” after which it had to showcase an informal, youthful appeal and finally, incorporate the requirements of the client in an intuitive easy workflow for children in grades 1 through 12. By researching the websites out there that are specifically meant for kids to use (PBS Kids, Discovery Kids, Nat Geo Kids etc.) and combining it with the client’s requirements, we arrived at a broad set of user interface goals, incorporated them into a wireframe and sent it to the client:

  • Primary navigation for dynamic iWiz components and secondary navigation for WizKids components; both navigation systems will be visible simultaneously.
  • An area for promoted content above the website fold. - An area for user generated content below the website fold.
  • System for selecting a city for user generated content on landing pages.
  • Individual landing pages for every city that will follow the promoted content above fold; user content below fold design.
  • Headings to use a “kiddy” font (for lack of a better term)
  • On sign-in, redirect the user to the online competitions area.

Horlicks WizKids website wireframe

Some design concepts making it into the approved visual prototype have been influenced from Yahoo Kids (“kiddy” font styles), Mivokids (color combination), Capstone kids (sky background).

Development

Week 4:

We at WebrMedia maintain multiple starting codebases of Drupal in our repository. The one suited best for Horlicks WizKids was social networking lite. Because we have these codebases & starter databases ready, we save a lot of time getting our work environment ready for the new website.

The website software included development of a custom Drupal module that maintains a countdown of event schedules as they move about geographically. For example, if an event is going on today in Bangalore and the next event is slated for Mumbai, the countdown widget shows both these as per India time, based on input from the database. Management is hands free.

Content moderation was very important for EduMedia. Any user generated content will go through an admin approval process before it gets published on the website. This way, EduMedia maintains the quality of the content published. We integrated the modr8 module with WizKids and provided a uniform administrative user interface for batch approval of content.

We also built in a role based control mechanism for posting new content. Administrators or staff of EduMedia do not need any approval to post messages; they also have the ability to control what content gets promoted or published. With the UI we built, pushing content above the fold or keeping it below the fold on the website was a matter of checking on or off a check-box in the administrative interface.

Testing & deployment

Week 6:

Test benchmarking was conducted using ab (Apache Bench) software. This software simulates multiple concurrent connections to a website to test its processing capabilities. The server in use is a quad-core Xeon based processor with 4GB of RAM, with a good chunk of its processing power available on demand to the Horlicks WizKids website.

We sustained test efforts for six hours using Apache Bench with an arbitrary number of concurrent connections ranging from 20 to 300 requests. During this process we ended up blacklisting our local IP address several times because the hosting provider programmed firewall thought it was the beginning of a DoS attack! (‘Twas good to know that the firewall worked!) We also ended up killing the server once: 134% processor load, 96% memory consumption, 99.7% swap space utilization, during the testing period.

Testing provided a means to gauge what blocks and pages could be cached and what need not be, thereby optimizing the website and arriving at a sustained processor and memory utilization to about 20% processor load, 45% memory consumption, 0% swap utilization on 300 concurrent connections.

Live!

The website went live on June 30, 2010. Horlicks WizKids – the event – kicked off 2010 with the first of seventeen Indian cities on July 3. Go to http://www.krayonevents.com/horlicks/ to see it in action.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

We're a company of experts!

Not only do we work on the design front, ensuring a great visual appeal for your visitors, we back it up by awesome software running behind the scenes virtualizing your business intelligence. We will work to give you the best!