Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GELLIFY Air: nuovo portfolio UX e UI

569 views

Published on

GELLIFY Air ha rinnovato il proprio portfolio di case history in ambito User Experience e User Interface Design. Ogni scheda/cliente contiene il brief dell'organizzazione, gli obiettivi e le modalità di realizzazione del progetto.

Published in: Business
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

GELLIFY Air: nuovo portfolio UX e UI

  1. 1. UX/UI PORTFOLIO
  2. 2. WEBSITE
  3. 3. Brief Gaia Italia è un brand italiano attento alla realizzazione di prodotti per l’acquariofilia di alta gamma, dalle vasche ai mobili realizzati su misura. Gaia Italia, attraverso i suoi prodotti, mira alla riscoperta del legame profondo tra l’uomo e la natura. Obiettivi Il sito di Gaia Italia racconta in 4 lingue, la filosofia dell’azienda e tutta la gamma di prodotti. Ogni prodotto ha una pagina dedicata, con una struttura grafica realizzata ad hoc, per valorizzare le singole caratteristiche e rispecchiare i valori del clienti, basati sulla personalizzazione come valore. I punti chiave per lo sviluppo del sito web sono stati: • Valorizzazione dell’azienda; • Alberatura semplice; • Rapidità di lettura; • Esperienza multi-device GAIA website gaia-italia.com2016 PORTFOLIO UX/UI
  4. 4. Valorizzazione dell’azienda e i suoi prodotti attraverso schede tecniche e fotografie, che celebrano anche l’atmosfera italiana che l’azienda vuole trasmettere. Il logo è una spirale ellittica, dove un’onda genera l’esistenza di un piccolo embrione, che si lega nuovamente all’acqua, creando un ciclo di genesi infinito. Così come accade in natura, lì dove l’acqua passa nasce la vita, un embrione, forma di vita che accomuna l’uomo a tutti gli altri animali esistenti. Poi ognuno prenderà la sua strada Features • Multilingua (EN, IT, DE, FR) • Pagine Aquascaping • Pagine prodotti (vasche, mobili,accessori) • Navigazione mobile • Visualizzazione fotografica responsive Alberatura semplice Il sito è stato concepito come un viaggio, alla scoperta delle ispirazioni italiane e della filosofia che hanno ispirato i prodotti. + + + + PORTFOLIO UX/UI
  5. 5. Brief Bioindustry park è il parco scientifico tecnologico situato a Colleretto Giacosa (TO). Obiettivi Creazione dell’identità visiva digitale per la comunicazione di Bioindustry Park, il più grande parco biotecnologico italiano. Posizionare Bioindustry Park come luogo ottimale dove far crescere le imprese del settore della salute. Revisione completa e set-up sito web di BiPCa in lingua italiana e in lingua inglese, sia dal punto di vista contenutistico sia del lay-out. BIOINDUSTRY PARK website 2016 bioindustrypark.eu PORTFOLIO UX/UI
  6. 6. Data visualization Le chart si basano sulla monocromia di azzurri, possono essere a più livelli e in più versioni a seconda del colore dello sfondo. + I colori I colori comunicano la sobrietà e la professionalità del luogo, attraverso le tonalità di azzurro. Le icone, selezionate ad hoc, valorizzano le diverse tematiche e comunicano attraverso le infografiche. + 257257257 Alberatura - sitemap gerarchica - custom post types - generazione archivi multilingua (partner, progetti, aziende) + Mappa, foto e video - realizzazione mappa vettoriale - realizzazione video Motion Graphic - realizzazione e cura del taglio fotografico + PORTFOLIO UX/UI
  7. 7. Brief website HALLDIS DISCOVER Creazione del blog Halldis Discover, un sito dedicato ai racconti di viaggio degli utenti, legati ai luoghi e alle offerte di soggiorno del brand Halldis. Aumentare le richieste di soggiorno delle strutture Halldis, attraverso un canale di storytelling organizzato per categorie di viaggio. Obiettivi 2014 discover.halldis.com PORTFOLIO UX/UI
  8. 8. Ricerca Il visitatore può filtrare i risultati di ricerca basandosi su quattro leve: numero di persone, temperatura desiderata, celebrità delle destinazioni, numero di persone. CTA La cura sartoriale dei contenuti fotografici nella pagine e negli articoli del sito aumentano l’interesse degli utenti. Ogni pagina viene linkata ad un’offerta Halldis. + + ATTIVITÀ DESTINAZIONI PERSONE CONOSCIUTE TEMPERATURA - Da scoprire Bebè a bordo MONTECAMPIONE -- - ++ ++ Montagna Di tutto AMANTI DELLA MONTAGNA PORTFOLIO UX/UI
  9. 9. Brief website EXACT EXact learning LCMS è un learning content management system, sviluppato in white label per creare, condividere e gestire i contenuti e-learning. Con eXact learning LCMS è possibile gestire l’intero processo di produzione di contenuti e-learning con un sistema autorale, project management, digital repository e delivery. All’interno di un progetto di ripensamento dell’offerta di business e del prodotto, è stato realizzato il sito di presentazione del prodotto. Obiettivi 2017 exactls.com PORTFOLIO UX/UI
  10. 10. Aspetti principali Presentazione delle numerose funzionalità della piattaforma grazie ad una navigazione dinamica. + Academy dinamica Academy con navigazione dinamica per topic all’interno di white paper, casi studio e webinar. + Responsive + PORTFOLIO UX/UI
  11. 11. website ANTHEA SYSTEM 2012 Brief Realizzare il sito web di Anthea System utilizzando un tono ludico per raccontare i servizi di smaltimento rifiuti e riqualificazione ambientale. Intrattenere ed illustrare al visitatore i servizi di Anthea. Obiettivi PORTFOLIO UX/UI
  12. 12. Illustrazioni interattive Le illustrazioni bidimensionali interagiscono al passaggio del mouse sui punti sensibili, mostrando il servizio a cui accedere. + Movimento L’illustrazione in continuo movimento coinvolge maggiormente l’utente e facilita la scoperta e la consultazione dei servizi. + BIOMASSE PORTFOLIO UX/UI
  13. 13. website BILANCIO SOCIALE CGIL LOMBARDIA 2011 Brief Creazione del catalogo online dedicato ai bilanci sociali di CGIL Lombardia. Permettere una consultazione rapida e semplice dei bilanci sociali online, mettendo a disposizione l’intero archivio storico dei bilanci di tutto il gruppo CGIL Lombardia. Obiettivi PORTFOLIO UX/UI
  14. 14. La homepage enfatizza la scelta delle ultime pubblicazioni online. Essendo l’archivio aggiornato più volte all’anno, il riconoscimento di copertine ed elementi grafici aiuta gli utenti nella ricerca del bilancio di proprio interesse. + Normal Hover PORTFOLIO UX/UI
  15. 15. Per ogni bilancio sociale è stata realizzata una versione interattiva e un’introduzione testuale. La cover del bilancio raccoglie tutte le pubblicazioni media effettuate, tra app smartphone, tablet e versioni PDF o stampa. + Le icone e gli elementi grafici sono personalizzati PORTFOLIO UX/UI
  16. 16. website ITALACADEMY Brief Restyling del sito di Italacademy, brand del Consorzio Italbiotec, che eroga corsi di Alta Formazione nei settori tecnico, scientifico e transversal skills. Veicolare la vision di Italacademy attraverso un impatto tecnologico della user interface e una catalogazione chiara dei contenuti, dei corsi e dei Docenti universitari. Ne risulta un nuovo posizionamento nel panorama lombardo della formazione complementare. Obiettivi 2018 italacademy.it PORTFOLIO UX/UI
  17. 17. Concept I corsi di Italacademy sono concepiti per essere complementari alla formazione universitaria e lavorativa. Sull’idea di complemento e accessorio si è basato il concept grafico: una serie di forme poligonali colorate, che ad ogni pagina si propongono all’utente, come metafora dei corsi complementari nel percorso professionale personale. + PORTFOLIO UX/UI
  18. 18. Workshop Attraverso una serie di workshop basati sul design-thinking, i contenuti nuovi e attuali del sito sono stati declinati in wireframe. + Colori Determinante del nuovo posizionamento è stata la scelta dei contrasti cromatici: il verde è il colore d’azione, mentre il viola cattura lo sguardo verso i concetti principali. + Lettering Font bastoni e lungilinei per esaltare l’ambito tecnologico, senza cedere la leggibilità dei testi. + Icone Un kit di icone personalizzate basate su forme squadrate e di colore viola. Le icone attirano l’attenzione dell’utente, riassumono un concetto ed esaltano le categorizzazioni. + PORTFOLIO UX/UI
  19. 19. platform FERROVIE NORD MILANO 2018 Brief Restyling del portale di FNM Group, leader lombardo della mobilità, ponendo un forte accento sull’apertura agli stakeholder, all’accessibilità dei contenuti e alla pubblicazione interattiva dell’archivio multimediale e dei bilanci di sostenibilità. Creare un forte senso di discontinuità con la comunicazione digitale del passato, aprendo ad un maggiore movimento ed enfasi dei contenuti: ogni sezione è concepita come un viaggio virtuale, di cui ogni pagina è una tappa fondamentale. Obiettivi fnmgroup.it PORTFOLIO UX/UI
  20. 20. Breadcrumb Nell’header viene segnalato il nome della sezione in cui l’utente si trova, mentre il breadcrumb anticipa i contenuti. + Accessibilità L’intero portale è ottimizzato per essere navigato da ipovedenti e non vedenti, garantendo una navigazione tramite keyboard. + Menu nascosto La sitemap è raccolta in un hamburger button e nessuna voce principale viene esplosa nell’header. In questo modo l’utente si concentra maggiormente sulla lettura dei contenuti e tramite uno scorrimento può raggiungere la navigazione consigliata e le call to action di pagina. + Navigazione secondaria Una navigazione a tappe incuriosisce l’utente e lo trasporta verso la scoperta dei contenuti. Per un senso di completezza, l’utente che atterra in una pagina, sarà portato a visitarle tutte, per compiere il percorso. + Pattern Ogni pagina presenta un titolo nella stessa posizione e stile. Un pattern su cui si basa l’utente durante la navigazione. + Sfondo e movimento Immagini e contenuti iconografici sono utilizzati come sfondo e richiamano l’attenzione attraverso semplici movimenti. + Focus Alcuni concetti sono enfatizzati da un utilizzo sproporzionato del carattere tipografico, garantendo la chiarezza della comunicazione. + PORTFOLIO UX/UI
  21. 21. Navigazione da footer L’intero portale ribalta le comuni regole della navigazione, portando nel footer le principali azioni: ad ogni pié di pagina vengono consigliate una tappa precedente e successiva del percorso, tre link principali e una descrizione delle principali sezioni, che dona all’utente un motivo per il quale percorrere un viaggio digitale. + Sitemap a comparsa In ogni momento l’utente può utilizzare l’hamburger button per esplodere la sitemap del portale e raggiungere ogni pagina. + PORTFOLIO UX/UI
  22. 22. Multimedia Gallerie fotografiche, grafici interattivi, icone in movimento e contenuti navigabili da tastiera rendono la navigazione del portale una piacevole scoperta, sia da desktop, che da mobile, esprimendo a pieno il payoff del cliente: idee in movimento. + PORTFOLIO UX/UI
  23. 23. website FONDAZIONE CARIVERONA Brief Fondazione Cariverona ha maturato l’esigenza di evolvere la propria web experience, per renderla più attuale, completa e soddisfacente e per avvicinarsi ai propri stakeholder in modo tale che questi siano invogliati a ricercare le informazioni utili all’interno del sito. Obiettivi Il progetto di re-design dell’architettura dell’informazione, della UI e della UX è stato caratterizzato da una fase iniziale di ascolto, che ha visto partecipi prima gli interlocutori interni della Fondazione, attraverso interviste semi-strutturate e poi gli stakeholder esterni, con l’invio di una survey dedicata. L’obiettivo generale di questa fase iniziale è stato quello di evidenziare gli obiettivi comunicativi e di interazione con gli stakeholder a cui il nuovo sito doveva rispondere, approfondendo le questioni più rilevanti. 2017 fondazionecariverona.org PORTFOLIO UX/UI
  24. 24. I colori Colori primari del sito + Colori secondari del sito Hover button L’hover dei pulsanti al passaggio del mouse, dal colore pieno all’outline. + Responsive Un sito web adatto a qualsiasi dispositivo + Le pagine interne Il sito web è stato sviluppato basandosi sul Content Management System (CMS) Wordpress ed ottimizzato per la visualizzazione da smartphone e tablet (mobile responsive). Le pagine create sono state ottimizzate per la ricerca sui motori di ricerca rispetto agli aspetti di interesse. + PORTFOLIO UX/UI
  25. 25. website RSE SMARTGRID 2012 Brief Creazione del sito dedicato al workshop internazionale sulle Smart Grid R&D. Permettere all’utente si scoprire l’agenda delle tre giornate e registrarsi all’evento. Obiettivi PORTFOLIO UX/UI
  26. 26. Homepage Uno slider fotografico in 32:9 accoglie e introduce l’utente alle tematiche dell’evento internazionale. WIREFRAME USER INTERFACE + Sidebar In ogni pagina del sito è disponibile una sidebar che facilita l’utente intento a registrarsi per il workshop. + PORTFOLIO UX/UI
  27. 27. website Brief Fondazione Mediolanum Onlus è attiva a sostegno dell’infanzia disagiata attraverso il finanziamento di progetti di solidarietà e sviluppo in Italia e nel Mondo. Obiettivi Il nostro obiettivo è stato quello di dotare la Fondazione degli strumenti digitali funzionali al conseguimento della sua mission anche online. Il progetto web include un ampio spazio per contenuti istituzionali legati alla Fondazione, il racconto delle attività realizzate e del risultati raggiunti e una serie di pagine interattive collegate ai progetti finanziati. FONDAZIONE MEDIOLANUM 2013 fondazionemediolanum.it PORTFOLIO UX/UI
  28. 28. VOTA VOTA VOTA Normal Hove rActive I progettiInfografiche I contenuti del sito vengono enfatizzati e resi interattivi, grazie ad una serie di infografiche, per rappresentare gli obiettivi raggiunti e I valori da condividere. Elementi grafici Filtri e schede progetto sono rappresentati graficamente da una serie di icone personalizzate ed elementi grafici, studiati per ottimizzare le anteprime sui canali social. + + PORTFOLIO UX/UI
  29. 29. X2 Le iniziative Il catalogo di iniziative di raccolta fondi di Mediolanum è accessibile dal menu principale. Ogni iniziativa presenta una scheda personalizzata con un’infografica interattiva, che racconta all’utente i fondi raccolti sino a quel momento. L’infografica sottostante racconta i fondi raccolti da Fondazione Mediolanum attraverso le cene solidali, organizzate ad ogni arrivo di tappa del Giro d’Italia. Nelle iniziative di Fondazione Mediolanum, per ogni euro raccolto, la fondazione si impegna ad aggiungerne un altro, raddoppiando i fondi raccolti. L’archivio interattivo Il Giro d’Italia + + PORTFOLIO UX/UI
  30. 30. platform INCAMING 2017 incaming.it Brief Creazione del portale di INCA CGIL Lombardia, su cui l’utente possa documentarsi sui servizi, sulla collocazione delle sedi e possa prenotare un appuntamento al patronato di CGIL. Permettere all’utente la prenotazione online dei servizi INCA offerti agli sportelli pubblici, permettere inoltre all’utente di scaricare i documenti necessari e il foglio di prenotazione dell’orario e la sede da lui preferita. Obiettivi PORTFOLIO UX/UI
  31. 31. FAMIGLIA DISOCCU PAZIONE PENSIONE SALUTE MIGRANTI Navigazione e prenotazione La navigazione del sito è articolata attraverso due flussi di navigazione principali, per rispondere al duplice scopo dell’utente, conoscere i servizi a disposizione e prenotarli. + User Experience Navigazione per servizio Navigazione per sede PORTFOLIO UX/UI
  32. 32. Sedi L’organizzazione grafica in sezioni, permette all’utente di documentarsi sulle sedi, sugli orari e sui servizi offerti dalla singola sede. Servizi Una serie di note accompagna la navigazione verticale dell’utente per attirare l’attenzione sui possibili disagi o segnalazioni importanti. Prenotazione La prenotazione online tramite form è semplice e offre all’utente tre possibilità di appuntamento. S E L E Z I O N E S E D E S E L E Z I O N E S E R V I Z I O S E L E Z I O N E G I O R N O E O R A R I O Sistema di prenotazione online D a l s e r v i z i o a l l a p r e n o t a z i o n e i n 3 c l i c k L U N E D I 1 0 . 3 0 M A R T E D I 1 2 . 3 0 M A R T E D I 1 6 . 3 0 PORTFOLIO UX/UI
  33. 33. Brief Un progetto di turismo collaborativo che supporta e integra il concetto di ospitalità classica attraverso forme non tradizionali, destinato a proseguire anche dopo Expo 2015, diventando patrimonio stabile di Milano e dei milanesi. Obiettivi Identità visiva e sito web di Piacere Milano, un progetto di ospitalità realizzato in collaborazione con Altavia e il Comune di Milano, durante il periodo di Expo. Il sito dialoga tramite API con la webapp realizzata da un team esterno di sviluppatori. PIACERE, MILANO website 2015 piaceremilano.it PORTFOLIO UX/UI
  34. 34. Scopri insieme ai milanesi una città ospitale condivisa, inattesa... Dialogo API webapp-sito web - ricerca host sulla piattaforma web - accesso unico dalla piattaforma web - richiesta di prenotazione con form Blog eventi - articoli geolocalizzati - grafica responsive - articoli multiautore Come funziona il servizio? UI Identity Creazione stile personalizzato “New liberty”, che unisce il tipico stile Liberty milanese alla corrente del flat design + + + PORTFOLIO UX/UI
  35. 35. platform INTESA SAN PAOLO TOOLKITS 2016 Brief Innovation Center è un ufficio interno di Intesa Sanpaolo che si occupa di supportare i team interni attraverso gli strumenti del service design. Realizzazione di un portale per i dipendenti dedicato alle metodologie utilizzate dal LAB dell’Innovation Center. All’interno del portale è possibile scaricare gli strumenti tipici del service design, per progetti e workshop; visionare i casi studio realizzati in azienda in collaborazione con il LAB.design, per progetti e workshop; visionare i casi studio realizzati in azienda in collaborazione con il LAB. Obiettivi PORTFOLIO UX/UI
  36. 36. Navigazione illustrata Dopo aver selezionato una raccolta di tools tipici del service design, questi sono stati associati per: - Fase del progetto (esplorativa, ideativa, progettuale, esecutiva) - Ambito progettuale (servizio, prodotto, spazio) - Bisogno (riprendendo quelli presenti in home page) Ogni utente, selezionando uno o più dei parametri, può individuare i tools più adatti alle sue esigenze progettuali. I parametri sono presentati sotto forma di filtri, consentendo una navigazione dinamica dell’archivio. + TITOLO TOOLS CORRELATI CASI STUDIO CORRELATIAPPROFONDIMENTO METODOLOGICO SUL TOOLS LABL OG INMETODOLOGIAT OOLSC ASE STUDIES IMMAGINE TOOL “NEEDS” NAVBAR LABL OG INMETODOLOGIAT OOLSC ASE STUDIES SLIDER DI PRESENTAZIONE PROGETTO LOGO BISOGNO 1 BISOGNO 2 BISOGNO 3 BISOGNO 4 BISOGNO 5 BISOGNO 6 BISOGNO 7 TITOLO FILTRINEEDS NAVBAR LABL OG INMETODOLOGIAT OOLSC ASE STUDIES IMMAGINE LOGO TOOLS Home page L’esigenza primaria della piattaforma è quella permettere ai proprio utenti di individuare gli strumenti più adatti alle proprie necessità progettuali. L’elemento che contraddistingue la navigazione è la “Needs” Navbar, un elenco di bisogni progettuali disponibili fin dall’home page che permette di accedere ad una selezione pre-filtrata degli strumenti. + Archivio dei tool Una pagina dedicata a tutti i tools a disposizione, selezionabili tramite filtri, per individuare quelli più adatti al proprio progetto. La pagina dei tool Ogni tool può essere approfondito nella pagina dedicata, dove è possibile salvare il tool, scaricarne una copia cartacea, conoscere i casi studio aziendali dove è stato utilizzato, approfondirne la conoscenza con spiegazioni aggiuntive. + + Filtri PORTFOLIO UX/UI
  37. 37. website Brief “Ideale - la tua idea per Legnano” è il Bilancio Partecipativo del Comune di Legnano che ha come scopo il coinvolgimento dei cittadini residenti a Legnano. Obiettivi Un aspetto di enorme valore della partecipazione civica è il coinvolgimento attivo dei cittadini e delle loro compentenze, oltre che nella generazione di idee, nella definizione dei progetti. Il metodo di base utilizzato per il progetto di Ideale nella sua prima edizione è basato sulle fasi di explore, design e make. LEGNANO IDEALE 2015 legnanoideale.it PORTFOLIO UX/UI
  38. 38. Edizione 2016 Seconda edizione IdeaLe 2016: 133 idee presentate, 846 voti espressi. + Edizione 2015 edizione IdeaLe + Civic Hackathon 2015: oltre 150 idee e oltre 1300 cittadini recatisi ai seggi per il voto. I significativi risultati conseguiti nella prima edizione hanno legittimato l’attivazione di una seconda edizione da parte dell’Amministrazione Comunale. + La challence di Ideale Lo strumento utilizzato è la piattaforma di innovazione collaborativa PLUS, in grado di coniugare Open Innovation e Design Thinking. Attraverso PLUS è possibile lanciare challenge rivolte a community di innovatori, generare idee e prototiparle, abilitando quindi il dialogo tra organizzazioni e community. Una volta lanciata la challenge di Ideale, i cittadini hanno potuto registrarsi su PLUS e caricare le proprie proposte per Legnano. + PORTFOLIO UX/UI
  39. 39. platform CAAF LOMBARDIA 2012 assistenzafiscale.info Brief Creazione del portale di CAAF CGIL Lombardia, su cui gli utenti possono documentarsi sullo scadenziario tasse e sui propri diritti fiscali. Facilitare la consultazione e la lettura dei servizi, nonché permettere all’utente di scaricare i documenti necessari per presentare domande e pratiche. Obiettivi PORTFOLIO UX/UI
  40. 40. Servizi Il layout di pagina è caratterizzato da un header personalizzabile, un’area di contenuto testuale e una sidebar con gli avvisi utili sul singolo servizio. Una serie di accordion raccoglie le informazioni utili dedicate a dei target specifici. + Call to action Precedendo e antecedente i contenuti, un’area dedicata alle call to action, facilita l’utente nella fase di prenotazione online del servizio e di download dei documenti necessari per presentarsi all’appuntamento. + PORTFOLIO UX/UI
  41. 41. Brief Il Festival RisorsAnziani è un’iniziativa giunta alla sua terza edizione organizzata da SPI CGIL Lombardia. La prima edizione si è tenuto a Lecco nel 2015, la seconda a Como e la terza e ultima Mantova dal 10 al 12 maggio 2017. Negoziazione sociale e qualità della vita sono i temi attorno ai quali hanno ruotato le iniziative. Obiettivi Obiettivo dell’iniziativa è stato l’affermare la centralità degli anziani e la solidarietà intergenerazionale come strumento di coesione sociale, creando momenti di scambio tra l’esperienza dei meno giovani e i progetti dei più giovani che diventino poi origine di sinergie e progetti che vedono generazioni diverse. website RISORSANZIANI 2017 risorsanziani.it PORTFOLIO UX/UI
  42. 42. Novità 2017 Il logo dell’edizione 2016 e 2017 I personaggi Sono stati disegnati dei personaggi ad hoc per l’evento rappresentati nella pagina web e in tutti i materiali grafici creati. + Le infografiche Per RisorsAnziani 2017 di Mantova sono state realizzate delle infografiche a supporto dell’iniziativa, inviate via e-mail agli iscritti SPI CGIL Lombardia e riportate nella sezione web “Novità 2017”. Il tema dell’ultima edizione è stato “l’Invecchiamento attivo” + PORTFOLIO UX/UI
  43. 43. + SOFTWARE
  44. 44. 45 90 135 180 225 270 315 45315 TURBO Brief Progettazione della user experience e user interface della piattaforma TurboADV, trading desk italiano di programmatic advertising. Obiettivi Per TurboADV è stata programmata una consulenza approfondita, la realizzazione della UI e art direction della comunicazione digitale dei software di TurboADV, Presentazione e racconto della suite attraverso un sito vetrina sintetico e attento alla presentazione dei prodotti. dashboard 2017 turboadv.com PORTFOLIO UX/UI
  45. 45. 45 13 180 225 270 315 Le GIF e le icone in movimento Le GIF animate non necessitano spostamenti sulle assi X-Y. Sono contenute in una maschera di ritaglio circolare. CREATE CLUSTER CONSIDER 18-30 36-40 46-50 1.500.000 Rate known 89%AGEUserUser Gender Age Relationship Children Education EventsEvents Measures Browsers Location O.S. Coca-Cola Cluster optionsCluster options Coca-Cola for dinner CriteriaCriteria +Drag here another label Coca-Cola for dinnerCoca-Cola for dinner 89%1.500.000 Age 1.200.000 56% CONNECT +/- Add “AND”Condition 56% 1.200.000 + Software UI Documentazione tecnica UI, sull’utilizzo e sul senso delle forme e dei colori nei servizi di Tur- boADV. I colori, la dimensione e la posizione degli elementi guidano l’utente alla selezione di funzioni primarie, secondarie e opzionali, valorizzando la user experience e le scelte imprendi- toriali di vendita di prodotto. 3 K 5 K 7 K 10 K Users Events 500 1-10 11-100 101-1000 1 K 2 K Active campaignsActive campaigns User Consumption Range Registered events by Advertiser New Users by Provider Top traffic Top domains Advertiser OVERVIEW Website New users Users Events 3.250lastampa.it 345 K 6.300autoscuola.it 120 K 2.400repubblica.it 900 K 3.560sole24ore.it 1.3 M 1.300libero.it 160 K 6 M 12 M 9 M 30 M 18 M | Last 30 days MOST ACTIVE Coca-Cola MAN LOVING FO... IMPRESSION COUNT CLICKS CTR SEGMENT REACH CONVERSION 1 M 2.345 18% 20% 12 % WEDNESDAY 4 PM MilanMilan Samsung Heineken Coca-Cola Pepsi FCA 1 M 2,2 M 146 K 122 K 500 K 23 K Total 3 M 175 K 536 K 9,5 K 79 K 130 K 12 K Total 932 K Milan Samsung Heineken Coca-Cola Pepsi FCA I grafici + I colori + + PORTFOLIO UX/UI
  46. 46. ANTEO Brief Anteo è una cooperativa sociale di servizi alla persona che ha sede a Biella in Piemonte, ed opera in campo socio sanitario, sociale ed educativo. Obiettivi Il progetto Anteo nasce con l’intento di creare una dashboard di controllo, ad uso interno, per analizzare e comparare l’andamento delle strutture di Anteo presenti nel territorio italiano. dashboard 2013 PORTFOLIO UX/UI
  47. 47. Mag GiuL ugpr 297.243 5.466.116 830.619 47.534 Data analysis - strumento utile di navigazione, comparazione e analisi di dati - alberatura a livelli, relativa al percorso effettuato Data visualization - realizzazione UI software di analisi - personalizzazione charts UI Dashboard - valorizzazione dell’immagine coordinata - uso dei colori per facilitare la navigazione e i focus + + PORTFOLIO UX/UI
  48. 48. Brief lo SPI Lombardia, con lo Sportello Sociale si propone come punto di contatto sul territorio e sportello informativo per pratiche quali l’assistenza agli anziani, mediatore per bonus e incentivi, e tutto ciò che concerne l’accesso ai servizi da parte dei cittadini anziani. Nel 2016 é stata rinnovata la piattaforma dedicata agli operatori di sportello, per migliorare la qualità del loro lavoro, creando un servizio centralizzato di mappatura dei richiedenti informazione e delle necessità emergenti sul territorio. Obiettivi Gli operatori, spesso volontari, con un’età tra 50 e i 78 anni; questo costituisce una sfida avvincente dal punto di vista progettuale poichè è stato necessario progettare un software con funzionalità complesse, accessibile a persone con una formazione digitale minima. platform Analizzare le problema5che SPORTELLO SOCIALE SPI 2015 spicgillombardia.it PORTFOLIO UX/UI
  49. 49. Come funziona la piattaforma La piattaforma è costituita da quattro aree principali: • Registrazione dell’utente e delle problematiche per cui ha richiesto informazioni allo sportello, con successivo monitoraggio dell’utente nel tempo (tramite ricontatto dell’utente con scadenza periodica); • Gestione di link, news, circolari e documenti utili per gli opeatori di sportello; • Monitoraggio del territorio, grazie ad un’area di reportistica che raccoglie e analizza tutte le problematiche registrate, gli utenti e i rapporti con gli uffici di competenza per la risoluzione di problemi (es. comuni, asl..); • Invio di mail ed sms agli iscritti, segmentati per problematiche, isee, anagrafiche. Possibilità di conta&are l’utente dalla dashboard Anagrafica form registrazione consumatore che va allo sportello. Tutte le parti importanti in alto, secondarie in basso. Integrazione con lettore di smart card. Editore Ha visione del proprio comprensorio. Può aggiungere utenti, news, documenti e link Amministratore Ha visione di tutti i comprensori. Può editare tutti contenuti Contattare l’utente possibilità di contattare l’utente dalla dashboard + I ruoli della piattaforma A oggi lo SPI CGIL ha attivato quasi 80 sportelli che vengono garantiti da circa 130 operatori volontari appositamente formati dallo SPI regionale. + Amministrazione MASSIMILIANO LUCA PUGLIESISportello Sociale ProblematicheSeleziona la tipologia di informazioni da visualizzare Bergamo Tutte le leghe Mese corrente PeriodoVisualizza dati per Problematiche: 260/1700 tot. Lombardia Esito per lega Esito 110 Positivo 120 Neutro 30 Negativo Esito per problematica 110 Positivo 120 Neutro 30 Negativo Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Lega 1 Positivo Neutro Negativo Tipologia prevalente Tipologia TipologiaTipologia Tipologia TipologiaTipologia TipologiaTipologia Tipologia Tipologia Tipologia Tipologia Tipologia Tipologia Tipologia Tipologia 30% 10%60% 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 GESTISCI UTENZE Problematiche Comprensorio/Lega Comprensorio Lombardia Tipologia Tipologia Tipologia Tipologia Tipologia Inserimento dei campi mancan5 + Operatore Ha visione della propria lega. Può aggiungere gli utenti PORTFOLIO UX/UI
  50. 50. Brief iniziale con il cliente 1.BRIEF + Mappatura del sito esistente Blocchi di contenuti da mantenere e funzionalità 2.ANALISI User journey dell’operatore dello sportello sociale. Mappatura dei suoi bisogni. Disegno dei wireframe di una sezione della piattaforma. 4.WIREFRAME + + + + + + + Presentazione dei wireframe al cliente. Revisione e approvazione. 5.WORKSHOP Sviluppo della piattaforma. 6.SVILUPPO User test della piattaforma e formazione agli sportellisti 6. FORMAZIONE SUL CAMPO E TEST piattaforma “SPI CGIL Lombardia Sportello sociale” 5. SPORTELLO SOCIALE Step by step guideline Sportello sociale 3.USER JOURNEY +PORTFOLIO UX/UI
  51. 51. software ZEROSTORIES 2016 Brief Zerostories realizza contenuti di marca innovativi, destinati a una distribuzione multimediale. È necessario creare un catalogo categorizzato per genere televisivo e target. Permettere all’utente di fruire il catalogo delle serie televisive, nonché ricercare con semplicità, accedere e visualizzare i dati sulle serie di propria preferenza. Obiettivi PORTFOLIO UX/UI
  52. 52. Le copertine delle serie vengono presentate come elemento di navigazione principale. Il catalogo è diviso in categorie, filtrabili dall’utente. Il campo di ricerca e i filtri sul pubblico permettono di incrociare i dati presenti delle serie televisive e offrire all’utente dei risultati di proprio interesse. + PORTFOLIO UX/UI
  53. 53. La scelta tipografica esalta i risultati presentati in tabella e i titoli di prodotto. Essendo il passaggio tra l’area Admin e l’area Production un’azione frequente, è stata preferita una navigazione laterale, sempre presente in pagina. + Tutte le indicazioni sulla User Interface vengono riassunte in un documento PDF, sempre a disposizione del team di sviluppo. + PORTFOLIO UX/UI
  54. 54. platform NIENTE TV 2017 niente.tv Brief Creazione del portale di Niente TV, produttore online di serie televisive e contenuti comici. Mostrare il catalogo e le ultime serie pubblicate, attraverso una UI vicina al mondo cinematografico. Obiettivi PORTFOLIO UX/UI
  55. 55. Pagina dedicata alla serie Creare una pagina di archivio dedicata ad una serie televisiva. L’intestazione si colora automaticamente, a seconda del colore di sfondo della foto caricata. Homepage modulare A seconda del numero di serie pubblicate, il layout della homepage può essere riadattato. I moduli posso essere catalogati in sotto-insiemi e dare risalto alle serie più in voga. Slider Le tre serie in evidenza sono raccolte in uno slider, che accoglie il visitatore in homepage. + + + PORTFOLIO UX/UI
  56. 56. software TURBOADV SELF SERVICE 2016 Brief Creare una versione brandizzata del software TurboADV Self Service offerto in White Label. Creare una skin da applicare alle installazioni di TurboADV Self Service dedicate ad un singolo cliente. Obiettivi PORTFOLIO UX/UI
  57. 57. Navigazione La navigazione del software avviene su due livelli, mentre l’interfaccia grafica distingue attraverso i colori gli elementi di decoro dagli elementi di navigazione, cliccabili. Guida UI Al personale di sviluppo viene offerta una guida tecnica sugli elementi della UI, per evitare discostamenti tra il design e il prodotto finale. + + PORTFOLIO UX/UI
  58. 58. Dashboard Una dashboard modulare accoglie l’utente, segnalando l’andamento sintetico delle proprie campagne pubblicitarie. + PORTFOLIO UX/UI
  59. 59. APP
  60. 60. Brief LEOOH si inserisce nel panorama delle ricerche di mercato qualitative, affiancando gli attuali strumenti esistenti. Ne completa e ne rafforza il valore aggiunto, offrendo ancora più spunti e insight. Nel contesto fuori casa contano le esperienze “qui ed ora”, i micro-momenti. Obiettivi LEOOH permette di analizzare e contestualizzare le emozioni legate alla user experience autentica nel contesto fuori casa. Con LEOOH è possibile portare l’analisi del consumatore nella sua vita quotidiana, con l’utilizzo di una applicazione mobile attraverso cui vengono somministrati test e domande nel momento in cui il consumatore si confronta con brand o con il servizio. LEOOH website+app 2015 leooh.it PORTFOLIO UX/UI
  61. 61. La home dell’app è progettata per micromoduli di esperienza attraverso delle schede. L’utente fotografa e aggiunge emozioni, testi e registrazioni audio, per raccontare come si sente, che emozioni l’esperienza ha suscitato, cosa gli piace e cosa non gli piace. Landing Page Tutte le interazioni della app sono state progettate per avere un’esperienza inituitiva e breve da parte dell’utente. PORTFOLIO UX/UI A supporto del processo di vendita è stata progettata una landing page che descrive le funzionalità dell’app.
  62. 62. app COOPSAPEVOLE 2012 Brief Ideazione e realizzazione di un’app con la quale i clienti Coop Lombardia possono scoprire l’impatto ambientale della propria spesa. Rendere consapevoli gli utenti dell’impatto ambientale che la produzione di alcuni alimenti può comportare. Obiettivi PORTFOLIO UX/UI
  63. 63. Navigazione illustrata L’utente naviga all’interno di un supermercato illustrato, scoprendo l’intero catalogo prodotti e consultando, in maniera ludica, l’impatto ambientale che ha ogni prodotto. + PORTFOLIO UX/UI
  64. 64. Consultazione Attraverso una bilancia, l’utente può ottenere una quotazione dell’impatto ambientale, relativa al quantitativo acquistato del singolo alimento. Comparazione È possibile comparare due prodotti per scoprire quali dei due ha un impatto minore sull’ambiente, così come avere un riepilogo mensile sul proprio impatto. + + PORTFOLIO UX/UI
  65. 65. E-COMMERCE
  66. 66. Brief Cyrcus un progetto dello Studio Santachiara, a cui si è unito Coppa+Landini, nato per essere una piattaforma di e-commerce che produce in digital fabrication professionale e propone la vendita diretta di prodotti in collaborazione con le grandi firme del design. Obiettivi Cyrcus crede e promuove la digital fabrication come strumento abilitante di innovazione, affiancandolo alla cultura di progetto sia internamente che attraverso i designer della piattaforma. Il meglio del design d’autore a portata di click. Ogni prodotto è realizzato in esclusiva per Cyrcus, personalizzabile secondo le richieste dell’utente del design. L’obiettivo non è solo quello di un semplice e-commerce di design ma è di trasmettere ai visitatori i valori di digitalizzazione del design. e-commerce CYRCUS 2015 cyrcus.it PORTFOLIO UX/UI
  67. 67. + Le collezioni e la personalizzazione Il sito Cyrcus.it è diviso in collezioni in cui sono contenuti i pezzi di design in digital fabrication. Ogni prodotto è associato a una pagina autore con biografia e tutti i prodotti a lui legati. Ogni prodotto inoltre è possibile comprarlo in diverse dimensioni, materiali e finiture. + Le icone Ogni prodotto è caratterizzato da un’icona che indica con che tecnologia è stato realizzato tra stampa 3D, taglio laser e CNC. + Responsive Cyrcus.it si adatta su ogni dispositivo: mobile, tablet, pc per permettere all’utente di sfogliare e acquistare con un semplice click i prodotti di design. Anelli : FELIX by Anna Gili; Porta matite: BABEL, Penholder by Gian Luca Silvestrini, Fabrizio Guarrasi, Mattia Antonetti, Maxe van Heeswijk PORTFOLIO UX/UI
  68. 68. BENERKAAN Brief Benerkaan è un’azienda che realizza jeans classici e attraenti per le nuove generazioni. La combinazione di bellezza e comfort è essenziale quando nei prodotti di Benerkaan. Obiettivi Un sito e-commerca dallo stile minimale e attuale con foto e testi ridotti all’essenziale. Le proposte cromatiche dell’e-commerce sono con colori caldi (come ecrù e grigio industrial), texture ed atmosfere rilassanti. e-commerce 2017 benerkaan.it PORTFOLIO UX/UI
  69. 69. Brief Pamaco è un brand di cioccolato svizzero artigianale che ha il suo canale di vendita online e in diversi punti vendita sparsi nel territorio svizzero. Obiettivi Creare un canale di vendita online dei diversi prodotti di Pamaco, divisi per categorie. Non solo un e-commerce, ma uno spazio che racconti i prodotti e la storia del brand. Un sito web di facile lettura e adatto a ogni tipo di dispositivo. e-commerce PAMACO 2017 PORTFOLIO UX/UI
  70. 70. I prodotti Le foto dei prodotti sono ambientati e contestualizzati per dare un’immagine accattivante alle pagine dell’e-commerce. Sono tutti divisi per categorie. + PORTFOLIO UX/UI
  71. 71. LANDING PAGE
  72. 72. Brief ABIFormazione studia e realizza soluzioni formative efficaci e innovative per rispondere ai bisogni delle mille anime del mondo del credito e della finanza. Obiettivi Per ABIFormazione sono state realizzate tre Landing page a supporto delle iniziative ed eventi di formazione da loro organizzati. Le Landing page sono state realizzate con CMS wordpress creando un tema custom su misura per l’azienda. Tutte le informazioni sono contenute in un’unica pagina. landingpage ABIFORMAZIONE 2017 abiformazione.it PORTFOLIO UX/UI
  73. 73. landingpage CLUBHOUSE BRERA 2011 Brief Creazione di una landing page per il lancio di ClubHouse Brera, membership club esclusivo di Milano. Illustrare il luogo e i servizi offerti da ClubHouse Brera, nonché permettere ai visitatori di prenotare una giornata gratuita di prova all’interno del club. Obiettivi PORTFOLIO UX/UI
  74. 74. Storytelling L’alternanza tra contenuti testuali e fotografici esalta lo storytelling dedicato al club. CTA Ogni sezione fotografica accoglie una call to action, per guidare l’utente verso la prenotazione di una giornata di prova. + + PORTFOLIO UX/UI

×