Final UI concept
This project aimed at building a data visualization site that demonstrates citizens health related information for family doctors. They can easily get the overview of their residents' physical condition and monitor potential emergency.
Since the main feature of the site is to allow family doctors to monitor residents' health related data, it is imperative to present data properly and effectively. The types of charts and other data visualization should be intuitive.
One of the requirement I received is to create a technology feeling, which is common in data visualization design. Dark background is good for users to focus on the content.
In addition to presenting statistics, the site also allows users to get access to real time data flow such as blood pressure measuring data. So part of the data visualization should give an impression of real time.
Based on the requirement and sketches I received from the product manager, I created the basic structure of the site. There are mainly five sections including header, left panel, right panel, bottom panel, and map.
I am inspired by FUI which is widely used in games and movies. FUI has a strong futuristic aesthetic but usually not that functional. It is important to balance the aesthetic and functions. I selected several elements that are commonly used in FUI and assigned them with different functionalities. For example, lines work as dividers. Then I carefully replaced the placeholders I created in the wireframe with these elements.
FUI elements
Final UI Anatomy
There are two types of motion. One is for initializing. The other is for real time data. Initializing motion is played while the site is being initialized. This motion gives a powerful and smart impression as well as reducing the waiting time. Real time data motion helps users understand that the data is real time and update constantly.
Real time event alert