Problem

The aim of this project was to enable information sharing for health data. This would include three major categories of features- various symptoms and diseases, allows users to order generic medicines and check for blood donation camps.

Scope

In today's world, health is one of the most important aspects for people. There is a need to spread awareness about the various forms of diseases and protection against them. 3D Medical Counsellor is an online application that aims at accepting the symptoms of the users and providing information about the most probable diseases based on the symptoms. The additional modules include, generic medicine ordering system which will enable users to place an order for generic medicines with an available nearest store. The blood donation module will list all the donation events posted by various organizers. It also includes experimentation on WebGL for developing 3D models. The application aims to enlighten the users and socialize the medical field.

Type Group Project My Role UI & Interaction design, prototyping, research, application development Timeline Jan - April 2014 (10 weeks) Tools Used Axure, Photoshop, Illustrator

What I learned


Building Information Architecture
Wireframing for Web
Web Development using PHP

Research Paper


I presented a paper comprising the research conducted for this project at the International Conference on Advanced Computing Technologies and Applications (ICACTA), 2015. The paper was later published in Volume 45 of the Elsevier Journal.

Atomic Design


The way small atoms make a molecule, Atomic design is a methodology used to construct web desgin systems.

Card & Grid Layout


Each card facilitates discoverability on the website. It directs users to important features of the website without having to dig into menu. This improves accessibility of various features. As per the usage statistics collected via Google Analytics, hits for the individual feature pages increased to 67% in comparison to 38% when only menu list was available.

Color Scheme


The colors used in website aim to provide a soothing while interacting with the website. Since the website provides information that is related to health and promote selling of generic medicines, warm colors like red, orange and yellow are predominantly used to indulge a feeling of happiness, friendliness and excitement that encourages an increase medicine checkout numbers.

Fonts


I selected Open Sans font to give a more formal way of presenting data. This ensures that information is available in a straight forward way without any fancy font.

Sitemap


Building the sitemap gave me an early insight in to the minimum number of pages to be designed, along with the website structure. It served as a centralized planning tool for understanding interrelation among pages and planning content strategy for each page. This helped me elminate unnecessary or overlapping data and also help improve SEO.

Wireframe & Design Gallery


This section presents the webpage design along with the wireframes created to conceptualize the design.

#Landing Page
#Donation Portal
#Symptom Checker

WebGL


I used Web Graphics Library (WebGL) to add 3D aspect to the website. I played around on an existing WebGL experiment to understand it's working and how it can prove to be better for 3D animations on the web.