2018 | Laravel, HTML/CSS, Vue.JS, Chart.js

Web application for analysis of research data

Refashioning the Renaissance project
Aalto University

data managementdatabase designdata visualisationUI/UX designweb development
desktop database

Challenge

The client is working on an EU-funded research project focused on the material and cultural significance of clothing in Europe from 1550 to 1650. They need a system that displays various data from different aspects of the project and presents it in a format that allows for comprehensive data analysis.

Specification

An initial meeting with all the project collaborators was held to gather information about the research that was being undertaken and the types of data that would be collected.

This identified that they would be using a protocol for data collection that would help them analyse the data as a whole. We discussed the importance of data integrity, and how that would impact their results.

database design diagram

Search interface

An important aspect of the early discussions was to identify project outcomes and to understand how they wanted to use the system, who would be using the system and what did they want the system to tell them. This helped to identify a list of possible query parameters.

Related search fields are grouped together in the interface and displayed in order of importance. Fields that facilitate a ‘quick search’ (keyword, date range, type) are placed high up on the form.

search form

To assist the user further, search parameters are provided through drop down lists that are dynamically populated by the data.

Object search

Test data provided by the client flagged that searching items/objects in the database would be complex.

Items had a number of searchable attributes (type, material, technique, colour, finishing, condition, worn by). Items could also be part of a set.

The client wanted a way to return these, but also be able to search for items individually. To facilitate this the client was instructed to link these related items using a unique ID during the data collection process.

To guide the user in constructing search queries the lists are dynamically populated and update based on the previous selection.

Users can toggle between query type. A prominent tool tip provides explanation for how each search type impacts results.

search form

Here will be some information about how during development issues with teh interface design became aparent

Results

Results can be viewed in either tabular or chart format.

The tabular view initially displays with a streamlined set of the most useful columns identified in collaboration with the client. Additional columns can be added by the user if required.

If an item is part of a set, this is indicated through a link icon which when clicked opens a modal to tell the user all the other items in that set.

search results

Once the final data was imported to the system it became clear that some searches would return very large datasets that made the chart view very crowded and difficult the view.

To resolve this additional functionality was added:

Scale – the scale of the data jumps on the quantity axis is automatically set using the size of the results but can be adjusted by the user.

Axis toggle – a tooltip pops up for large datasets to suggest the user switches axis for a better viewing experience.

chart view with crowded results
chart view with crowded results

Summary

The online database has allowed the client to bring together all the different aspects of their research so it can be analysed as a whole and has allowed them to share their project data with the public - a prerequisite of their project funding.