Redesign of a tablet application

A new architecture and an updated interface
Client: Géronconsult
Year : 2022
Role: UX+UI Designer

context

BIBHOP, accompanying and aging well at home

BIBHOP is a tablet application developed by Géronconsult. It is an original offer to accompany isolated and/or fragile people, by gathering around them - thanks to digital technology - all their relatives. The client asked me to rethink the application while taking into account its technical constraints. NOTE: To date, for reasons of confidentiality, the tablet can not be presented in depth.

Site BIBHOP

The challenge

Bringing it up to date by adapting to constraints

The client has been developing the application, the web portal and the entire database for years. The tablet application is developed on top of the database in order to limit the data upload to Google. This particularity gives us technical constraints, and the design can not be remodeled at 100%.

the mission

Design a better user experience and a new interface design

The client has been working on the subject for 10 years now. By soliciting my expertise, he was able to get a fresh eye and my skills as a UX/UI designer.

The process

Study all the services of the tablet, to redefine by order of importance

My tasks were to get to know the tablet, to discover all the possibilities of the application and to restructure everything for a better understanding. I was also responsible for redesigning the interface. My work was presented to the client and choices of modifications were made afterwards. I was also able to present my work to users (professionals + beneficiaries). The process is still ongoing, the client is in the testing phase with users. Target date for the end of the test: End of 2022.

Design thinking

Empathy

As the application offers many services, I had to go through the tablet and draw the existing architecture to better understand it

Application evaluation

A complicated user experience

The goal of the evaluation was to discover the tablet and how it works. What services are there, and how are they presented ? Is the architecture optimal ? Here are the main problems I discovered.

Clarity

A dated interface

The user receives too much information due to the many mixed colors and icons.

Understanding

The importance of word choice

Sections and services that we do not understand. What do we find behind it when we click?

Architecture

Where to find what?

"Notifications" and "Alerts" in the "Wellness" section. A personal space with only one service.

User exp.

Too many clicks to get the job done

Due to a bad tree structure and the choice of words. Ex: Agenda, 3 clicks to display a date.

Accueil tablette avant

usability testing

Doubts confirmed

The client already knew his target user, so I didn't need to do any user research. So I went directly to the testing stage. I was able to have 5 people test the tablet. 2 people of about 60 years old with a smartphone and little connected, and 3 people of about 30 years old, much more connected. Here are some feedbacks.

It would be nice to have my favorite services on the front page.

A lot of non useful information (Ecosysteme, My data ...).

Too many choices behind each service.

The interface is old.

The explanations are long and therefore not read.

We don't understand the titles of the sections

Ideation

User testing, a mandatory step

Tree structure

Represent the tree structure to better understand it

After having thoroughly tested the tablet, I flattened the tree structure to give me a global view.

Arborescence originale

Sorting out

Taking this tree structure, I decided to highlight the important services, which could be directly on the home page. And the "less useful" ones, which do not interest the user at first sight. Below the same tree, in yellow the important services, in grey the less useful ones.

Tri durant l'arborescence

Rethink the tree structure and vocabulary

In addition to deleting sections to reduce the amount of information on the screen, I opted to change the words/title of some sections and services because they were not understandable. The "less useful" services will be put further in the tree.

Arborescence après
Removal of the sections "Personal space", "Service", "Wellness" and "Daily". Creation of "Settings", "My space" and "Manage my tablet". Changed names for other services for better understanding.

Prototype

With this new tree structure and taking into account the technical constraints of the client, the interface redesign can begin.

constraints

A partial redesign, only

As explained before, the client having programmed his own application, there were constraints to respect.

Interface BIBHOP

the design

Do not change habits

As Jacob's Law (Nielsen) states, users spend more time on other sites than on ours. So we don't have to re-invent everything. I used this principle for the choice of words (New service "Settings" for example), for the choice of interface design (Calendar, Message ...), or even for the icons.

Ancienne icône Réglage
Nouvelle icône Réglages

BIBHOP icons. Lots of color, lots of information. Not always related to its name.

New icons. Flat design, one color (reminder with the orange of the logo) and already known by users.

Ancien agenda
Nouvel Agenda

BIBHOP agenda. Complicated to read. Many colors. Choice of week/month display to be made before, generating more clicks.

New Agenda. Streamlined, weekly / monthly choice accessible from the same page. Copied from big groups like Google or Apple.

situation before

A complex environment

Not being able to show the full operation of the tablet, here are some pictures of the application interface at the beginning.

Section mon bien être avantSection Agenda  avant

the prototype

Clickable, easier for the customer and users

I proposed to the client a clickable high fidelity prototype, developing only the 1st and 2nd level of the architecture. If he likes it and chooses the modifications, I can continue to develop the rest.

Accueil nouvel interface

Test

After presenting my work to the client, he now had to decide what he wanted to keep or not.

Conclusive tests

I was able to test the prototype with the 5 people mentioned above. All were unanimous: The interface is more fluid, in the "era of time", the services are understandable. The overall user experience is greatly improved.

Section message nouvel interface

Customer's choices

De la V1 à la V2.

Time is running out

The customer wishing to market its tablet by the end of the year, and being alone for the integration of the modifications, they could not be all carried out. Today, the architecture - crucial point -, the icons, some colors and even the BIBHOP portal were modified

Portail BIBHOP

New portal, cleaner, less text and with new icons.

Tests in progress

V2 client in test today

A V3, for later

Lack of time, the customer is testing today the V2 updated to 80% with my proposals. He has to commercialize the tablet to evaluate it, to be able to project himself further and to think about future modifications. Today, and those until the end of the year 2022, his tablet will be distributed to carry out tests and to have a maximum of feedback.

What next ?

Next step

I stay in touch with the client regularly in order to have the progress of his work. When I can, I also take part in the tests of the tablet in order to better understand the future users. The BIBHOP story continues!

Thanks to

A reconsideration

Thank you to Christophe, manager of Geronconsult, for having given me his trust. Thanks also to the team for taking into account my feedback, and for questioning the solution after so many years of work.

En cliquant sur "Accepter tous les cookies", vous acceptez le stockage de cookies sur votre appareil pour améliorer la navigation sur le site, analyser l'utilisation du site et contribuer à nos efforts de marketing.