Riprogettazione di un negozio di interior design digitale (un caso di studio)

I buoni prodotti sono il risultato di un continuo sforzo di ricerca e design. E, come di solito si scopre, i nostri progetti non risolvono immediatamente i problemi a cui erano destinati. Si tratta sempre di miglioramenti e iterazioni costanti.

Ho un cliente chiamato Design Cafe (chiamiamolo DC). È un innovativo negozio di interior design fondato da una coppia di architetti di grande talento. Producono design su misura per il mercato indiano e li vendono online.

La DC mi ha contattato due anni fa per progettare alcuni modelli visivi per il loro sito web. Il mio scopo era quindi limitato alle immagini, ma non avevo le basi adeguate su cui basare quelle immagini e, poiché non avevo una collaborazione continua con il team di sviluppo, il design finale del sito Web non catturava accuratamente il design originale intento e non soddisfaceva tutte le esigenze degli utenti chiave.

Passò un anno e mezzo e la DC decise di tornare da me. Il loro sito Web non forniva il flusso di contatti previsto. Sono tornati perché il mio processo era buono, ma volevano espandere l'ambito per dargli spazio per scalare. Questa volta sono stato assunto per fare la ricerca, la pianificazione, il visual design e la prototipazione. Questo sarebbe un restyling del vecchio design basato sull'input e sui dati dell'utente e la prototipazione consentirebbe una facile comunicazione con il team di sviluppo. Ho riunito una piccola squadra di due persone: io e un collega designer, Miroslav Kirov, per aiutare a condurre una ricerca adeguata. In meno di due settimane eravamo pronti per iniziare.

Calcio d'inizio

Consiglio utile: inizio sempre un progetto parlando con gli stakeholder. Per progetti più piccoli con una o due parti interessate, puoi unire il kick-off e l'intervista in uno solo. Assicurati solo che non sia più di un'ora.

Interviste agli stakeholder

I nostri due stakeholder sono entrambi esperti di dominio. Hanno un negozio di mattoni e malta nel centro di Bangalore che attira molte persone. Una volta lì, le persone sono deliziate dall'aspetto e dal tatto dei design. I nostri clienti volevano avere un sito web che trasmettesse la stessa sensazione online e che invogliasse i visitatori a visitare il negozio.

I loro principali punti deboli:

• Il sito web non era reattivo.
• Non c'era una chiara distinzione tra clienti nuovi, di ritorno e potenziali .
• I punti vendita di DC non sono stati comunicati chiaramente.

Avevano piani futuri per trasformare il sito Web in un hub per idee di interior design. E, ultimo ma non meno importante, DC voleva attrarre nuovi talenti del design.

Definizione degli obiettivi

Abbiamo selezionato tutti i nostri obiettivi per il progetto. Il nostro obiettivo principale era spiegare in modo chiaro e accattivante cosa fa DC per i clienti esistenti e potenziali in un modo che li coinvolga a contattare DC e andare al negozio. Alcuni obiettivi secondari erano:

• abbassare il tasso di abbandono,
• acquisire alcuni dati dei clienti,
• chiarire il messaggio del brand,
• rendere il sito reattivo,
• spiegare meglio i budget,
• fornire assistenza decisionale e diventare un influencer delle informazioni.

Chiave metrica

La nostra metrica chiave numero uno era convertire gli utenti in lead che visitano il negozio , che misura l'obiettivo principale. Inizialmente dovevamo migliorarlo di almeno il 5%, un numero realistico che abbiamo deciso con i nostri stakeholder. Per fare ciò, dovevamo:

• abbreviare il tempo di conversione (tempo necessario a un utente per entrare in contatto con DC),
• aumentare il tasso di richiesta del modulo,
• aumentare la soddisfazione generale che gli utenti ottengono dal sito web.

Tracciamo queste metriche impostando gli eventi di Google Analytics una volta che il sito Web è online e parlando con i lead che entrano nel negozio attraverso il sito Web.

Suggerimento utile: non concentrarti su troppe metriche. Bastano pochi dei tuoi più importanti. Misurare troppe cose diluirà i risultati.

Scoperta

Per poter ottenere le migliori informazioni possibili, le nostre interviste agli utenti dovevano essere rivolte sia ai clienti precedenti che a quelli potenziali, ma dovevamo essere minimi, quindi abbiamo selezionato due potenziali e tre clienti esistenti. Provenivano principalmente dal settore IT, il principale gruppo target di DC. Dato il nostro programma piuttosto serrato, abbiamo iniziato con la ricerca a tavolino mentre aspettavamo che tutte e cinque le interviste con gli utenti fossero programmate.

Suggerimento utile: devi sapere per chi stai progettando e quali ricerche sono state fatte in precedenza. Gli stakeholder raccontano la loro storia, ma è necessario confrontarla con i dati e con le opinioni, le aspettative e le esigenze degli utenti.

Dati

Potremmo fare riferimento ad alcuni dati di Google Analytics dal sito web:

• La maggior parte degli utenti è andata in cucina, poi in camera da letto, poi in soggiorno.
• L'elevata frequenza di rimbalzo di oltre l'80% era probabilmente dovuta a un'incomprensione del messaggio del marchio e a flussi e inviti all'azione (CTA) poco chiari.
• Il traffico era prevalentemente mobile.
• La maggior parte degli utenti è arrivata sulla home page, il 70% da annunci pubblicitari e il 16% direttamente (per lo più clienti di ritorno), e il resto è stato equamente diviso tra Facebook e Ricerca Google.
• Il 90% del traffico sui social media proveniva da Facebook. L'espansione della consapevolezza del marchio su Instagram e Twitter potrebbe essere utile.

Concorrenti

C'è molta concorrenza locale nel settore. Ecco alcuni schemi ripetuti:

• spot video e gallerie elaborate che mostrano i progetti completati con i clienti che discutono dei loro servizi;
• presentazioni dal design accattivante con foto di alta qualità;
• targeting dei messaggi appropriati del gruppo;
• quiz per la scelta degli stili;
• grande tipografia in grassetto, meno testo e più elementi visivi.

Utenti

I clienti di DC sono per lo più di età compresa tra i 28 ei 40 anni, con una fascia secondaria nella fascia più alta di 38 e 55 che vengono per la loro seconda casa. Sono professionisti IT o aziendali con un budget medio-alto. Apprezzano una buona esperienza del cliente ma sono attenti al prezzo e molto pratici. Poiché sono per lo più famiglie, molto spesso le mogli sono il decisore dominante nascosto.

Abbiamo parlato con cinque utenti (tre clienti esistenti e due potenziali) e inviato un sondaggio ad altri 20 (mescolando clienti esistenti e potenziali; vedi Design Cafe Questionnaire).

Interviste agli utenti

Suggerimento utile: assicurati di pianificare tutte le tue interviste in anticipo e di pianificare più persone di quelle di cui hai bisogno. Includi utenti estremi insieme a quelli tradizionali. È probabile che se qualcosa funziona per un utente estremo, funzionerà anche per il resto. Extremes ti darà anche informazioni sui casi limite di cui i mainstream semplicemente non si preoccupano.

Tutti gli utenti erano confusi sull'obiettivo principale del sito web. Alcune loro opinioni:

• "Manca un flusso adeguato."
• "Ho bisogno di maggiore chiarezza nel processo, soprattutto in termini di tempistiche".
• "Ho bisogno di più informazioni educative sull'interior design."

Tutti erano abbastanza ben informati sulla competizione. Avevano provato altre società prima della DC. Tutti hanno scoperto DC tramite un riferimento, Google, annunci o passando fisicamente dal negozio. E, ragazzo, amavano il negozio! L'hanno trattato come un Apple Store per l'interior design. Si scopre che la DC ha fatto davvero un ottimo lavoro con quello.

Suggerimento utile: il feedback negativo ci aiuta a trovare opportunità di miglioramento. Ma il feedback positivo è anche piuttosto utile perché ti aiuta a identificare quali parti del prodotto vale la pena conservare e su cui costruire.

Il tocco personale, il servizio clienti, i prezzi e la qualità dei materiali sono state le principali motivazioni per scegliere DC. Le persone insistevano per poter vedere il prezzo di ogni elemento su una pagina in qualsiasi momento (il design precedente non aveva prezzi sugli accessori).

Abbiamo fatto una scoperta interessante ma in qualche modo prevista sull'utilizzo del dispositivo. I dispositivi mobili sono stati utilizzati principalmente per il consumo e la navigazione, ma quando si è trattato di ordinare, la maggior parte delle persone ha aperto i propri laptop.

Sondaggi

I risultati dell'indagine si sovrapponevano per lo più alle interviste:

• Gli utenti hanno trovato DC attraverso diversi canali, ma principalmente tramite referral.
• Non hanno capito bene lo stato attuale del sito web. La maggior parte di loro aveva cercato o utilizzato altri servizi prima di DC.
• Tutti gli utenti intervistati hanno ordinato progetti di cucine. Quasi tutti hanno avuto difficoltà a scegliere il giusto stile di design.
• La maggior parte degli utenti ha trovato difficile il processo di progettazione dei propri interni ed era interessata a funzionalità che potessero semplificare la loro scelta.

Suggerimento utile: scrivere buone domande del sondaggio richiede tempo. Collabora con un ricercatore per scriverli e programma il doppio del tempo che ritieni necessario.

Pianificazione

Panoramica dei percorsi degli utenti

Parlare con i clienti ci ha aiutato a ottenere informazioni utili su quali scenari sarebbero stati più importanti per loro. Abbiamo creato un diagramma di affinità con tutto ciò che abbiamo raccolto e iniziato a stabilire le priorità e combinare gli elementi in blocchi.

Suggerimento utile: usa una lavagna bianca per scaricare tutte le conoscenze del tuo team e saturare la lavagna con essa. Raggruppa tutto fino a individuare i modelli. Questi schemi ti aiuteranno a stabilire temi e scoprire i punti deboli più importanti.

Il risultato sono state sette affermazioni di problemi di punti di vista che abbiamo deciso di progettare per:

1. Un nuovo cliente ha bisogno di maggiori informazioni su DC perché ha bisogno di prove di credibilità.
2. Un cliente abituale ha bisogno di un rapido accesso ai progetti perché non vuole perdere tempo.
3. Tutti i clienti devono poter sfogliare i design in qualsiasi momento.
4. Tutti i clienti desiderano sfogliare i design pertinenti ai loro gusti, perché ciò ridurrà i tempi di ricerca.
5. I potenziali clienti hanno bisogno di un modo per entrare in contatto con DC per acquistare un design.
6. Tutti i clienti, una volta che hanno ordinato, devono rimanere aggiornati sullo stato dell'ordine , perché hanno bisogno di sapere per cosa stanno pagando e quando lo riceveranno.
7. Tutti i clienti vogliono leggere casi di studio su progetti di successo, perché ciò li rassicurerà che DC sa il fatto suo.

Utilizzando questo elenco, abbiamo escogitato soluzioni di design per ogni viaggio.

Onboarding

La precedente home page di Design Cafe era confusa. Doveva presentare maggiori informazioni sull'attività. La mancanza di informazioni ha causato confusione e le persone non erano sicure di cosa parlasse DC. Abbiamo diviso la home page in più sezioni e l'abbiamo progettata in modo che ogni sezione potesse soddisfare le esigenze di uno dei nostri gruppi target:

1. Per i nuovi visitatori (il flusso viola), abbiamo incluso un breve viaggio attraverso i principali punti vendita unici (USP) del servizio, il modo in cui funziona, alcune storie di successo e un'opzione per avviare il quiz di stile.

2. Per i visitatori di ritorno (il flusso blu), che molto probabilmente salteranno la home page o la useranno come punto di passaggio, la sezione dell'eroe e la navigazione hanno indicato una via d'uscita per sfogliare i progetti.

3. Abbiamo lasciato una piccola parte alla fine della pagina (il flusso arancione) per i potenziali dipendenti , descrivendo cosa c'è da amare della DC e un CTA che va alla pagina delle carriere.

Il punto centrale del processo di onboarding era catturare l'attenzione del cliente in modo che potesse proseguire, direttamente al catalogo del design o attraverso una funzione che abbiamo chiamato quiz di stile.

Sfogliando i disegni

Abbiamo creato il quiz di stile per aiutare gli utenti a restringere i loro risultati.

DC aveva in precedenza una funzionalità chiamata 3D builder che abbiamo deciso di rimuovere. Ti ha permesso di impostare le dimensioni della tua stanza e quindi trascinare e rilasciare mobili, finestre e porte nel mix. In teoria, suona bene, ma in realtà le persone lo trattavano come un gioco e si aspettavano che funzionasse come una versione ridotta della modalità di costruzione di The Sims.

Tutto ciò che è stato realizzato con il costruttore 3D stava finendo per essere completamente modificato dai designer. Lo strumento dava alle persone molto potere di progettazione e troppe scelte. Inoltre, supportarlo è stato un enorme sforzo tecnico perché era un intero prodotto a sé stante.

Rispetto ad esso, il quiz di stile era una caratteristica relativamente semplice:

1. Inizia chiedendo di colori, trame e design che ti piacciono.

2. Continua a chiedere il tipo di camera.

3. Alla fine, mostra un elenco curato di design in base alle tue risposte.

L'intera procedura guidata del quiz si estende a soli quattro passaggi e richiede meno di un minuto per essere completata. Ma fa sì che le persone investano un po' del loro tempo, creando così coinvolgimento. Il risultato: stiamo migliorando i tempi di conversione e la soddisfazione generale.

In alternativa, gli utenti possono saltare il quiz di stile e andare direttamente al catalogo del design, quindi utilizzare i filtri per perfezionare i risultati. La pagina mostra automaticamente i design della cucina, ciò che la maggior parte delle persone sta cercando. E per chi è attento al prezzo, abbiamo creato una piccola funzione che consente loro di inserire le dimensioni della stanza e tutti i prezzi vengono ricalcolati.

Se alle persone non piace nulla del catalogo, è probabile che non siano i clienti target di DC e non c'è molto che possiamo fare per mantenerli sul sito web. Ma se gli piace un design , potrebbero decidere di andare avanti e mettersi in contatto con DC, il che ci porta al passaggio successivo del processo.

Entrare in contatto

Contattare DC doveva essere il più semplice possibile. Abbiamo implementato tre modi per farlo:

• attraverso la chat, mostrata in ogni pagina — il modo più veloce;
• aprendo la pagina dei contatti e compilando il form o semplicemente chiamando DC al telefono;
• cliccando “Prenota una consulenza” nell'intestazione, che richiede informazioni di base e richiede un appuntamento (al momento dell'invio, vengono mostrati i passaggi successivi per far sapere agli utenti cosa esattamente accadrà).

Il resto di questo viaggio continua offline: i potenziali clienti incontrano un designer DC e, dopo alcune discussioni e pianificazione, effettuano un ordine. DC li informa di qualsiasi progresso via e-mail e invia loro un collegamento al tracker di avanzamento.

Stato dell'ordine

Il tracker di avanzamento si trova in un menu utente nell'angolo in alto a destra del design. Il suo obiettivo è mostrare una sequenza temporale dell'ordine. Dopo un aggiornamento, viene visualizzata una notifica "non letta". La maggior parte degli utenti, tuttavia, di solito viene a conoscenza degli aggiornamenti degli ordini tramite e-mail, quindi il punto di ingresso per l'intero flusso sarà esterno.

Una volta che l'ordine di interior design è installato e pronto, gli utenti avranno l'ordine completato sul sito Web per riferimento futuro. Il loro progetto potrebbe essere presentato sulla home page e diventare parte dei casi di studio.

Casi studio

Uno degli obiettivi a lungo termine di DC è che il suo sito Web diventi un centro di influenza per l'interior design, pieno di casi di studio, consigli e suggerimenti. Fa parte dell'impegno a fornire contenuti di qualità. Ma DC non ha ancora quel contenuto. Quindi, abbiamo deciso di iniziare quella sezione con il minimo sforzo e di introdurla come blog. Il cliente lo riempirebbe gradualmente con contenuti e procedure dettagliate del processo. Questi sarebbero stati successivamente ampliati e presentati sulla home page. I casi di studio sono una caratteristica che potrebbe aumentare significativamente la consapevolezza del marchio, anche se richiederebbero tempo.

Preparazione per il Visual Design

Con i percorsi critici degli utenti tutti capiti e strutturati, eravamo pronti per approfondire il design visivo.

I dati hanno mostrato che la maggior parte delle persone apre il sito Web sui propri telefoni, ma le interviste hanno dimostrato che la maggior parte di loro era più disposta ad acquistare tramite un computer, piuttosto che un dispositivo mobile. Inoltre, gli utenti desktop e laptop erano più coinvolti e fedeli. Quindi, abbiamo deciso di progettare per desktop-first e lavorare fino alle risoluzioni più piccole (mobile) da esso nel codice.

Progettazione visiva

Abbiamo iniziato a raccogliere idee visive, parole e immagini. Inizialmente, avevamo una semplice sequenza di parole basata sulle nostre conversazioni con il cliente e una moodboard con design e idee pertinenti. Le principali caratteristiche visive che cercavamo erano semplicità, tipografia audace, belle foto e icone pulite.

Consiglio utile: non seguire una certa tendenza solo perché lo fanno tutti gli altri. Crea un mood board completo di design di riferimento pertinenti che si avvicinino all'aspetto e alla sensazione che stai cercando. Questo aspetto dovrebbe essere in linea con i tuoi obiettivi e il pubblico di destinazione.

Semplice, elegante, facile, moderno, alla moda, spigoloso, coraggioso, di qualità, comprensivo, fresco, esperto, di classe.

Il nostro cliente aveva già iniziato a lavorare su un servizio fotografico e i risultati sono stati ottimi. La fotografia d'archivio avrebbe rovinato tutto ciò che era personale su questo sito web. Le foto risultanti si sono fuse abbastanza bene con il tipo grande e hanno aiutato con quel semplice linguaggio che cercavamo.

Tipografia

Inizialmente, abbiamo scelto una combinazione di Raleway e Roboto per la tipografia. Raleway è un font fantastico ma un po' abusato. La seconda iterazione è stata Abril Fatface e Raleway per la copia. Abril Fatface ricorda lo splendore di Didot e ha reso l'intera pagina molto più pesante e pretenziosa. Era una direzione interessante da esplorare, ma non risuonava con la moderna sensazione tecnologica della DC. L'ultima iterazione è stata Nexa per i titoli, che si è rivelata la scelta migliore grazie alla sua sensazione moderna e spigolosa, con Lato, entrambi perfetti.

Suggerimento utile: gioca con le variazioni di tipo. Elencali fianco a fianco per vedere come si confrontano. Vai su Typewolf, MyFonts o un sito Web simile per trarre ispirazione. Cerca i caratteri tipografici che hanno senso per il tuo prodotto. Considera la leggibilità e l'accessibilità. Non esagerare con la tua scala del tipo; mantienilo il più minimo possibile. Dai un'occhiata al riepilogo delle regole chiave di Butterick in caso di dubbio.

Colori

La DC aveva già una combinazione di colori, ma ci hanno dato la libertà di sperimentare. I colori principali erano tinte di ciano, dorato e prugna (o, meglio, uno strano tipo di bordeaux), ma le tonalità originali erano troppo sbiadite e non si mimetizzavano abbastanza bene tra loro.

Suggerimento utile: se il marchio ha già dei colori, prova delle leggere variazioni per vedere come si adattano al design generale. Oppure rimuovi alcuni dei colori e usa solo uno o due. Prova a progettare il tuo layout in bianco e nero e quindi prova diverse combinazioni di colori su un design già simulato. Dai un'occhiata ad altri ottimi suggerimenti di Wojciech Zielinski nel suo articolo "Come utilizzare i colori nella progettazione dell'interfaccia utente: suggerimenti e strumenti pratici".

Ecco cosa abbiamo deciso alla fine:

Il modo in cui abbiamo presentato tutte quelle varianti di tipo e colori è stato attraverso le iterazioni nella home page.

Mockup iniziali

Abbiamo concentrato la prima iterazione visiva sull'ottenere le informazioni principali chiaramente visibili e spremere il massimo dalle testimonianze e dalle sezioni dei quiz di stile. Dopo qualche discussione, abbiamo pensato che fosse troppo semplice e necessitasse di miglioramenti. Abbiamo apportato modifiche ai caratteri e alle icone e modificato alcune sezioni, mostrate nelle iterazioni 2 e 3 nell'immagine sottostante.

Non abbiamo avuto il tempo di progettare icone personalizzate, ma il NounProject è venuto in soccorso. Con il formato di file SVG, è molto semplice cambiare tutto ciò di cui hai bisogno e mescolarlo con qualcos'altro. Ciò ha accelerato immensamente il nostro lavoro e, con l'iterazione visiva numero 4, abbiamo firmato il design della home page. Questo ci ha permesso di concentrarci sui componenti e usarli come blocchi LEGO per costruire i modelli.

Sistema di componenti

Ho elencato la maggior parte dei componenti (vedi PDF) in una tavola da disegno di Sketch per mantenerli accessibili. Ogni volta che il design necessitava di un nuovo modello, tornavamo su questa pagina e cercavamo modi per riutilizzare gli elementi. Avere un sistema visivo in atto, anche per un piccolo progetto come questo, ha mantenuto le cose coerenti e semplici.

Suggerimento utile: componenti, atomi, blocchi: non importa come li chiami, fanno tutti parte del pensiero sistematico sul tuo progetto. I sistemi di progettazione ti aiutano ad acquisire una comprensione più profonda del tuo prodotto esortandoti a concentrarti su modelli, principi di progettazione e linguaggio di progettazione. Se non conosci questo approccio, dai un'occhiata a Atomic Design di Brad Frost o Design Systems di Alla Kholmatova.

Prototipazione con codice

Consiglio utile: lavora prima su un prototipo. Puoi creare un prototipo utilizzando HTML, CSS e JavaScript di base. Oppure puoi utilizzare InVision, Marvel, Adobe XD o anche l'app Sketch o il tuo strumento di prototipazione preferito. Non importa. L'importante è rendersi conto che solo quando realizzerai il prototipo vedrai come funzionerà il tuo design.

Per il nostro prototipo, abbiamo deciso di utilizzare il codice e impostare un semplice processo di compilazione per velocizzare il nostro lavoro.

Strumenti e processi di prelievo

Gulp ha automatizzato tutto. Se non ne hai sentito parlare, dai un'occhiata alla fantastica guida di Callum Macrae. Gulp ci ha permesso di gestire tutti gli stili, gli script e i modelli e produce una versione di produzione ridotta pronta per l'uso del codice.

Alcuni dei più importanti plugin di Gulp che abbiamo utilizzato sono stati:

• gulp-postcss
  Ciò consente di utilizzare PostCSS. Puoi raggrupparlo con plugin come cssnext per ottenere una configurazione piuttosto robusta e versatile.
• sincronizzazione del browser
  Questo imposta un server e aggiorna automaticamente la vista ad ogni modifica. Puoi impostarlo per accendersi all'avvio di "gulp watch" e tutto verrà sincronizzato premendo "Salva".
• gulp-compile-manubri
  Questa è un'implementazione di Manubri per Gulp. È un modo rapido per creare modelli e riutilizzarli. Immagina di avere un pulsante che rimane lo stesso per tutto il design. Sarebbe un simbolo in Sketch. È fondamentalmente lo stesso concetto ma racchiuso in HTML. Ogni volta che vuoi usare quel pulsante, includi semplicemente il modello del pulsante. Se modifichi qualcosa nel modello principale, le modifiche vengono propagate a ogni altro pulsante del progetto. Lo fai per tutto nel sistema di progettazione e quindi stai utilizzando lo stesso paradigma sia per la progettazione visiva che per il codice. Niente più modelli di pagine statiche!

Componenti e modelli

Abbiamo dovuto combinare CSS atomici con CSS basati su moduli per ottenere il massimo da entrambi i mondi. Atomic CSS gestiva tutti gli stili generali, mentre i moduli CSS gestivano i casi limite.

Nel CSS atomico, gli atomi sono classi CSS immutabili che fanno solo una cosa. Abbiamo usato Tachyons, un toolkit atomico. In Tachyons, ogni classe che applichi è una singola proprietà CSS. Ad esempio, .b sta per font-weight: bold e .ttu sta per text-transform: uppercase uppercase . Un paragrafo con testo in grassetto maiuscolo sarebbe simile a questo:

 <p class="b ttu">Paragraph</p>

Suggerimento utile: una volta acquisita familiarità con il CSS atomico, diventa un modo incredibilmente veloce per prototipare materiale e molto sistematico, perché ti spinge a pensare costantemente alla riutilizzabilità e all'ottimizzazione.

Uno dei principali vantaggi della prototipazione con il codice è la possibilità di demo di interazioni complesse . Abbiamo codificato la maggior parte dei nostri viaggi critici in questo modo.

Progettazione di micro-interazioni nel browser

Il nostro prototipo era così ad alta fedeltà che è diventato la base front-end per il prodotto reale: DC ha utilizzato il nostro codice e lo ha integrato nel flusso di lavoro. Puoi controllare il prototipo su https://beta.boyankostov.com/2017/designcafe/html (o dal vivo su https://designcafe.com).

Consiglio utile: con i prototipi HTML, dovrai decidere il livello di fedeltà che vuoi raggiungere. Potrebbe richiedere molto tempo se vai troppo in profondità. Ma non puoi sbagliare nemmeno con quello perché man mano che vai sempre più a fondo nel codice e metti a punto ogni possibile dettaglio, a un certo punto inizierai a fornire il prodotto reale.

Cancella la sottoscrizione

I clienti, in particolare le piccole aziende B2C, amano quando offri una soluzione di progettazione che possono utilizzare immediatamente. Abbiamo spedito proprio questo.

Sfortunatamente, non è sempre possibile prevedere il ritmo di un progetto e ci sono voluti diversi mesi prima che il nostro codice fosse integrato nel flusso di lavoro di DC. Allo stato attuale, questo codice è pronto per il test e la cosa migliore è che è abbastanza facile da modificare. Pertanto, se DC decide di condurre alcuni test utente in futuro, qualsiasi modifica sarà facile da apportare.

Asporto

• Collaborare con altri designer quando possibile. Quando due persone stanno pensando allo stesso problema, forniranno idee migliori. A turno, prendi appunti durante le interviste e fai brainstorming su obiettivi, idee e immagini insieme.
• Avere uno sviluppatore nel team è vantaggioso perché tutti possono fare ciò che sanno fare meglio. Un buon sviluppatore trascorrerà solo pochi minuti su un problema con JavaScript che probabilmente avrei bisogno di ore per risolverlo.
• Abbiamo spedito una versione funzionante del sito Web e il cliente è stato in grado di utilizzarla immediatamente. Se non sei in grado di firmare il codice, prova ad avvicinarti il ​​più possibile al prodotto finale e comunicalo visivamente al team del tuo cliente. Documenta il tuo design : è un prodotto che verrà utilizzato e abusato da tutti, dagli sviluppatori agli esperti di marketing fino ai designer interni. Dedica un po' di tempo per assicurarti che tutte le tue idee siano adeguatamente comprese da tutti.
• La pianificazione delle interviste e la scrittura di buoni sondaggi possono richiedere molto tempo. Devi pianificare in anticipo e reclutare più persone di quante pensi di aver bisogno. Assumi un ricercatore esperto che lavori con te su queste attività e trascorri del tempo con il tuo team per identificare i tuoi obiettivi. Fai attenzione quando reperi i partecipanti. Il tuo cliente può aiutarti a trovare le persone giuste, ma dovrai attenerti ai partecipanti che soddisfano i dati demografici giusti.
• Pianifica abbastanza tempo per la pianificazione. Gli obiettivi, i processi e le responsabilità del progetto dovrebbero essere chiari a tutti i membri del tuo team. Hai bisogno di tempo per consentire più iterazioni sui prototipi, perché i prototipi migliorano rapidamente i prodotti. Se non vuoi pasticciare con il codice, ci sono vari modi per prototipare. Ma anche se lo fai, non è necessario scrivere un codice impeccabile: scrivi semplicemente il codice del designer. Oppure, come disse una volta Alan Cooper, "A volte il modo migliore per un designer di comunicare la propria visione è codificare qualcosa in modo che i colleghi possano interagire con il comportamento proposto, piuttosto che vedere solo immagini fisse. L'obiettivo di tale codice non è lo stesso dell'obiettivo del codice che scrivono i programmatori. Il codice non è per la distribuzione, ma per la progettazione [e] il suo scopo è diverso".
• Non concentrarti su un design unico di per sé , a meno che questa non sia la caratteristica principale del tuo prodotto. Meglio dedicare tempo alle cose che contano di più. Usa framework, icone e risorse visive ove possibile, oppure affidali a un altro designer e concentrati sugli obiettivi e sulle metriche principali del prodotto.