Salut !

L'ICO

ux | ui

webdesign

2019

icn tablette

Refonte du site web de l'Institut de Cancérologie de l'Ouest. Projet réalisé à l'agence Digital Garden. L'objectif de la refonte était principalement de moderniser l'aspect graphique de l'ancien site mais également de remettre l'utilisateur au coeur de l'usage du site web. Il y avait beaucoup d'informations à voir d'un seul coup sur l'ancienne page d'accueil et la direction prise lors de la co-construction a été d'orienter rapidement et d'un seul coup d'oeil l'utilisateur en fonction de son statut et de ses besoins.

1

Wireframes

Avec l'ICO, nous avons donc définis 4 types d'utilisateurs et avons pris la décision de le mettre en avant dès la page d'accueil pour pouvoir les orienter directement sur le contenu qui leur est dédié :
• Patients & Proches,
• Les Professionnels de Santé,
• Un Espace Recherche, et
• Un Espace Donateurs.

De plus, il était important de mettre en avant les points d'informations de l'ICO (comment venir, annuaire et contact) de manière à ce qu'ils soient facilement accessibles. Nous avons décidé de créer une barre fixe à droite afin de pouvoir accéder à ces informations en permanence. L'annuaire représentant une fonctionnalité très utilisée, il a été mis en avant également sur la HP.

desktop_wireframes

2

Choix graphiques

À l'origine, le site ne devait comporter que le orange et un nuancier de blanc/gris afin de rester en adéquation avec l'identité du logo de l'Institut de Cancérologie de l'Ouest. Cependant, après concertations nous avons décidé d'instaurer un bleu foncé qui permet de constrater avec le orange et de casser l'aspect trop médical et d'y apporter un brin de réconfort et de sérénité.
En ce qui concerne le choix typographique, la Montserrat s'est imposé de par sa lisibilité, sa diversité de graisses et sa polyvalence.

colorimétrie

#E9550E

#F6F6F6

#FFFFF

+

#2A3752

font

Montserrat

Aa

The spectacle before us was indeed sublime.

desktop_interfaces

3

Composants

Il a été décidé au début du projet que nous ne réaliserions pas la totalité des pages mais allions construire des composants/bandeaux afin de leur laisser la possibilité d'administrer et de réaliser la co-construction d'une page comme ils le souhaitaient.

nuage_de_composants

4

Gabarits de page

Nous avons également, et dès les wireframes, travailler des structurations de pages pour qu'elles soient réutilisables pour tous les usages du même type sur le site. En exemple ci-dessous, les listes de médecins pour l'annuaire, et la liste des articles/actualités ont exactement la même base.

type_de_page_gabarit

4

Déclinaison mobiles

interfaces_mobiles

5

Showcase

showcase_desktopx2-et-mobile

Light & Free

Aysen