KFC

UX Design - UI Design

OBIETTIVI

Restyle sito KFC

Mio ruolo

User research, analisi degli analytics, analisi UX creazione di wireframe e UI.
Fidia home page

1.UX analisi

overview
ANALISI CON GOOGLE TRENDS
kfc google trends

Voci di menù non chiare

Inizialmente c’era un problema nella categorizzazione dei prodotti: i bucket erano annidati in voci di menù “Per molti” e “Per pochi” quindi grazie a Google trends ho mostrato al cliente che queste diciture non fossero ottimali ai fini della ricerca su browser e che le voci di menu dovevano cambiare rendendo più facile all’utente trovare i bucket.
focus
MAGGIORI VISUALIZZAZIONI
kfc google trends

Analisi VISUALIZZAZIONI

Con Google analytics ho individuato le aree di maggiore interesse per l’utente.

2.Analisi della navigazione

analisi architettura navigazione
1.Semplificazione dell’alberatura principale
Inizialmente il menù presentava troppe voci e lunghe come "Lastoria del colonnello": "Storia". Ho semplificato le voci di menù e spostato nel footer i "Lavora con noi" VOCI DDI MENÙ INIZIALI: Il nostro menù, la stroria del colonnello, perchè è così buono, i nostri ristoranti, vuoi essere dei nostri?, cerca. NUOVE VOCI: Menù, storia, ristoranti, cerca.
analisi architettura navigazione
2.Riorganizzazione della sezione “Il nostro Menù”
Focus sulla voce Menù: inizialmente questa area era annidata in 3 livelli, esempio menu-> per tanti-> backet per 2 persone. Ho allineato le voci di menù solo come primo livello, le specifiche x2,3,4 persone erano nella card prodotto.
analisi architettura navigazione
3.CREAZIONE NUOVA ALBERATURA DEL MENÙ KFC
Le voci di tezo livello come per esempio per panini sono espresse in pagina, in card visive, trattandosi di food hanno più appeal.

3.WIREFRAME

METODO
Wireframe di basso livello con testi reali, i commenti laterali in blue sono per gli sviluppatori per il funzionamento dei componenti, il giallo sono commenti di contenuto per il cliente in cui spiego che tipologia di contenuto andrà in quei determinati punti.
x
wireframe kfc

4.UI

METODO
La realizzazione della UI è avvenuta seguendo il brand book di KFC come uso dei colori e font.
wireframe kfc
wireframe kfc
wireframe kfc
wireframe kfc

5.PROTOTIPO INVISION

Creazione del prototipo navigabile in Invision in modo che che il cliente potesse apporre i propri feedback.

6.Handoff to dev

Confermata la UI ho fatto un file di specifiche tecniche della griglia e del design system per l’IT.