Abricot.co : Analyse UX et Refonte Web

Mon processus de conception:

1. Analyse de l'architecture de l'information actuelle

2. Benchmark, positionement et valeurs

3. Zoning et wireframes : structure et identité graphiques

4. Création de la maquette DA

Analyse du site web actuel

1. La Homepage

Le premier élément visible est une phrase d'accroche assimilée au bouton "inscription".
Ensuite vient le menu :
- Le premier item "recette" n'est pas dans le même ordre que le scrall de la page.
- Le deuxième "prix" apparaît trop tôt sur la page à mon avis, ce qui donne une image très commerciale du service. Cela me surprend de voir cet item dans le menu étant donné que le service est gratuit.
- En troisième position viennent les médias, qui pourraient être moins visible, ou alors avec une pé-visualisation.
- Le dernier item de connexion redirige vers une page, est-ce nécessaire ?

2. Identité et logo

- Le logo est composé de deux antités formelles de couleurs différentes : idée de duos.
La gamme orangée et leur disposition propose une figaration de l'abricot.
- La typographie et les formes patatoïdales sont neutres et ne présentent pas de partit pris particulier.
- La typographie du logo contraste avec celle corps de texte, elle n'est jamais réinvestit, alors que cela pourrai participer à la cohérence de l'identité.
- Tous les textes sont écrits en bold, les parahgraphes ne sont pas alignés, les textes ne sont pas tous férrés du même côté. Le manques de hiérarchisation de l'information peut gêner le visiteur.

3. Valeurs promues par le service

Abricot.co semble offrir une vision de l'amour simple et accessible, peut-être même idéalisée. Ce service vise les jeunes adultes et met en avant une intention à contre courant des services de rencontres en ligne dédiés à cette cible : "l'amour sans swipe ni chat" . Abricot.co se présente donc un service qui accompagne l'humain dans sa recherche de l'amour, du vrai.

4. Mes préconisations
Si Abricot.co souahite combattre le "dating apocalypse", le site web doit faire naître un sentiment de confiance, de chaleur huamine auprès des visiteurs et utilisateurs. Je propose donc de :
- Revoir les typographies et leurs graisses pour hiérarchiser le contenu, réduire le nombre et la présence des couleurs pour alléger le contenu visuel.
- S'éloigner des illustrations/portraits anonymes et froids des silouhettes vectorielles. L'identité actuelle semble trop commerciale et populaire pour le concept alternatif d'une rencontre "repensée".
- Retravailler le logo en gardant l'intention pour le rendre plus moderne et cohérent avec l'identité.
- Ajouter des effets de houvers et animations loop out pour dynamiser le contenu et le rendre plus attractif.

Analyse des concurents

Après avoir recencé plusieurs sites de rencontre, je les aient analysé afin de mettre en place dans ma refonte les éléments qui fonctionnent, et d'éviter ce qui ne fonctionne pas.

1. "Meetic" (même schéma pour "Disons demain")
Ce que je garde pour Abricot.co :
Valeur de confiance, mise en avant de l'humain par les photos, les couleurs et l'ambiance.

2. "Elite" (même schéma pour "Edarling", "Easyflirt", "Voisins solitaires", "Parship")
Il n'y a rien de ce que Abricot.co recherche dans ces sites de rencontre

3. "Lovoo"
Ce que je garde pour Abricot.co :
De manière générale la cible est plus jeune et l'interface plus séduisante et marquante.
Ce dont je dois me méfier pour Abricot.co :
Les valeurs de confiance et le système d'accompagnement est trop légé.

4. "Adopt un mec" et "Badoo"
Ces sites ne correspondent pas aux valeurs que Abricot.co défend

Conclusions

OUI

- Accroche pour aider à entrer dans le site
- Preuves pour rassurer (Témoignages, ...)
- Dynamisme pour séduire

NON

- Froid et "non-personel"
- Impression de l'amour comme un marché
- Images montées : on y croit pas

La nouvelle identité

Etant donné la structure simple de ce site avec peu de contenu, je choisi de faire un site one page en réduisant le menu :
Le concept : "La recette Abricot"
La méthode et l'algorythme : "Comment ça marche ?"
Les témoignages : "Témoignages"
Les médias : "Aller plus loin"

Le zoning

La navigation se fait par un scrall horizontal. Les éléments de contour orange sont fixes.

Le site est ensuite décomposé en deux partie : à gauche le texte, à droite les images/illustrations/contenu dynamique.

Les couleurs

Deux couleurs principales de contraste élevé comme un duo.

Une gamme colorée des nuances des couleurs principales pour les illustrations.

Deux couleurs de contraste pour compléter la gamme sur certaines pages.

La typographie

La police "Montserrat Alternates" est utilisé en italique, sa graisse et ce traitement ont un impacte visuel fort et créent un contraste avec les caractères de labeur pour partciper à la structure du contenu.

la police sans sérif "Candara" est plutôt discrète, elle est choisit pour sa lisibilité et son confort de lecture.

Le logo

Voici quelques étapes de recherches pour le logo :
préservant l'idée de deux antités distinct dans une proximité formelle à l'abricot.

Choix sur un logo en contour pour l'analogisme au coeur.
Il est penché pour coller au style italique de l'identité.

Nouvelle identité et logo complet de Abricot.co.