Le programme virtuel comprend des activités faciles et amusantes dans chaque catégorie, conçues pour que chacun puisse y participer, quels que soient son âge, son sexe, son origine ou ses capacités.

CLIENT

LetsConnect

DELIVERABLES

Design & WebDevelopment

LIVE WEBSITE www.letsconnect.ae

À PROPOS DE LETS CONNECT

Let's Connect est un site Web créé par l'autorité Ma'am de contribution sociale à Abu Dhabi. Let's Connect est un programme virtuel unique en son genre à Abu Dhabi, qui vise à connecter virtuellement les communautés et à mener des programmes d'inclusion sociale parmi les résidents d'Abu Dhabi. Les initiatives d'engagement communautaire sont menées par des ambassadeurs représentant quatre catégories d'intérêts : Santé et bien-être, Communauté, Arts et culture, Affaires et coaching.

  • Santé et bien-être
  • Communauté
  • Arts et culture
  • Affaires et coaching

ÉNONCÉ DU PROBLÈME

Ajout d'un contenu riche comprenant des vidéos, des photos et du contenu de médias sociaux dans les quatre catégories. Une section dédiée aux bénévoles, aux partenaires et au centre des médias.

ENJEUX

Conception complexe avec de nombreuses animations, dans les deux langues, anglais et arabe, avec un support de droite à gauche et de gauche à droite.

SOLUTIONS

  • Une page d'accueil interactive et réactive avec des animations, des curseurs et des vidéos.
  • Intégration de messages de médias sociaux (Youtube, Facebook, Tiktok et Instagram) sur les pages des catégories.
  • Fonctionnalité "Bénévoles" : les utilisateurs y voient les avantages d'être bénévole et peuvent y postuler.
  • Centre de médias qui comprend des articles de blog et des médias sur les événements Page des partenaires pour afficher la liste de tous les partenaires.
  • Section "About Us" où les utilisateurs peuvent voir la liste des ambassadeurs et connaître l'initiative Lets Connect.
  • Support multilingue pour l'anglais et l'arabe avec support RTL et LTR.

PROCESSUS DE CONCEPTION

01 DÉCOUVREZ
  • Entretien avec l'utilisateur
  • Recherche sur les utilisateurs
  • Analyse concurrentielle
02 DEFINIR
  • Carte de l'empathie
  • Carte du voyage
  • Persona
03 IDEE
  • Flux d'utilisateurs
  • Tri des cartes
  • Architecture de l'information
04 DESIGN
  • Wireframe
  • Visual Design
  • Prototype
05 TEST
  • Test d'utilisabilité
  • Test de flux d'utilisateurs
  • Essais de conception

LE FLUX D'UTILISATEURS ET LE WIREFRAMING

C'est un wireframe qui ressemble de près au produit final. Il remplit les détails qui ont été oubliés dans les maquettes de basse fidélité.

La raison en est que l'espacement avait l'air bizarre sans cet ajustement. Bien sûr, ce changement ajoute beaucoup d'espace blanc en bas, mais c'est ce que cela m'a appris. Ne pas avoir peur des espaces vides car nous utilisons l'image de fond de l'identité de la marque sur tout le site.

APERÇU DES IMAGES ET DES POLICES

Nous avons remarqué que la police de caractères devait être plus grande dans la conception visuelle, suffisamment grande pour être bien lue. En raison de l'image superposée.

ACCUEIL

Cependant, nous avons inclus une carte dans la conception graphique pour encourager les gens à participer au programme. Cela simplifie la conception en offrant à l'utilisateur un choix clair ainsi que toutes les spécificités de l'événement. Cette méthode de présentation des cartes est conforme à la conception la plus facile à comprendre du programme.

IMAGE DE FOND

La raison en est que sans cela, l'espacement semblait bizarre. Bien sûr, cette modification donne beaucoup plus d'espace blanc au fond, mais c'est ce que cela m'a appris. Comme l'image d'arrière-plan de l'identification de la marque est utilisée sur l'ensemble du site Web, ne soyez pas effrayé par les espaces vides.

Modèle de processus:

Agile Methodologies (Scrum).

Outil utilisé

Design: Zeplin, Figma

Website: Wordpress, PHP

Durée du projet

10
Semaines
18+Pages web

BRANDING

BRANDING

Palette de couleurs
Brand Typface

Aa

SF Pro

AaBbCcDdEeFfGgHhIiJjKkLMmN
nOoPpQqRrSsTtUuVvWwXxYyZz

0123456789
!*@$%&#)/.,

Titre

Heading

Chef de file Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Paragraph Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Bouton En savoir plus

MAQUETTES HAUTE FIDÉLITÉ