Dall'idea al prototipo: I documenti nelle varie fasi del progetto web

Embed Size (px)

Citation preview

PowerPoint Presentation

Dallidea al prototipoI documenti nelle diverse fasi del progetto webMaria Cristina Lavazza

Ore 9.00 brainstorming

Anna, PMElena e Francesco, marketingFiammetta,
art directorFilippo, IT

Una partita e molti giocatori

UX DESIGN

IDEADefinizione obiettiviBusiness analysisDefinizione requisitiFormalizzazione progettoSviluppo graficoSviluppo IT

TestRILASCIO

Relazioni
esterne

Commerciale

Customer
care

Studi e analisi

Brand strategistMarketingBusiness strategyAree operative

Information technologistProgettazione operativa

Usability test
(esistente)

Target analysisMarket
analysis

Heuristic analysis

Piano di Marketing ITBrand strategist

Scala
requisiti

Piano attivit

Value proposition

Marketing

SEO

SEMBrand strategy

Template

Look & feel

CMS personalizzazioneaccessibilit

usabilit

IT managementHtml

Project/Program management

Information architecture & user interaction design (IA/UX)

User test

Check requisitiConcept modelUsability PlanUsability reportContent inventoryDef. PersonasSite mapWireframesFlowchartPrototyping

Analisi fattibilit

Test accessibilit

Prog. e gestione risorseLinee guida

Analisi scenari

Modelli di interazioneAnalisi costi/ricavi

Metodologia

Labeling
naming

Prog. sistemi/flussi di aggiornamentoValutazione scelte ITModelli di interazione

Analisi previsionale
di sviluppo

Accesibilit

Usabilit

Progettiamo per un ecosistema

Le fasi della progettazione web

DESIGNIDEAZIONERILASCIOSVILUPPOPersonaeMappaConceptProgettazione strategicaSEOPianificazioneSEMProgettazione tecnicaSviluppo templateProduzione contenutiPubblicazioneTesting e valutazioniAnalisi requisitiAnalisi di mercato

IdeaDesign patternsPrototipoWireframe

I documenti di progetto

IDEAZIONE Identificazione e classificazione servizi

Analisi competitiva

Mappa Concettuale

Inventario contenuti

Personas

PROGETTAZIONE Mappa del sito

Wireframe

Process flow

Documenti con/su gli utenti

Pattern design

Prototipo

STRUMENTI DI PRESENTAZIONE Storyboard

Storytelling

Narrative report

Scenario

Presentazione

TIPOLOGIA
DI
DOCUMENTO

Ideazione >> ascolto e classifica dei servizi

ideazione >> analisi competitiva

www.ilmiogatto.comRazzeSaluteCuriositCerco/offroUtilit ProdottiCATEGORIE

HOMEPAGEPAGINA INTERNAPAGINA PRODOTTOLAYOUT PAGINA

Home
pagecategoriesotto
categorieassistenzaprodottiNAVIGAZIONE PRODOTTO

carrelloinformazioni consegnainformazioni fatturaconferma

opzioni
regalonuovo account

PROCESSO DI ACQUISTO

ideazione >> analisi competitiva

Ilmiogatto.comgattomania.commiglioreamico.itPAGINA PRODOTTOPAGINA INTERNAHOMEPAGE

ideazione >> mappa concettuale

FOTO

UTENTE FlickrARGOMENTOcontattiphoto-streamutenti Flickrposttemigruppiclassificazionetagscontenutocontestoblogspubblicoprivatopreferiti

personeazionioggettiluoghiculturaletemporalegeograficofisico

ideazione >> mappa concettuale 2

GATTI

userscuriososocialconsumatore

contenutiprodotti+fotowikicerco/offroblogsalutecuriositrazzenotizie/eventinewsletter

login

carrelloprodotto X

login

loginnavigo- - mi iscrivoscelgo, acquistoricevonavigoesplorointeragiscopartecipocercomi iscrivoUTENTI REDATTORI

REDATTORI INTERNIclassificazione +
tagclassificazione +
navigazioneUSERSCONTENT

Gatti

ideazione >> personae

Carlo ZanettiNon rinuncio mai alle mie passioni
- 36 anni
- Programmatore informatico
- Single

Attributi chiave

Basso AltoSapere ------------------Esperienza--------------Fiducia -----------------Frustrazioni

Mancanza di rete wireless (3G)

Caricamenti lenti

Bassa durata delle batterie

Confusione nel lavoro online

Caratteristiche ideali

Abilit a scattare foto

Abilit a caricare foto online (3G/Wifi)

Permettere agli altri di accedere alle sue foto i remoto

Abilit di mettere nome e permettere commenti alle foto

Utente neofita

Donna, 27 anni single, studente

Amanda preferisce imparare sperimentando le cose da sola. Non preoccupata da eventuali danni. Se ha bisogno di aiuto non usa il manuale ma interviene da sola provando a risolvere il problema.

______________
Necessit

-Condividere foto con i genitori

-Con gli amici

-Con le persone che incontra in viaggio

Amanda Rolli
Amanda sta per trasferirsi allestero, i suoi genitori le hanno regalato una macchina fotografica e vogliono essere sicuri che la sappia usare.
A lei piace molto la macchina perch sembra avere molte funzioni che le macchine dei suoi amici non hanno.
Appena pu Amanda la porta con s e cerca di fermare nelle foto tutto ci che le scorre davanti. Quando ha un problema non usa il manuale ma chiede agli amici o va al negozio specializzato.Adoro essere sempre in contatto con i miei amici

ideazione >> personae 2

Principiante
fiduciosa

Su di lui..Matteo ha 45 anni ed proprietario di una piccola azienda a Milano. Il suo business si focalizza su progetti di web marketing. Gran parte del suo tempo lo passa lavorando tra casa e agenzia. I suoi 5 collaboratori sono specializzati in progettazione marketing e branding per i nuovi media. Matteo si divide tra i rapporti con i clienti, networking e ricerca di nuovi progetti.
Il tempo libero lo passa con Laura, sua moglie, e Fabio suo figlio di 7 anni

Professione: imprenditoreTipologia azienda: 6 dipendentiAnni: 45Sede: MilanoFormazione: Laurea in ingegneriaStipendio annuo: 80mila euro

Matteo Acquaviva Personae primaria

socialeshoppingInteressi primarisposataconviventeStato 4839Ets a casas a casaFigli40mila euro35mila euroSalario annuolibera professionistaimpiegataRenataMiranda

Personae

progettazione >> mappa del sito

HOME.....................

progettazione >> mappa del sito 2HOMEFeedbackNewsletterContattiGiochi e downloadVideoCorsi e seminariEventiProdottiArea espertiIntervisteConsigli e suggerimenti

progettazione >> wireframe

Branding e navigazioneServizioNavigazioneIntestazione branding Navigazione globaleTitolo della pagine e introNavigazione
secondariaAssist.
clientiLoginServizio di iscrizione

progettazione >> wireframe 3

{TITOLO PROGETTO}

Home | Contattaci | FaqSearchSearchLink | Link | Link | LinkTop paginaNavig.Navig.Navig.Navig.Navig.BannerLogoTitoloTitoloTitoloTitoloNews

1Note

12

2

3

3

4

4

5

5La navigazione principale composta da 5 macroareeIl banner ha una funzione di comunicazione. Lancia i nuovi progettiQuesta sezione dedicata alle news che vengono lanciateNel footer oltre al copyright e alla private policy troviamoLa colonna di sinistra dedicata ai progetti che

START

END1 abbonamentopi abbonamentivuoleLoc.+ID key card+Tipoabb.Es. RM 123456 GNLoc.+ID key cardTipoabb.

X n. volte

Es. RM 123456 GN 123456 GNINVIA SMSHa acquistato entro 30 ottobreHa acquistato dopo 30 ottobreTariffa scontataTariffa pienaRICEVE SMS di CONFERMA

Commissione carta SI 0,25Valido come ricevuta dacquisto da esibire allentrata

valuta

a1

a2

a3

aAnna vuole fare un abbonamento al teatro tramite mobile

progettazione >> process flow

progettazione >> doc. con/su gli utenti

User group: clienti, designersObiettivo: navigazione generale della pagina

La maggior parte degli utenti punta al menu utilities per muoversi ma ne rimane delusaIl menu apparentemente principale destabilizza i navigatori: non hanno chiaro dove stanno andando (i pi agiscono per curiosit) e non capiscono dove finiscono. La natura degli ambienti di atterraggio sono diversi e poco omogenei: blog, pagina web, brochure

Le news e gli eventi portano fuori dal sito mentre i blogs appartengono allo stesso dominio. La maggior parte degli utenti perde il senso della navigazione.

Un utente ha provato a navigare con Safari e gli stato impossibile

La met degli utenti ha esitato e perso tempo nel creare da solo un account

Frequenza nella rilevazione

Alcuni utenti hanno confuso lo zip code dello stato con quello della citt

La combo propone solo stati USA e il Costa Rica non altri paesi di provenienza, due tester si sono bloccati

Il bottone di invio risulta piccolo e troppo a destra, alcuni esitano

progettazione >> pattern design

progettazione >> prototipo

GRAZIE

[email protected]

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity

Milano, 20-22 ottobre - Fieramilanocity