Client
Côte d'Azur University
Industries
Date
September 2020
THESOC (from the Occitan Thesaurus) is an ongoing project from Côte d'Azur University which provides the tools to investigate and support different Occitan language studies. A thesaurus is a book that lists words or phrases that mean the same thing or almost the same thing, something similar to a repository of synonyms.
The project aims to give visibility to the millions of resources and data the university owns. This data could take the shape of words, texts, sounds, videos or images, and much of it comes from survey fields over years of work.
The assignment I assisted them with consisted of a website where all this data could be accessible to the community. The audience was mainly linguistic researchers, teachers, or anyone interested in studying language nuances.
Being a database project, the difficulty relied on finding a suitable format to expose the content in an accessible and manageable way.
In the early beginnings, they had structured content within tabs: Media, Lexicon and Sentences.
Different people were recorded in different places with a certain survey. By the middle of the project, we shifted towards a categorization of the nature of the items listed: Cities, Atlas, Lemmes, Questions, Etymons to mention a few.
What sets this dictionary apart is the usage of tables and maps. The difficulty relied on other features to control the data displayed and the information architecture. One of the resources we helped ourselves with was icons, that acted as visual anchors for the type of user input. Fontawesome was chosen due to its big repository and accessibility.
My starting point was understanding how researchers were using the data on their daily tasks, so I could frame the correct flow and patterns. There were specific linguistic technicalities to overcome.
For example, it was important to find a way to lay out the many different types of content; something we did mainly in the shape of sortable nested tables.
I started by moving wireframes from balsamic to sketch so we could build different tables by cell components. Information would be displayed depending on the page and type of data input.
From there we moved to the UI and styling. The interface proposed was dark, so we could draw user attention to the table of results. It also aligned well with video playing and existing maps. The brand colours picked addressed the accessibility of the interface and stood out from the map nicely.
Below are the first wireframes of the project along with the style guide proposed in the early phases.
The responsive website adapted the interface modules according to user interaction. For the new users, there is a menu presenting the project and some carousels to dig deeply into the different content types.
Recorded surveys had transcripts on the side that jump directly to the point of the video to hear it in context.
For the users that know what they are looking for the most powerful features are the search and the map. In this one they can zoom and and explore the different locations were data is stored.
We applied the progressive disclosure principle to cover 3 different levels of table views: Advanced, Thorough and Basic. This way, the higher the knowledge of the user is, the more data columns and information he can decided to be exposed to.
If an advanced user needs to focus on a big table only, they can hide the side map. This responsiveness also helped in applying the filters. Users could apply filters or narrow down results from certain table items, as well as choose the sortable column.
We served ourselves with certain UI patterns to organize the information. The toggle allows the user to play with the results quickly from French to Dialect so they can easily contrast results. It's also possible to change certain displays within the map preview thanks to dropdown selectors.
Another resource to get more detail from the table was the pop-up, something that would allow us to open a new table with different related information. Using different font styling options we were able to create some hierarchy out of the information inside each of the different cells and tables.
Nevertheless, customising a map feature was done in a fully immersed and focused experience.
The advanced user would have a way to edit their own maps, creating and editing their groups by simple drag and drop. They can also decide on certain map styling options, and export them in different formats so they continue with their studies offline. Since most of these options would be used in daily tasks, the interface had everything they needed on hand.
This website was first launched in 2021 and since then it’s been used by French, Italian and German linguistics. Risen from a small research department in the south of France, it helps perpetuate dialects and gives the tools to people to study and understand language over different areas and regions.
Please notice not all data is accessible for the time being on the live site.