CosmosCollabFinal.jpg

COSMOS

Conception de produits, conception d'interactions, expérience utilisateur

Client: HP, Inc.

Programmes utilisés:

Adobe Photoshop, Adobe Illustrator,
Adobe Indesign, Solidworks, Keyshot

Un studio sponsorisé par HP Inc. et ArtCenter College of Design pour réfléchir et développer l'avenir de l'informatique.

 

Avec ce projet, HP Inc. nous a encouragés à aborder la conception créative d'un point de vue stratégique - au-delà de l'objectif matériel habituel. Notre objectif principal était de connecter des interfaces numériques avec des produits physiques dans une expérience transparente et intuitive.

 

Durée: 14 semaines

Collaboration: Yozei Wu, Lynn Lei, Nathan Lu

 

Mon rôle était de diriger le côté UX et le développement de produits de ce projet.

Le projet est présenté dans le livre "Interaction for Designers" de Brian Boyl.

 

Le projet reçoit le "HP Sponsored Project Acknowledgment Award" en juin 2017.

cosmos leaf.jpg

Qu'est-ce que Cosmos?

Cosmos est un appareil de projection portable qui fournit aux créatifs la plate-forme pour créer et collaborer de manière transparente.

Il élimine les écrans pendant le processus de collaboration en rendant les surfaces interactives pour que les créatifs puissent créer, stocker et accéder aux informations via le cloud.

Samantha
Peut

Responsable marketing

Je suis un paragraphe. Cliquez ici pour ajouter votre propre texte et me modifier. C'est facile. Cliquez simplement sur «Modifier le texte» ou double-cliquez sur moi.

no+more+clutter1-1.png

La collaboration devient compliquée.

Pourquoi Cosmos?

Travailler ensemble est essentiel pour créer des projets réussis. Cependant, ce processus peut être désorganisé avec des papiers volants et des écrans d'ordinateur pour accéder aux documents sur plusieurs plates-formes numériques.

Des informations aux objectifs

Par définition du dictionnaire, cosmos signifie "l'univers vu comme un tout bien ordonné". Cette philosophie se traduit par Cosmos, pour créer l'harmonie dans l'espace de travail.

 

Les produits sont conçus pour puiser dans la nature ludique des participants pour créer une synergie, et l'interface utilisateur permet un brainstorming avec un design intuitif.

1_0002_Layer-3.png

Dialogue ouvert

1_0001_Layer-2.png

Productivité

1_0000_Layer-1.png

Co-création

1_0003_Layer-4.png

Organisation des données

L'écosystème

Cosmos fonctionne dans un système interdépendant de composants.

 

Le hub projette un canevas sur des surfaces sur lesquelles créer des idées et les participants utilisent des stylos pour dessiner et écrire. Tout peut être documenté sur le Cloud pour fournir un accès à tout moment, n'importe où via l'application Cosmos.

system.png
Cosmos+hand.png

Le Hub

Le centre est le cerveau.

 

Ce composant contient l'ordinateur qui enregistre les croquis réalisés dans le Cloud. Il fonctionne avec une projection circulaire autour du moyeu. Le laser projette une projection linéaire qui tourne autour du moyeu pour générer une projection à 360 degrés avec un rayon maximum de 3 pieds.

 

Sa projection multi-touch LCOS rend toute surface interactive. Les capteurs infrarouges captent les interactions de la main sur la surface projetée.

 

Faites pivoter l'anneau pour créer un nouveau canevas, accédez à Cloud pour enregistrer des fichiers et ajustez l'échelle du canevas.

spin.gif
Tourner pour allumer

La conception de l'interface utilisateur est rationalisée pour augmenter l'efficacité lors du brainstorming, car les idées peuvent être éphémères. Avec cinq menus principaux, il est intuitif de naviguer.

L'iconographie s'inspire de trois mots-clés: Synergie, spontanéité, espièglerie.

HP_WIREFRAME_2018-1-01.jpg
open_ceremony.gif
UI: La cérémonie d'ouverture
new_canvas_name11.gif
UI: création d'un nouveau fichier

Le stylo

Ce composant est l'outil de la créativité: esquisse, prise de notes, dessin, mise en évidence.

 

3 capteurs infrarouges sur le hub communiquent avec chaque stylet pour suivre son emplacement et ses actions. La pointe du stylo est une bille roulante translucide qui renvoie des signaux infrarouges au hub.

 

Le glissement du stylo est fait de rollerball en silicone souple, minimisant l'usure lors d'une utilisation multisurface. Pour activer la barre de menus personnelle, le capteur d'empreintes digitales du stylet peut être utilisé.

twist.gif
Faites pivoter pour changer la couleur
slide.gif
Faites glisser vers le haut / bas pour ajuster la taille du pinceau
AA
HP_WIREFRAME_2018-1-01.jpg
Wireframe pour l'interface utilisateur du stylet
hp-process-for-website-10.jpg
Etudes gestuelles
HP_WIREFRAME_2018-03-3.jpg
Interface utilisateur du stylet: chaque utilisateur a une couleur désignée

Application Cosmos

Avec l'application Cosmos, toute la collaboration se trouve sur une seule plateforme. Pendant que toutes les idées se poursuivent, tout ce que les utilisateurs écrivent et esquissent au stylet est enregistré dans le cloud. Fini les bureaux encombrés et la prise de photos de tableaux blancs.

 

Après les réunions, les collaborateurs peuvent utiliser l'application Cosmos pour consulter la réunion, consulter la chronologie de la session et faire des commentaires.

CosmosAppMainPage.png
CosmosAppLogin.png
CosmosAppLanding01.png
CosmosAppLanding03.png
CosmosAppLanding02.png
UI: menu principal
UI: séquence de la page de destination
UI: Connexion

Éléments visuels

Les mots-clés qui ont inspiré les éléments visuels sont parallèles aux objectifs de conception du produit: Synergie, spontanéité, espièglerie.

 

L'inspiration principale étant la force créatrice de l'univers, la palette de couleurs est dérivée des teintes galactiques.

 

La typographie suit l'attitude ludique par des formes circulaires amicales.

Screen-Shot-2018-07-08-at-9.10.51-PM.png
wall-03.png
wall-02.png

détails du produit

Cosmos au travail

Cette courte vidéo montre comment Cosmos fonctionne dans un processus de brainstorming collaboratif.

IMG_3740.jpeg
IMG_3497.jpeg
IMG_3743.jpeg
Expérience utilisateur dans différents scénarios

Scénario utilisateur

La création de l'expérience utilisateur pour Cosmos a nécessité des itérations incessantes pour créer une plate-forme qui fonctionne de manière transparente sans interrompre le fragile processus de brainstorming.

Voir le parcours utilisateur ci-dessous pour plus de détails
cosmos1.png
hp-process-for-website8.jpg
process.jpg
cosmos+3.png
Asli Akdemir 2021 ©