WEB PROJECT PLAN

1. Brief

1.1 Obiettivi, finalità e scopo

Beauté è uno shop digital di abbigliamento che ha l'obiettivo di aiutare gli utenti a sentirsi a proprio agio, sicuri e sempre alla moda, affrontando il tema in modo semplice ed efficace a 360°.
Nel fare ciò si è pensato di inserire diversi item suddivisi in due tipologie di raccolte: -stili e -occasioni. In questo modo Beauté aiuta l’utente ad affermare il proprio stile, migliorare la sua navigazione all’interno del sito e facilitare il processo di acquisto. Per questo la risorsa web prevede un accesso profilato tramite un quiz mirato a definire il proprio profilo di stile.
La componente personale (pagina About Us) e creativa (pagina Il Progetto) è stata inserita per dare testimonianza di un percorso professionale e innovativo in modo da affascinare, rassicurare e incentivare l’utente a credere e a supportare il progetto.

1.2 Utente tipo

Questo progetto si rivolge a un pubblico dai 16 ai 30 anni di ogni taglia, genere, orientamento e cultura, interessato a creare il proprio stile e a restare aggiornato con le tendenze moda del periodo.
Le vie di accesso sono diverse:

• Attraverso la search bar.
• Con lo slideshow.
• Con la navbar tramite il dropdown (navigazione primaria).
• Tramite la griglia di immagini nelle differenti raccolte (navigazione secondaria/terziaria).
• Attraverso i vari collegamenti diretti negli items (Ti potrebbe interessare anche).

2. Benchmark

Attraverso l’analisi dei competitors, abbiamo individuato quattro siti web e selezionato le caratteristiche positive o negative da adottare a Beauté:

A-MORE
Caratteristiche positive:

• La navbar con il giusto numero di categorie, dotata di search bar, carrello, accesso al profilo utente e logo cliccabile con ritorno alla home.
• Lo slideshow.
• Il box chatta con noi sticky.
• Il sito è in varie lingue.
• Il servizio di browsing nella home che rimanda direttamente alla pagina di descrizione del progetto e alla Corporate Social Responsability.
• Oltre a vendere i suoi prodotti racconta la storia del progetto e i valori associati al brand.
• Il footer è ben organizzato.
• C’è la possibilità di scrivere recensioni sotto gli item.
• “Ti potrebbe interessare anche”, è un modo interessante per spingere il pubblico ad acquistare altri prodotti simili.

Caratteristiche negative:

• La navbar non è sticky.
• La struttura del sito è poco intuitiva e ci sono troppi servizi di browsing dispersivi.
• La navigazione secondaria potrebbe essere migliorata esteticamente.

MANGO:

La navigazione secondaria è ben sviluppata, soprattutto dal punto di vista estetico e dell’usabilità.

LOOKIERO:

Caratteristiche positive:

• La sezione accedi.
• Un quiz per creare il proprio profilo di stile.
• Lo slideshow con foto Instagram degli utenti con i nostri prodotti.
• Il loro profilo su Pinterest.

Caratteristiche negative:

• Non è presente una navbar di navigazione primaria.
• Il menù a tendina è poco intuibile.
• Lo slideshow è poco chiaro.
• Il footer non è ben strutturato.

PINTEREST:

Caratteristiche positive:

• I contenuti sono ben sviluppati ed accattivanti.
• Lascia spazio all’utente nella creazione di una navigazione personalizzata.

Caratteristiche Negative:

• La struttura non è ottimale a causa dei troppi contenuti.
• Non è presente un footer.
• Non è presente una navbar, ma solo una search bar e un menù a tendina poco intuibili.

3. Struttura

3.1 Mappa concettuale

Per rappresentare le correlazioni e le connessioni logiche che sussistono fra i concetti coinvolti nel progetto viene utilizzata una mappa concettuale.
Le parole chiave sono:

• Profilo di stile.
• Idee abbigliamento.
• Noi.
• Il Progetto.

Di conseguenza, ogni categoria è direttamente collegata alle parole chiave.

3.2 Schema

I contenuti del progetto sono organizzati a livello gerarchico secondo lo schema delle dipendenze.
Al primo livello (homepage) si trovano le categorie di Donne, Uomini, Crea il tuo profilo si stile, Il Progetto e About Us.
Dalle pagine delle categorie si arriva ad un secondo livello in cui si trovano le pagine di sottocategoria di Occasioni e Stile (sia per Donne che Uomini), Csr e Concept.
Infine, esiste un terzo livello del sito che è costituito dalle pagine item contenute all’interno delle rispettive pagine di sottocategoria.

3.3 Categorie

Al fine di qualificare la raccolta degli oggetti digitali sono stati stabiliti dei descrittori:

• Taglia.
• Prezzo.
• Descrizione.
• Aggiungi al carrello.
• Categoria di appartenenza.

4. Layout

4.1 Wireframe

Index (Home)

• Barra di navigazione fissata in alto che contiene i collegamenti verso le pagine di secondo livello e il logo. La barra di navigazione rimane uguale per tutte le pagine del sito.
• Slideshow contenente immagini e bottoni collegati agli item.
• Box "Chatta con noi"
• Sezione con immagini e testo dedicata al concept.
• Sezione con immagini e testo dedicata alla csr.
• Footer con link utili, contatti, indicazioni sul copyright e data di creazione. Il footer rimane invariato in tutte le pagine del sito.



Navigazione primaria



La navigazione primaria fa parte della barra di navigazione e appare tramite dropdown.




Navigazione secondaria




• Barra di navigazione fissata in alto con categoria selezionata evidenziata.
• Briciole di pane.
• Sezione con immagini con bottoni linkabili alle sottocategorie.
• Footer.

Navigazione terziaria





• Barra di navigazione fissata in alto con categoria selezionata evidenziata.
• Briciole di pane.
• Sezione con immagini delle sottocategorie contenenti la descrizione dell'outfit linkabili alla relativa pagina (item).
• Footer.



Item






• Barra di navigazione fissata in alto con categoria selezionata evidenziata.
• Briciole di pane.
• Sezione con immagini specifiche della sottocategoria scelta.
• Taglia.
• Prezzo.
• Overflow con descrizione del prodotto.
• Aggiungi al carrello.
• Sezione "Ti potrebbe interessare anche" con cards contenenti immagini e testo linkabili.
• Footer.



About Us




• Barra di navigazione fissata in alto con categoria selezionata evidenziata.
• Briciole di pane.
• Sezione con testo.
• Sezione con tre box con i membri del team.
• Footer.



Crea il tuo profilo di stile




• Barra di navigazione fissata in alto con categoria selezionata evidenziata.
• Briciole di pane.
• Quiz con immagini a scelta multipla.
• Footer.



5. Usabilità




Al fine di ottenere un sito che vada il più possibile incontro alle necessità degli utenti finali sono stati applicati i seguenti accorgimenti sotto il punto di vista dell’usabilità:

• Gli strumenti di navigazione non cambiano il loro posizionamento quando ci si sposta di pagina.
• La barra di navigazione è sticky in modo da richiamare sempre la struttura del sito durante la navigazione.
• Vengono utilizzate icone convenzionali.
• Vengono utilizzate le briciole di pane per orientarsi nei contenuti.
• Il collegamento rapido alla homepage rimane attivo in tutte le pagine (cliccando sul logo e/o sulle briciole di pane).
• Si è applicato lo stesso stile per tutte le pagine del sito.
• Si è utilizzato l’attributo alt per le immagini.
• Si è ricorso al grassetto per evidenziare le parole chiave.
• Si sono inseriti elementi che facilitino la scrittura lineare (paragrafi, liste, immagini, ecc.).
• Si sono seguite le buone pratiche della scrittura per il web.



6. Linguaggi




Per lo sviluppo del progetto vengono utilizzati HTML e CSS.
Il codice è organizzato in elementi semantici tra cui Head, Nav, Body, Div, Footer.
Per quanto riguarda le caratteristiche grafiche, sono stati creati più fogli di stile, i quali sono stati collegati ai rispettivi file HTML.




7. Servizi




7.1 Strumenti di browsing




Gli strumenti di browsing che sono stati inclusi nel progetto sono:

• La search bar.
• Briciole di pane.
• Slideshow.
• "Ti potrebbe interessare anche".



7.2 Strumenti di interazione


Gli strumenti di interazione che sono stati inclusi nel progetto sono:

• Slideshow.
• Bottoni.
• Dropdown nella barra di navigazione.
• Profile cards



8. Sviluppo del progetto




8.1 Tempi e fasi




La realizzazione del progetto ha impiegato diversi giorni di lavoro.
Di seguito, uno schema che riporta l’organizzazione e la gestione delle attività del team.







9. Bibliografia e Sitografia




Per lo sviluppo della risorsa si è fatto riferimento a:

• W3school.
• Fontawesome per l’uso delle icone.
• Canva per l’uso delle immagini con licenza acquistata.
• Balsamiq per lo schema della struttura del sito.
• Justinmind per la realizzazione dei wireframe.
• Dispense e appunti del corso Informatica di base e Digital Humanities.