Dos
Projet suivant
RÔLE:
Conception UI / UX
Animations
Recherche d'utilisateurs
Infographie
OUTILS:
MEMBRES DE L'ÉQUIPE :
Adobe XD
Illustrateur
Photoshop
Effets secondaires
Figma
Mon travail
Mon travail chez Autotrader consistait à concevoir l'expérience utilisateur et l'interface utilisateur pour développer le meilleur flux d'utilisateurs. Les clients nouveaux ou déjà existants voulaient un moyen facile de découvrir les nouvelles voitures Ford, Mazda, Audi et Mitsubishi. De plus, j'ai créé des infographies pour l'équipe de vente sur la façon dont les nouvelles voitures électriques prennent le marché en 2021 et 2022.
Maquettes
Un visage important sur le développement de l'ensemble de la conception a créé tous les wireframes pour comprendre les fonctionnalités du site Web sans ajouter tous les atouts. De plus, avec Autotrader, l'équipe travaillait dans un environnement de travail agile dans lequel les actifs étaient fournis après l'approbation du client. Par conséquent, les wireframes étaient le meilleur moyen de comprendre la fonctionnalité.
Maquettes
et tester
-
Our Autotrader design should be different and unique to all the designs that previews pages had on the past or other websites.
-
Easy to use and very intuitive for different demographics.
-
Promote car brand recognition.
-
Always this about the call to action as a tool to close provide a closer experience with the brand and a bridge between Autotrader and the car manufacture.
-
Build the necessary flows to create a great wireframe to match with the user journey for Usability testing.
-
Align the whole team and
Maquettes
et tester
Avec les wireframes, nous avons décidé d'explorer différents flux d'utilisateurs et de déterminer si certains écrans ajouteraient de la valeur à l'utilisateur, par exemple, sur le site Web de Ford, le premier wireframe que nous avons créé est passé de 10 écrans à 8 écrans de l'utilisateur initial. couler.
Tests sur maquettes vs wireframes
L'interface utilisateur comme facteur clé
L'interface utilisateur sur Autotrader a été un facteur clé dans ce projet car l'entreprise dispose d'une très bonne bibliothèque d'icônes et de différentes images HD que je pourrais utiliser pendant tout le processus de développement.
Maquettes finales pour les développeurs
Mazda
Comprendre l'UX
Dans Autotrader, la plupart des conceptions ont une manière différente de comprendre l'expérience utilisateur, car toutes les marques de voitures ont choisi l'UX et l'UI qui conviendraient le mieux à leur image de marque spécifique.
Maquettes pour différentes marques
La recherche des utilisateurs et les différentes mises en page qui ont été conçues correspondent à chaque marque et toutes les conceptions doivent être uniques et différentes pour l'autre.
Toujours réactif
La mise en page des sites Web doit être réactive, donc dans le processus de conception, la majeure partie de la mise en page doit être une structure complète de manière à ce que toutes les fonctionnalités aient lieu dans différentes résolutions d'appareils et sans texte. Les CTA doivent couvrir la voiture ou le nom de la marque.
Mobile
Tablette
Bureau
Audi
UX/UI Audi
Avec le design Audi, notre équipe crée plusieurs bibliothèques CSS afin que le texte ne chevauche pas les voitures et chaque section de navigation a été créée avec des fonctionnalités différentes.
Se moque avec les actifs du QG
Pour les développeurs, il était difficile d'ajouter des ressources sur les différents sites Web car elles étaient lourdes et la plupart nécessitaient un traitement spécial pour chaque appareil. J'ai aidé les développeurs à fournir chaque actif individuel pour développer la page.
