OBIETTIVI di THE APP LAB
- Osservazione di processi organizzativi, di comunicazione, di servizio.
- Rielaborazione dei processi, pulizia, ottimizzazione
- Innovazione dei processi nell'ottica 4.0 di interazione, chiarezza della comunicazione, efficienza, sincronizzazione, trasparenza, riduzione degli sprechi, sostenibilità.
- Organizzazione di informazioni complesse e di diversa natura (controlli, immagini, applicazioni, collegamenti, interfacce, fogli di lavoro condivisi...)
- Capacità di gestire la complessità, l'accuratezza e la completezza dei risultati attesi in termini di documenti e processi
- Originalità e creatività nell'ideazione, capacità di tenuta, continuità e visione d'insieme per completare il prototipo
- Esperienza completa delle fasi di lavorazione: dall'ideazione alla progettazione, realizzazione, test e presentazione di un prototipo funzionante.
E ORA ALL'OPERA!
STEP 1)
FOCUSING: UNA BUONA IDEA da mettere a fuoco
INIZIA IL FOCUSING E A PROGETTARE
con il modulo on line
---
STEP 2)
DESIGN: PROGETTARE, IMMAGINARE, DISEGNARE. LET'S SKETCH!
Fase a) CREA LO SKETCH con un foglio di carta, il contorno del tuo cell e una matita!
da 5 a 9 screen di solito bastano per un buono sketch. (qualcuno del gruppo si dedica intanto un momento al logo?)
da 5 a 9 screen di solito bastano per un buono sketch. (qualcuno del gruppo si dedica intanto un momento al logo?)
Fase b) con lo sketch pronto SCARICA MARVEL APP (android, IOS), fai le foto al tuo sketch, aggiungi i collegamenti ai bottoni E PROVA dentro marvel SE TUTTO FUNZIONA come vuoi!
Fase c) RIVEDI L'INTERFACCIA, LE FUNZIONALITA', LA USER EXPERIENCE grazie ai test fatti con marvel...
Fase d) QUANDO SEI SODDISFATTO DELLO SKETCH condividi il link Marvel (... Share in alto a destra) e aggiungilo su teams oppure invia a marcello@manibit.it con titolo-cognome-cognome nell'oggetto della email.
----
STEP 3)
IL PROTOTIPO. FUNZIONALE. COMPLETO.
a) ORA SEI PRONTO PER REALIZZARE IL PROTOTIPO WIREFRAME con lo strumento professionale Balsamiq.
Iscriviti gratuitamente e inizia.
b) AGGIUNGI i bottoni, le immagini, i link
e VERIFICA con il tasto play CHE TUTTO FUNZIONI COME VUOI TU
- Pentole Agnelli raccolta ordini (con video mockup e presentazione da situazione attuale a proposta di innovazione)
- MILANO COOL STREETS - documento di analisi
- Check my parking - il parcheggio urbano smart
- All in one - gestione documentale per la logistica (bmpr)
- Where is my flight - backoffice (video del prototipo, presentazione MIUR)
Esporta anche il formato balsamiq BMPR (Project/export File) e carica.
il BMPR ti potrà servire dopo la scadenza dei 14 giorni di prova gratuita di Balsamiq per modificare il progetto.
d) Per poter presentare il tuo prototipo assicurati di aver condiviso il progetto Balsamiq: Project/Share metti il baffo a "Allow public Reviews". Il link al tuo prototipo online è proprio lì di fianco.
----
STEP 4)
MOCKUP FUNZIONALE CON DATI e AI
A) prepara un elenco di dati che sono necessari alla tua piattaforma di gestione/comunicazione, Aggiungi qui un foglio con l'elenco dei dati
e realizza un semplice e completo servizio di richiesta (form) monitor (gallery) e gestione dei dati (board kanban) con Notion e con i dati che ritieni necessari
NOTION
risorsa originale e potente. permette di partire da una propria struttura dati (foglio excel) per creare diverse viste (board kanban per ufficio, gallery per monitor autisti) e interazioni (la form per inserire dati di prenotazione).
Bottoni da collegare a automazioni (es. cambio stato della baia o del camion...) le notifiche al team sono gratuite, anche via email, all'esterno sono nel piano a pagamento.
es. tabella e viste
es. prenota baia
------
B) prepara una scaletta completa e dettagliata di ciò che hai progettato fin qui per realizzare un prompt esaustivo e contestualizzato. specifica
- gli attori (categorie di utenti) coinvolti
- le diverse viste (scenari, schermate) necessarie,
- quali funzionalità sono richieste per ogni utente
- tutti i dati necessari e quelli opzionali.
Un esempio semplice con scaletta delle pagine per la gestione delle baie di carico e prenotazione:
Crea un'app web per la gestione logistica delle baie di carico. Deve avere:
Una pagina 'Ufficio' protetta da password dove l'impiegato vede una tabella dei camion in attesa e può cliccare un bottone 'Assegna Baia' e un bottone 'Scarico Completato'.
Una pagina 'Autista' pubblica con un modulo (Targa e Nome) per registrarsi all'arrivo.
Una pagina 'Monitor' pubblica che mostra in tempo reale quali camion sono in baia e quali sono i prossimi in coda. Usa un design pulito e moderno
2a iterazione:
aggiungi data e ora prevista di arrivo per l'autista,
aggiungi dei dati di prova in tutte le parti
aggiungi telefono autista
3a iterazione:
aggiungi una visibilità delle baie libere nella vista ufficio.
aggiungi 2 tipi di camion e baia in ufficio e autista: carico laterale e refrigerato
4a iterazione
il monitor per l’autista deve essere più pulito, solo targhe e baia assegnata per i camion che stanno aspettando (quando arrivano in baia spariscono dal monitor) altre informazioni solo per l’ufficio
Esempio di prompt più dettagliato, evita alcune iterazioni:
Crea un'app web per la gestione logistica delle baie di carico. Deve avere:
Una pagina 'Ufficio' protetta da password dove l'impiegato vede l'elenco delle baie, una tabella dei camion in attesa e può cliccare un bottone 'Assegna Baia' e un bottone 'Scarico Completato'.
Una pagina 'Autista' pubblica con un modulo (Targa e Nome, telefono e orario di arrivo previsto) per registrarsi all'arrivo.
Una pagina 'Monitor' pubblica che mostra in tempo reale quali camion sono i prossimi in coda.
ci sono camion e baie specializzati per carico laterale e per refrigerato.
Usa un design pulito e moderno, sfondo scurso, colori ben visibili, ottimizza le pagine autista e monitor per mobile e la pagina ufficio per desktop
----
C) Seleziona e prova una+ piattaforma IA per la realizzazione di codice del mockup
V0 di Vercel
ottima grafica, buon codice (con qualche errore da sistemare in iterazione)
i dati non sono da strutturare o gestire.
REPLIT AGENT
ottima alternativa, buon design, utilizza Claude per il codice.
i dati non sono da strutturare o gestire.
Con 100 crediti a disposizione si arriva a 3 o 4 iterazioni, la condivisione è semi-pubblica, da avviare all'interno del progetto Replit
es.https://bb26cbca-173b-4184-b015-eccc171e31e3-00-2x5bxorgquiol.worf.replit.dev/. (da lanciare prima di essere utilizzato)
Dev URLs are temporary and will sleep after you leave the workspace.
prova su mobile: 
CLAUDE ARTIFACTS
Il miglior produttore di codice al momento, utilizzato da molte piattaforme di mockup e software. il piano gratuito ha limiti che difficilmente permettono di arrivare a un artefatto completo con iterazioni. è possibile scaricare il codice o pubblicare direttamente la bozza di progetto.
GEMINI deep research / create app
Anche l'AI di Google ha a disposizione la richiesta di realizzazione di una applicazione. E' necessario prima fare una richiesta contestualizzata e pertinente in modalità deep research. L'elaborazione può prendere diverso tempo, da mezz'ora a un'ora. quando viene presentato il report, in alto a destra sono presenti diversi modi per proseguire l'approfondimento, tra cui la realizzazione di una applicazione a partire dal report stesso. l'iterazione continua poi in chat lato sinistro, con l'artefatto che evolve sulla destra dello schermo.
Un tasto in basso a destra "aggiungi funzionalità" permette di evolvere il sistema con proposte aggiuntive con AI da valutare.
Alla fine si può condividere con un link pubblico web persistente.
gemini modalità deep reasearch
BASE44
permette diverse interazioni nella iscrizione gratuita, pubblicazione online del mockup.
es. https://logistica-facile.base44.app
AIRTABLE OMNIO
Nata per gestire tabelle excel aumentate, ora propone una funzionalità IA (OMNIO) per la realizzazione di mockup,
es. https://airtable.com/appA2QFoSBfegJyGO/shrDNhjUfK33o3O3R
SOFTR
piattaforma un po’ complicata a livello tecnico, import dati da airtable (e in modo più articolato anche da sheets e csv). la pubblicazione gratuita, la struttura dei dati è da fornire.
NOTION
risorsa originale e potente. permette di partire da una propria struttura dati (foglio excel) per creare diverse viste (board kanban per ufficio, gallery per monitor autisti) e interazioni (la form per inserire dati di prenotazione).
Bottoni da collegare a automazioni (es. cambio stato della baia o del camion...) le notifiche al team sono gratuite, anche via email, all'esterno sono nel piano a pagamento.
es. tabella e viste
es. prenota baia
------
Molte altre piattaforme disponibili, tra cui Firebase IDX da Google (complicato il deploy, in fase di ristrutturazione), Glide (bella grafica mobile ma pubblicazione a pagamento), Appsheet (direttamente dai fogli di Google, gratuita ma un po' complicata da configurare), Lovable.dev, Miro prototypes AI (a pagamento) ...
per caricare pagine di codice (da Claude o altri produttori di codice…): Netlify.com, codesandbox.io/
SheetDB per avere un db esterno, strutturare i propri dati in autonomia e vedere le modifiche in tempo reale.
------
D) Confronta i risultati con altre piattaforme, valuta pro e contro per la tua proposta tecnica.
E) Fai un test di prestazioni dello sviluppo con lighthouse:
F) Condividi il migliore risultato con valutazioni e commenti tecnici logistici relativi alla fluidità ed efficienza del processo, con vantaggi rilevati e limiti ancora da superare.
Assicurati che i link siano pubblici senza login.
Aggiungi qui i link web pubblici balsamiq e mockup AI della tua proposta
Assicurati che i link siano pubblici senza login.
Aggiungi qui i link web pubblici balsamiq e mockup AI della tua proposta
------
STEP 5)
PRESENTAZIONE DEL PROGETTO e feedback tra pari
Questo è il momento di mettere alla prova la bontà del progetto e le vostre doti di comunicatori.
Avete avuto un'idea, l'avete focalizzata e raffinata, rappresentata con uno sketch a mano e animato, creato un prototipo funzionale bello e pronto.
è il momento di coinvolgere potenziali investitori, kickstarter, amici e soci nella possibile start up presentando l'idea, il progetto, l'app, il prototipo...
- COSA: un elevator pitch, un minidiscorso che risponde alla domanda: qual è il tuo progetto, di cosa si tratta, perché è utile?
- COME: ogni formato che ritieni utile, powerpoint, link a canva, clip video, story, post, galleria fotografica, altro... (l'importante che contenga i link al tuo prototipo e al mockup!)
- RISORSE: tutte le risorse che hai già creato: info di Focusing (vedi il foglio excel con i vostri BRIEF), Sketch fatti a mano e Marvel, Balsamiq con PDF, screen e il link al prototipo interattivo, il mockup
- IL PITCH:
- titolo dell'app, payoff e una bella immagine
autori, corso, nome scuola, LOGO scuola - la situazione/la necessità/il problema/l'ostacolo da superare!
- l’app di riferimento più simile già presente sugli store
- il valore aggiunto fornito dalla proposta di innovazione
- una breve sintesi dell'app e delle sue funzioni principali
- il target: le categorie di utenti, una stima di download
- il budget previsto,
il tipo di distribuzione (free+ad, payment, subscription…)
e il modello commerciale per la sostenibilità economica (da dove provengono le entrate?) - alcune immagini del prototipo progettato (Project / Export / Images da Balsamiq)
- il link a Balsamiq per lanciare il prototipo live (ricorda: Share / Allow Public Review)
- il link al mockup (attenzione che sia link pubblico)
- conclusioni finali e grazie dell'attenzione, sempre!
SCARICA IL MODELLO DELLA PRESENTAZIONE
Durata della presentazione: 3 minuti per il pitch, 3 minuti per il prototipo, 4 minuti per domande e feedback
Carica sul canale di TEAMS dedicato oppure CARICA QUI il materiale della presentazione con il titoloapp-cognome-cognome
----
clicca sul il link per dare il tuo feedback personale su idea, realizzazione e livello di comunicazione dei gruppi di lavoro
rivedi tutti i feedback QUI
e rielabora prototipo e presentazione per la versione 2
--------------------------------------
COSA RESTA DOPO IL LAB?
- il focusing, da un'idea generica a una proposta fattibile, pulita, comunicabile
- uno sketch a mano per verificare la completezza e l'interazione
- un prototipo funzionale da presentare a un'agenzia, possibili investitori, amici, collaboratori, al capo-progetto
- l'esperienza personale di un giro completo dall'idea al prototipo (metodo riusabile)
- alcuni tools professionali
- dare voce, visibilità, concretezza e magari gambe a una idea e comunicarla in modo chiaro, dinamico e formale a un pubblico
- il divertimento e il piacere di collaborare nel creare e saper dare forma e saper comunicare un'idea, uno stile organizzativo, una soluzione.
- la possibilità di continuare verso una startup oppure di rifare quando serve questo giro di progettazione con un'altra idea, in altri contesti, con altre persone.
Grazie della partecipazione!