UX and WEB application design

Client

CTBTO (Preparatory Commission for the Comprehensive Nuclear-Test-Ban Treaty Organisation)

About the client

CTBTO is the international organisation setting up the global verification system foreseen under the Comprehensive Nuclear-Test-Ban Treaty, which is the international treaty banning any nuclear weapon test explosion or any other nuclear explosion.

Deliverable

UX design of Operations Centre Detection Tool for CTBTO.

About the deliverable

It’s the provision of specialized recommendations, ideas, tools, and know-how regarding best practices and technologies used in web design. After examining needs and pain points, the target audience was segmented into two distinct user groups, consisting of the Commissions’ Operations Centre officers and visitors respectively.

For the complex data to be displayed in clear and understandable terms, the visualisation employed a strategic information architecture.

Based on the requirements the tool is projectable on any screen and all major tasks and goals are presented in one layout with minimum interaction required by the users. Various risks and technical/functional requirements that arise in developing a visualisation tool that needs to operate properly in significantly varying sizes (from small scale monitors to display walls), were taken under consideration. The process that Hypertech followed to satisfy the above-mentioned criteria was to investigate and identify the specific tasks and relevant information that users will need and illustrate the outcome in wireframes agreed upon by both parties.

Due to the complexity of the project, the visual elements included in the design recommendations were universal and consistent, e.g. a specific colour palette, symbols, and elements were established and formed in a reusable content format. The same goes for the animated elements and other forms of visual identification methods, specific to the task, such as the selected map layers to be aligned with the boundaries the stations and the monitoring process, in general, have established. All of the above were developed with accessibility in mind, colours contrast adequately, and the text is readable from a large distance. As the monitoring system is a global network it consists of multi-cultural members symbols, legends, etc., that are immediately understandable without the need for descriptions.

Alternative solutions were developed and showcased to the Commission, as the Contractor assisted the close monitoring of the entire development process and incorporated any feedback received. To ensure the feasibility and the quality of the proposals, Hypertech made use of robust libraries and technologies, such as D3.js and Bootstrap.

Link

Internal use only