Open Access Compliance Check Tool, a digital guide for researchers

By Hugo Galuppo
Published in Portfolio
January 27, 2022
3 min read
Open Access Compliance Check Tool, a digital guide for researchers

The Brief

As a web consultant, I had to transform an idea into a high-fidelity prototype.

Customer: Swiss institution
Project: Design and Build a high fidelity prototype using Full-stack tools (React/Django)
UX/UI Design | Interviews, Usability testing, prototyping, user stories
Web development | ReactJs and Django
Project management | kanban, weekly reviews
Mission duration: 10 months
Tools used during the project: AdobeXD, Reactjs, Django, Kanban with Trello, Openshift, Docker, Git

Problem description

When researchers want to publish their work, they have to research multiple online resources to compare and aggregate different results manually to make their decision.

Solution proposal

A web search engine that allows swiss researchers to access all publication’s conditions in one place.

The first Version

First online version on mobile screen
First online version on mobile screen

The last Version

Live demo:

Last Online version of the checking tool


Last October, the client presented the project during the International Access Week.

OACCT presentation at the international event Open Access Week 2021

The Story

Open access (OA) is a set of principles and practices through which research outputs are distributed online.

Open Access Wikipedia link

Main responsabilities :

  • Designing the application architecture (backend, frontend)
  • Designing the user experience
  • Documentation integration

Existing data

The internal team had already collected quality data using interviews and surveys. They transformed those data into twenty users’ stories.

Get to know the people.

My first challenge was understanding the business need (I had no experience in the scientific field).

How they think and how their work. I did several interviews onsite with the project team to understand their way of working beyond the project.

I collected a lot of information which was useful but overwhelming at the same time.

My first question was how can we synchronize our expectations to not get lost in the process?

I had to find a common way of communicating the result of the design to the team and validating the technical implementation simultaneously.

I decided to go live as soon as possible. So we published the application online early on with a continuous deployment cycle.

Continuous Deployment wheel
Continuous Deployment wheel.

Image source

The first Version

I first sketched some drafts on my own, inspired by a google search interface.

I configured and connected the backend API to the frontend. Then, I added some fake data to display.

Finally, I transformed my sketch into a React user interface.

First online version on mobile screen
First online version on mobile screen

From that first simple Version, we were able to:

  Validate the application architecture using the client’s infrastructure.

  Speed up the design test process.

  Share the live progress with a public URL.

Design, test, execute process
Design, test, execute process

Image source

User Experience specific to search form

I didn’t know how to design the search field, so I decided to go back to my sketch and focus on user expectations.

Then I searched for best practices for the search interface and used material UI for React, which handled my common design principles. Nonetheless, I found that drop-down has some cons to be aware of :

  • They’re subject to overstuffing and can be cumbersome to scroll through when they contain too many options.
  • They slow users down when they’re used to capture readily known values. For example, when entering a birthdate or credit-card expiration date, typing in a form field is usually faster and easier than interacting with dropdown lists.
  • Discreet: Because they are so compact, users may accidentally overlook dropdown lists in forms, web pages, and applications.
  • Easy to dismiss: Accidentally deviating the cursor from the box closes the dropdown and people have to start the selection process all over again.

NN Group Source

Next, I went back to the team with more questions about the data we didn’t have.

  1. How many items per search field?
  2. Are the names in English, French, German or Italian? (Swiss speciality🤯)

So for the first question, it was not more than 10 for each field and English only.

From that, I created a quick prototype in Adobe XD to share with the team what I understood on my side.

Prototyping with AdobeXD

I designed the search engine that matched the user stories and iterated at each review based on their feedback.

The final Version

After eight months of weekly iterations, we integrated all the must-have features based on the initial user stories.

🎁🎁 Added two bonus features that allow the internal team to share the result with colleagues and report mistakes.

Being able to publish 10+ versions every week and share them directly with non-technical teammates was an efficient way to get direct feedback and fix it straight away.

Last Version in action

Live demo:

Last Online version of the checking tool


Don’t be afraid to publish something that is not finish!

A significant milestone was to convince the team (myself included) that we needed to publish the first Version online early. Without that, we couldn’t understand and solve multiple issues on days together as a team. An excellent method to synchronize expectations across different roles!

Set deadlines⏰. It is a powerful tool to prioritize and get the most important painpoint fixed in no time! 🚀🚀🚀


Previous Article
African Sentinel | A knowledge-sharing platform that celebrates African voices
Hugo Galuppo

Hugo Galuppo

Product Design | UX/UI Design



Related Posts

Online Hotel booking | More then an experience an odyssey
April 01, 2022
1 min
© 2022, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us

Social Media