Guadalupe Vargas Portfolio

Guadalupe

Vargas

My work

About me

Resume

Contact

Overview

ITSAP is the National Apiculture Institute of France.

Several years ago, they developed a web portal where they published all the material that might be useful for apiarists, researchers, and entrepreneurs dedicated to the world of bees. For many years, this website has served as a consultation portal for these users. For this reasons the technical team and the research team of ITSAP, began creating various tools useful for these users. Among them are L’Annuaire and Diatoxbee. Both the ITSAP website and these tools were redesigned by me in terms of experience and interaction. I also collaborated with the parisian design agency Pulp, who handled the rebranding and visual experience of the website and these tools.

Before

The need and the obstacle preventing its solution

The idea of having a directory of laboratories within France and neighboring countries arose because the institute has a large database of laboratories that conduct analyses related to beekeeping. Often, scientific research requires these analyses, as do apiarist who must perform mandatory analyses, for example, to be able to sell the honey they produce. However, I didn’t have access to any of the metrics in order to know how useful was, because by that moment , they didn’t track anything, they simply observed the database's growth over the years, with an increasing number conversions, in other words, labs registering on the directory and adding their profiles to the database. Given this trend, I realized that audience are indeed consulting the directory.

So, there is a need:

Users needs to localize the labs nearby.

Another need:

If users don’t know the name of the analysis, they couldn't search labs using other metadata such as 'topic,' 'problem,' 'location,' etc.

The problem in the search:

The problem that I could detect from stakeholders was that most of the time beekeepers don’t know the scientific name of the analysis, and they get lost in how to find the proper lab to consult. So, it is very difficult for them to figure out which are the accurate labs to search for.

In the previous version of the directory, there wasn’t a clear way to find labs nearby. The geographic search wasn't clear: the user needed to click on a region of France on a small map to start filtering by region. After clicking the region, the map would zoom in on that area, and then the user could click again to select a city.

🥲

The map was nearly 300x300 px.

The map was nearly

300x300 px.

The process

Sketching the first ideas

From the beginning, I knew that the map was one of the keys to solving some problems. So, I was sure that by adding a large map that allows users to navigate while knowing where they are and what they are looking for, it would increase the possibilities of a controlled and enhanced search.

So, I started by sketching out a first approach.

Another thing that I detect was that the way they present the details of the lab wasn't very useful for users. The most important aspect should be the lab's contact information or the possibility to schedule an appointment directly. The aim of this tool is to facilitate contact between parts.

So I change the order, and now the contact is the most important thing in the detail.

Sketching the first ideas

So, I started by sketching out a first approach.

After

The proposal

Here is a video where I presented the idea to the project manager. Sadly, I don’t speak French very well (not for complex conversations), but she speaks very good Spanish. So, I explained the idea to her in Spanish, but you can turn on the subtitles!

The final design

As you can apreciate this is the final design with the Vx made by Pulp agency.

Types of search

I decided to add 3 types of search depeding the aim of the user:

Spatial search:
In the case of beekeeping, users need to find a lab nearby. Once found, they can view the details to obtain the contact information and make a call, or search for a specific analysis if they know its name.

Analisys search:

In case the user doesn’t know the exact name of the analysis or doesn’t mind traveling to get the analysis, metadata plays a crucial role in the search process. As one of the itsap team members explained to me, “there are often very sophisticated analyses that only a single lab in the entire France can perform. Therefore, relying only on spatial search may not be the most practical approach. Incorporating metadata such as the type of analysis and the material to be analyzed (honey, beewax, etc.) into the search process is essential.”

List of analisys:
Is not a search, but is a way to see the list of labs in France, this is very usefull for itsap team, and for researchers that interact with multiple labs at the same time.

Analisys search:

List of analisys:
Is not a search, but is a way to see the list of labs in France, this is very usefull for itsap team, and for researchers that interact with multiple labs at the same time.

ITSAP now

The new version of ITSAP is published, you can see it here:

https://itsap.asso.fr/

https://itsap.asso.fr/annuaire-des-laboratoires

I proposed to add hotjar to the new website but they added only google analytics. Sadly I couldn’t get access to that data.

Guadalupe

Vargas

Mariel Guadalupe Vargas