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.

Portfolio ux ui_gellify

83 views

Published on

GELLIFY Interactive - UX UI Portfolio

Published in: Internet
  • you can get a very responsive portfolio for dirt cheap using fiverr platform shorturl.at/lpGPZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Portfolio ux ui_gellify

  1. 1. UX/UI PORTFOLIO
  2. 2. EXPLORE DESIGN MAKE Ogni fase di realizzazione segue un processo ben definito e validato nel tempo IL NOSTRO METODO Ogni progetto inizia con una ricerca esplorativa, per analizzare i pain e i need e identificare e classificare i problemi o i limiti progettuali. La ricerca segue tre aspetti principali: Organizzazione (definizione degli asset, del business model, del brand, delle persone e dell’ambito culturale); Contesto (definizione dei valori, dei trend, dei benchmark); Utenti. In questa fase definiamo le soluzioni e i concetti, attraverso la realizzazione di prototipi, da testare e validare. Seguendo i principi del design thinking, il nostro approccio è human-centred: mettiamo al centro le persone, i loro bisogni e le loro percezioni al centro del processo. Adottiamo un approccio design-centric quando le tempistiche di progetto sono ristrette e coinvolgiamo team e utenti in qorkwhop di co-design. Nella fase del make realizziamo gli output finali, che portano alla luce e rispecchiano nel dettaglio le idee e le soluzioni proposte. Seguiamo ogni parte di implementazione e sviluppo del progetto, creando output di ottima qualità e guidelines utili ai collaboratori di progetto.
  3. 3. DELIVERY OUTPUTS EXPLORE DESIGN MAKE + + +User research (Interviste, focus group, mistery) Product vision MVP Definition Personas (Profili utente, goal e motivazioni) + + +Benchmarking Value proposition Product ownership Inspiration (Booklet/moodboard) + + +Trend research Service map UX Guidelines (Navigation patterns, Micro UX, User tests/ analytics, First use experience) User journeys + + +AS IS picture (Analisi dello stato dell’arte) UX concept (Architettura dell’informazione, wireframes, flow chart, User stories) UI Guidelines (CSS, HTML, JS, Librerie di riferimento) Features map / Gap Analisys + UI concepts (Design system, mockup)+ UX/UI evaluation (Valutazione) UX/UI Analysis Blueprints UI patterns Mockups Temporary product ownership (UX Governance) Canvas UX guidelines Sitemap User tests / Analytics Format validati nel tempo e personalizzabili Competitors map MVP Definition CSS / HTML UI / Data visualization library Micro UX guidelines 600ms 1st Goal 20 Clicks </> + UX Governance
  4. 4. NELLO SPECIFICO USER EXPERIENCE USER INTERFACE Dopo una fase di studio dei comportamenti degli utenti, definiamo gli user goals e i modelli di interazione applicabili, a seconda del settore, dell’ambito e del contesto. Il metodo che seguiamo include interviste, ricerche e benchmarking. La nostra concezione di user interface design integra gli aspetti di estetica, ai principi di usabilità, alle conoscenze tecnologiche, per progettare software che lascino il segno.
  5. 5. + SOFTWARE E WEB APPLICATION
  6. 6. UNDISCLOSED GLOBAL SOFTWARE VENDOR webapplication 2019 Brief Creazione della versione browser di un software leader di mercato, dedicato alla gestione di studi professionali. Obiettivi Realizzare un percorso di consulenza e re-design, in collaborazione con i team business, di sviluppo e design interni alla società, per realizzare la nuova versione browser, applicando la metodologia Agile alla roadmap di sviluppo. PORTFOLIO UX/UI
  7. 7. L a n o s t r a m e t o d o l o g i a Ricerca del contesto e dei nuovi trends Ricerca esplorativa per ispirare la strategia da attuare e la tipologia di prodotto da realizzare su browser. I trend presentano una serie di casi, valutati secondo una scala e dei valori predefiniti. + EXPLORE 1 Cloud Mobile Chatbot Smart working Cyber security Performance tracking Machine learning Subscription business model Case 1 Virtual firm Tech driven cases Strategic keywords Case study overview SCREENSHOT BENCHMARK USABILITY LOOK & FEEL INTEGRATIONSMULTI-DEVICE SPECIFIC FEATURES Ricerca esplorativa PORTFOLIO UX/UI
  8. 8. L a n o s t r a m e t o d o l o g i a EXPLORE 1 Creazione degli user scenarios Definizione degli user insights+ Ricerca esplorativa 20 5 5 I n t e r v i s t e P a e s i P e r s o n a s d e f i n i t e + ACTIVITIES NOTES PERSONAS 1 Definizione dei comportamenti e delle azioni quotidiane degli utenti, al di fuori dell’utilizzo del software Creazione delle Personas e analisi peculiare dell’utilizzo delle aree del software PORTFOLIO UX/UI
  9. 9. L a n o s t r a m e t o d o l o g i a Wireframe Definizione degli elementi e del layout in base allo scopo di pagina +Definizione UX Panels Tutte le interfacce, costruite su una griglia di 12 colonne, sono state pensate per raccogliere al loro interno contenitori flessibili o fissi in cui vengono presentati i contenuti di pagina, di dettaglio, di overview, oppure di navigazione gerarchica interna alla pagina. + DESIGN 2 UX in motion Definizione delle animazioni e del tempo di comparsa per focalizzare, educare o intrattenere l’utente in base allo scopo di pagina 100ms 400ms 600ms Scopo WOW effect Scopo Focus Scopo Educate + Scopo Presentare una serie Scopo Visualizzare dettagli Scopo Navigare rapidamente PORTFOLIO UX/UI
  10. 10. A concept based on Mobility needs L a n o s t r a m e t o d o l o g i a UI concepts e Test MAKE 3 Sessioni di co-design Il design della piattaforma viene seguito in piena collaborazione con le aree business, di sviluppo e design + 3N u o v i c o n c e p t 2D e s i g n S p r i n t 30T e s t e r c o i n v o l t i U s a b i l i t y I n t u i t i v i t y C o n c e p t 1 A concept based on the WOW effect U s a b i l i t y I n t u i t i v i t y C o n c e p t 2 A concept that improve performances U s a b i l i t y I n t u i t i v i t y C o n c e p t 3 Validazioni test utente Vengono realizzati a seconda degli scopi: Definizione MVP: Closed card sorting Validazione UX/UI: Interactive test on mockup Direct feedback: Survey e interviste mirate + PORTFOLIO UX/UI
  11. 11. EDUCAZIONE FINANZIARIA software 2018 Banca dei Territori Brief Progettazione dell’educazione finanziaria, veicolata attraverso l’edutainment, supportato da un’esperienza utente studiata in modo specifico per rispondere ai requisiti dei processi di digital learning. Obiettivi Definire tutti gli aspetti dell’esperienza di interazione tra gli utenti (bambini 4-12 anni, da soli, accompagnati da un adulto o in gruppo, o adulti da soli) e il robot umanoide Pepper. Sviluppare un’applicazione interattiva, basata su trigger visivi, vocali e meccanismi di gamification. È stata concepita una cornice di storytelling all’interno della quale sono stati sviluppati dei giochi interattivi. Il robot è stato presentato ufficialmente al Lucca Comics e al Museo Del Risparmio di Torino per pubblicizzare il nuovo conto XME dindi. PORTFOLIO UX/UI
  12. 12. Progettare la relazione uomo e macchina U t e n t i U t e n t i R o b o t S p a z i o S p a z i o R o b o t RUOLO DEL ROBOT La costruzione del personaggio di Pepper è basata sul framework narrativo del viaggio dell’Eroe, in cui Pepper è, insieme all’utente, protagonista dell’apprendimento. A supporto del meccanismo story-based sono presenti specifici moduli di gioco, inseriti in una narrazione complessiva, in cui ci sono personaggi secondari, il cui ruolo è funzionale al fornire risposte a tutte le domande riguardanti le modalità di risparmio. + CHI SONO GLI UTENTI? Creazione delle Personas tramite interviste e analisi utenti. + • Analisi sul campo • Mistery • Definizione degli scenari • Analisi dei bisogni • Personas • Analisi delle funzionalità • Definizione degli obiettivi LE COMPONENTI DELL’INTERAZIONE DEFINIZIONE DELL’INTERAZIONE Quali sono le funzionalità che il touchpoint robotico può erogare? Chi fruirà dell’esperienza? Concept Quali sono i fattori esterni che possono influenzare l’esperienza? SOFIA FRANCESCO E MARTA Pepper sa spiegare ed esprimere le proprie emozioni in modo semplice e divertente. PORTFOLIO UX/UI
  13. 13. Robotoolkit Chiusura Riposo Svolgimento Ingaggio DEFINIZIONE DELLA USER JOURNEY IL CICLO DI INTERAZIONE Nelle interazione uomo-robot, le user journey sono di tipo circolare. Da una posizione di riposo iniziale del robot, un trigger attiva l’ingaggio con l’utente, che si completa con il ritorno alla posizione di riposo, una volta terminato il dialogo con l’utente. Riconoscimento presenza + riconoscimento tipologia di utente (in particolare: adulto, bambino in età 6-8 anni, bambino in età 8-18) Il riconoscimento dell’utente attiva un’interazione organizzata in chiave modulare. I moduli, oltre tenere conto della tipologia di utente ingaggiato e riconosciuto, tiene conto dei diversi life-cycle dell’interazione dell’utente, fornendo possibili attività, in grado di essere fruite secondo diversi archi temporali. Conclusione della interazione + CTA (es. generazione lead) PORTFOLIO UX/UI
  14. 14. Robotoolkit DEFINIZIONE DELLA MICRO-INTERAZIONE Ciao Pepper! Ciao! Ti ricorderai sicuramente quanti desideri ha un bambino. Tu cosa desideravi da piccolo? La gestualità guida l’interazione L’Utente sceglie la bicicletta toccando l’immagine corrispondente sullo schermo Lo storyboard è costruito tenendo conto dei diversi livelli di interazione. Il layer portante è quello dell’esperienza utente conversazionale. La visualizzazione a schermo supporta attraverso le immagini la comunicazione verbale di Pepper e interviene come interazione sostitutiva, di tipo touch-screen, nel caso quella verbale non andasse a buon fine. I livelli secondari di interazione sono rappresentati dal movimento e dall’espressione, che comprendono la gestione dello spazio e rendono human- friendly l’esperienza utente. PORTFOLIO UX/UI
  15. 15. Pepper è un robot spaziale, che viene da un pianeta dove non conoscono il valore del risparmio. + Per questo la sua scuola è stata venduta e Pepper ha deciso di partire per salvarla. + È arrivato sul pianeta Terra per imparare a risparmiare. + Gli amici NELLY PIGGY Gli aiutanti Il gioco del risparmio I p r o t a g o n i s t i d e l g i o c o Edutainment Il progetto è basato sul dell’utilizzo dei contenuti digitali nei processi di attivazione dell’apprendimento della “touch-screen generation” (target dai 4 ai 18 anni). La creazione dei DLO (digital learning object) che compongono l’interfaccia comprendono: • lo studio di una struttura di UX che risponda agli elementi del processo di apprendimento, con particolare attenzione alla tipologia di interazioni richieste dalla fascia di età scolare (es: elemento della tangibilità, espresso dal drag&drop); • L’utilizzo di diversi livelli di interazione in modalità complementare; • Utilizzo dell’interazione vocale come comunicazione portante tra l’utente e il robot, privilegiando le caratteristiche “umane”che possono essere veicolate attraverso un’interfaccia conversazionale. + Sviluppo e test utente Assistenza allo sviluppo e direzione dei test utente su tablet incoprorato. “XME dindi” è stato presentato ufficialmente in occasione del Lucca Comics 2018 e al Museo del Risparmio di Torino. + Pe pper I colori e lo stile Colori caldi ed intensi,scelti per esprimere maggiore emozione. + CONCEPT: LA STORIA DI PEPPER PORTFOLIO UX/UI
  16. 16. 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. software 2016 PORTFOLIO UX/UI
  17. 17. 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 Data visualization + I colori + + PORTFOLIO UX/UI
  18. 18. software TURBOADV SELF SERVICE 2017 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
  19. 19. 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
  20. 20. Dashboard Una dashboard modulare accoglie l’utente, segnalando l’andamento sintetico delle proprie campagne pubblicitarie. + PORTFOLIO UX/UI
  21. 21. 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. webapplication 2013 PORTFOLIO UX/UI
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. webapplication 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
  27. 27. 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
  28. 28. WEBSITE
  29. 29. 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
  30. 30. 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
  31. 31. HABBLE Brief Realizzazione di un nuovo concept di comunicazione e del sito web Habble.it, basato sulla valorizzazione di contenuti testuali e iconografici, per presentare i nuovi prodotti in corso di sviluppo. Obiettivi Offrire una demo gratuita dei nuovi prodotti Habble e generare lead generations sui prodotti Telco, attraverso un’esperienza lineare, iconografica e immediata. website habble.it2018 PORTFOLIO UX/UI
  32. 32. Sitemap workshop Definizione dello scopo del sito, delle singole pagine e dei flussi utente Chi è Habble? ABOUT CLIENTS SOLUTIONS HOW TO BUY Cosa offre?Con chi lavora? A chi si rivolge? FLUSSO INFORMATIVO FLUSSO DI LEAD GENERATION PORTFOLIO UX/UI
  33. 33. Creazione di un linguaggio diretto e dedicato ad ogni tipologia di cliente Lo stile Lo stile grafico gioca sui forti contrasti tra il bianco e le gradazioni di blu, in alcuni casi utilizzati con diversa opacità. In questo modo ne risulta un fascio di luce, che guida e accompagna l’utente nella comprensione dei contenuti. L’assistente virtuale Gli elementi di interazione sono presentati come hotspot che permettono all’utente di scoprire approfondimenti sui prodotti. + + + Infografiche PORTFOLIO UX/UI
  34. 34. webtool CHEBEC Brief Un web tool online, ospitato sulle piattaforme partner del progetto Chebec, dedicato alle realtà industriali culturali e creative, progettato per misurare la propria predisposizione all’internazionalizzazione. Generare una valutazione numerica e testuale, utili a creare una completa consapevolezza sugli step necessari da compiere per rendere il proprio modello internazionale. Ogni valutazione tiene in considerazione le peculiarità legate alle tipologie di professionisti e imprese del settore ICC (professionisti o ditte individuali, microimprese con ridotte competenze imprenditoriali/ manageriali). Obiettivi 2019 You ART the World: ready to conquer it? PORTFOLIO UX/UI
  35. 35. Sito del partner L’utente può accedere al tool cliccando sul banner presente sui siti partner Assessment Ogni utente può compilare il questionario di assessment in forma anonima Dashboard informativa Ogni assessment genera un output personalizzato: la valutazione comprende una parte numerica, quantificabile e comparabile, e una parte descrittiva consulenziale Welcome page Una pagina introduttiva descrive all’utente gli obiettivi dell’assessment IR WEB TOOL Progettazione User flow Utente Inteso come professionista, operatore o istituzione culturale PORTFOLIO UX/UI
  36. 36. Framework di IR Struttura di assessment La metodologia Delphi È una tecnica di indagine iterativa utilizzata con l’obiettivo di ottenere risposte ad un problema, coinvolgendo un panel di esperti indipendenti.  La metodologia, grazie alla sua particolare struttura, consente di ottenere non soltanto opinioni singole, ma di sollevare un confronto intorno all’oggetto di una ricerca, tra gli esperti selezionati. Si tratta di un metodo qualitativo, partecipativo, previsionale e di confronto Web form Per ciascuna area vengono elaborate 10 domande a scelta multipla, con l’obiettivo di indagare il grado di predisposizione all’internazionalizzazione del beneficiario rispettivamente all’asset specifico. Alle risposte sono attribuiti punteggi pesati sulla base dell’influenza di ciascuna competenza nel quadro della strategia complessiva di internazionalizzazione. Dashboard informativa condivisibile Al termine dell’assessment viene generata una dashboard riepilogativa, composta da elementi di natura quantitativa e qualitativa: • Livello complessivo di IR, tra tre macro livelli (seed, plant, tree); • Radar chart, per capire i punti di forza e debolezza; • Punteggio per ogni singola area; • Feedback testuale consulenziale. + + + D o m a n d a 1 D o m a n d a 2 D o m a n d a 3 D o m a n d a 4 D o m a n d a 5 D o m a n d a 6 1 Area 2 Area 1Area 5 Area 4 Area 3 R a d a r c h a r t Area 1 40/40 2 3 4 5 6 Area 2 20/40 Area 3 11/40 Area 4 31/40 Area 5 28/40 I l f r a m e w o r k , e l a b o r a t o t r a m i t e m e t o d o l o g i a D e l p h i , f o r n i s c e l a b a s e p e r l a s t r u t t u r a z i o n e d e l q u e s t i o n a r i o d i a s s e s s m e n t . PORTFOLIO UX/UI
  37. 37. 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
  38. 38. 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
  39. 39. PAZIENTI website 2018 pazienti.it Brief Riprogettazione della User Experience e User Interface del portale online di Pazienti, vetrina dedicata all’informazione nel campo della Salute. Progettare l’esperienza desktop e responsive in vista del lancio del nuovo servizio di videoconsulto online. Obiettivi PORTFOLIO UX/UI
  40. 40. Gli specialisti Videoconsulto online Prenota un videconsulto online, scegliendo tra gli specialisti di Pazienti. Il servizio è disponibile sia da app che dal sito. Consulta gli specialisti e cerca tutto ciò di cui hai bisogno per la tua salute Scegli una specialità Milano - Via Galileo Galilei, 48 Dermatologo (12) Dr. Maria Rossi PRENOTA UN VIDEOCONSULTO LEGGI DI PIÙ Videoconsulto AccountCerca 2 12:30 Prototipazione+ La progettazione dell’esperienza utente si basa su una navigazione organizzata per: - Servizi (menu di primo livello) - Esperienza di ricerca (strutture, medici, farmaci, ecc.) PORTFOLIO UX/UI
  41. 41. Pazienti.itPazienti.it Pazienti.it Videoconsulti.itVideoconsulti.it Menu apertoHomepage Videoconsulto landing page Videoconsulti.it Risultati di ricerca Specialista Login/Register - step 1 Login/Register - step 2 Homepage Homepage - Dettaglio appuntamento Homepage - Apertura della Sala d’attesa Homepage - Appuntamento in scadenza Homepage - Test effettuato Pazienti.it Cerca specialisti + risultati di ricerca Pazienti.it Specialista ! Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulto Pagina profilo Pazienti.it Pazienti.it Pazienti.it Pazienti.it Pazienti.it Pagina profilo utente Homepage Vai al profilo Pazienti.it Videoconsulto VideoconsultoVideoconsulto Videoconsulto Pazienti.it Pazienti.it Pazienti.it Videoconsulto Ciao Mario I TUOI DATI Nome: MARIO ROSSI Codice fiscale: MZRRNN91L41E202D Videoconsulti prenotati Videoconsulto da 15 min 01/01/2019 ore 15:00 Dr. Nome Cognome Professione Cancella appuntamento In attesa di conferma Avvia il test Carica documenti Le tue domande Elementi salvati I tuoi videoconsulti Videoconsulto Videoconsulto Videoconsulto Videoconsulto Login/Register - step 1 Login/Register - step 2 Prenotazione Videoconsulto A B Videoconsulto Videoconsulto Videoconsulto RICERCA SPECIALISTA ACCESSO BOOKING Termine prenotazione User flows + La progettazione dell’esperienza di prenotazione di un videoconsulto PORTFOLIO UX/UI
  42. 42. WOW effect Guidelines + + Definizione dei momenti esperienziali, strategici per valorizzare il raggiungimento degli obiettivi del sito. Rappresentazione grafica delle transizioni, con legenda comportamentale laterale utile al team di sviluppo. Scroll-then-fix Vertical scrollback Horizontal scrolling PORTFOLIO UX/UI
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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 website PORTFOLIO UX/UI
  48. 48. 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
  49. 49. 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 Dotare la Fondazione degli strumenti digitali funzionali al conseguimento della sua online mission. Il progetto web offre un’ampia vetrina sui contenuti istituzionali legati alla Fondazione, sul racconto delle attività realizzate e sui risultati raggiunti. L’interazione si focalizza sui meccanismi studiati per le operazioni di crowdfunding collegate ai progetti caricati sulla piattaforma. FONDAZIONE MEDIOLANUM 2013 fondazionemediolanum.it PORTFOLIO UX/UI
  50. 50. 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
  51. 51. 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
  52. 52. platform INTESA SAN PAOLO TOOLKITS 2016 Brief Definire gli strumenti di service design utili per il team di Innovation Center di Intesa Sanpaolo. 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
  53. 53. 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 CORREL ATI CASI STUDIO CORRE LATIAPPROFONDIMENTO METODOLOGICO SUL TOOL S LABL OG INMETODOLOGI AT OOL SC ASE STUDIES IMMAGINE TOOL “NEEDS” NA VBAR LABL OG INMETODOLOGI AT OOL SC ASE STUDIES SLIDER DI PRESENT AZIONE PROGETTO LOGO BISOGNO 1 BISOGNO 2 BISOGNO 3 BISOGNO 4 BISOGNO 5 BISOGNO 6 BISOGNO 7 TITOLO FILTRINEEDS NA VBAR LABL OG INMETODOLOGI AT OOL SC ASE STUDIES IMMAGIN E 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
  54. 54. E-COMMERCE
  55. 55. Brief Realizzazione di un portale in cui l’utente può consultare e acquistare contenuti esclusivi, mediante un abbonamento, dedicati alla creazione di un percorso di crescita personale della durata di 4 settimane. Obiettivi SHINE aiuta le donne a raggiungere una nuova consapevolezza attraverso un percorso suddiviso in aree tematiche. I contenuti del percorso vengono sbloccati settimanalmente in modo che l’utente possa seguire il programma a step quotidiani. L’obiettivo, oltre a quello della vendita del primo percorso, è anche di mantenere un abbonamento attivo ad un prezzo più conveniente e con la possibilità di fruire settimanalmente nuovi contenuti esclusivi. Con l’iscrizione al programma si entrerà anche a far parte di una community per poter partecipare agli eventi di SHINE. e-commerce SHINE 2019 shine-program.com PORTFOLIO UX/UI
  56. 56. Funzionalità La piattaforma è stata sviluppata tramite il CMS Wordpress, e implementando le funzionalità di accesso alle aree riservate ai soli utenti che acquistano il perscorso SHINE. L’area di percorso è gestita tramite LMS (sistema di diffusione di contenuti e-learning), in modo che l’utente possa intervenire autonomamente nella fruizione dei contenuti e monitorarne gli sviluppi. È stato integrato il sistema di pagamento PayPal per l’acquisto dei prodotti e per poter permettere al cliente la gestione dei pagamenti direttamente sulla piattaforma PayPal. Un sistema di fatturazione elettronica permette la gestione degli acquisti e la generarazione di fatture in linea con gli standard richiesti. PayPal L-CMS Fatturazione Users Role Percorso CMS Wordpress LMS Sistema di pagamento Fatturazione elettronica + + + + PORTFOLIO UX/UI
  57. 57. Percorso Attraverso una dashboard di gestione corsi e andamenti espressi dalla data visualization, l’utente può tenere traccia dei suoi progressi durante il percorso. + Responsive SHINE si adatta a qualsiasi device, dando la possibilità agli utenti di consultare i contenuti in mobilità o in altri scenari. + Contenuti dedicati Setup di un’area riservata dove è possibile accedere ad archivi di ricette, video e documenti riservati solo ai membri della community. + Tone of voice “Fly me to the moon” è il concept creato per delineare l’esperienza utente sulla piattaforma, enfatizzando il percorso di crescita degli utenti, attraverso il coinvolgimento della sfera emozionale. + PORTFOLIO UX/UI
  58. 58. 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
  59. 59. + 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
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. LANDING PAGE
  64. 64. Brief Creare un format di template per il lancio del nuovo blog. Obiettivi Definire un template unico per distinguere i post creati dai Guest di Landis+Gyr dagli autori interni e ridefinire la user experience dell’intero blog. landingpage LANDIS +GYR 2018 eu.landisgyr.com/blog PORTFOLIO UX/UI
  65. 65. Guest post Analytics + + Tracciamento sull’andamento dei singoli post e delle Call to action tracciabili unicamente. Template dinamico basato su 6 lingue e Guest Card PORTFOLIO UX/UI
  66. 66. INFRONT landingpage 2019 blog.infrontsports.com Brief Creare un format di template per il lancio di campagne marketing. Obiettivi Realizzazione di un design sistemico per la creazione di moduli e templates flessibili, secondo le esigenze delle campagne. PORTFOLIO UX/UI
  67. 67. Templates modulari Analytics + + Tracciamento sull’andamento dei singoli post, pagine e delle Call to action tracciabili unicamente. Composizione di pagine tramite drag and drop di moduli, dal layout flessibile a seconda del numero di contenuti presenti PORTFOLIO UX/UI
  68. 68. VIZ ECLIPSE Brief Lancio di un nuovo prodotto sul mercato attraverso una landing page, correlata da white papers e case studies. Obiettivi Offrire un’esperienza interattiva ed ingaggiante per esaltare il prodotto nella sua natura innovativa e rivoluzionaria. website vizeclipse.com2019 PORTFOLIO UX/UI
  69. 69. Interactive experience Tabelloni side interattivi che cambiano sponsor seguendo lo scroll verticale della pagina Lead generation e content download + + PORTFOLIO UX/UI
  70. 70. + INTERACTION + ENGAGEMENT PORTFOLIO UX/UI
  71. 71. landingpage CLUBHOUSE BRERA 2016 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
  72. 72. 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
  73. 73. Brief Ware è un Digital Integrator che supporta i clienti nella trasformazione del business. Le soluzioni di Ware si basano su un mix di competenze in ambito design thinking, Iot e mobility. Obiettivi Per Ware è stata realizzata una landing page a supporto delle capabilities e delle soluzioni offerte dal Digital Integrator. La landing page è stata realizzata con CMS wordpress creando un tema custom su misura per l’azienda. landingpage WARE 2018 ware.expert PORTFOLIO UX/UI
  74. 74. APP PORTFOLIO UX/UI
  75. 75. PAZIENTI website 2018 pazienti.it Brief Progettazione della User Experience e User Interface dell’app di Pazienti, vetrina dedicata all’informazione nel campo della Salute. Progettare l’esperienza smartphone e tablet in vista del lancio del nuovo servizio di videoconsulto online. Obiettivi SMARTPHONE TABLET PORTFOLIO UX/UI
  76. 76. Prototipazione dei flussi di acquisto, accesso all’area riservata, esperienza di videoconsulto e test con peer virtuale. Progettazione user flows e interazione+ A V V I O F L U S S O D I P R E N O T A Z I O N E V I D E O C O N S U L T O PORTFOLIO UX/UI
  77. 77. Realizzazione dell’esperienza di videoconsulto peer to peer, con area commenti, chat real-time e sala d’attesa virtuale. Progettazione esperienza di videoconsulto+ F L U S S O D I R E A L I Z Z A Z I O N E V I D E O C O N S U L T O Vuole far prolungare il videoconsulto di 5 minuti? D O T T O R E P A Z I E N T E Prolunga di 5 minuti PORTFOLIO UX/UI
  78. 78. Realizzazione di test di usabilità e organizzazione invito agli utenti con format promozionale Test utente e pubblicazione finale+ PORTFOLIO UX/UI
  79. 79. 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
  80. 80. 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. A supporto del processo di vendita è stata progettata una landing page che descrive le funzionalità dell’app. PORTFOLIO UX/UI
  81. 81. 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
  82. 82. 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
  83. 83. 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. Consultazione Attraverso una bilancia, l’utente può ottenere una quotazione dell’impatto ambientale, relativa al quantitativo acquistato del singolo alimento. + + PORTFOLIO UX/UI
  84. 84. GRAZIE Marcello Coppa marcello.coppa@gellify.com 349 311 6330 gellify.com

×