SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
App Shopper
Carmen Calabrò - Alberto D’Alessandro - Alessio Figini - Letizia Lomma
Gruppo 2
UI Design Master 2019 Project Work
Tag Innovation School 

Master UI Design Feb-Apr 2019
2/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
3/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
Customer Journey
RICEVE LA
NOTIFICA DI SPESA
TRAMITE SMS O
APP
I prodotti nella
lista non sono
disposti in ordine
di genere
01 02
Per prendere/
sostituire/cancellare
il prodotto si deve
aprire il dettaglio
prodotto e
selezionare lo stato.
ACCETTAZIONE
ORDINE
Customer Journey
Non può
visualizzare il
dettaglio dell’ordine
in anticipo e in un
posto diverso dal
supermercato
ARRIVA AL
SUPERMERCATO
Se la
localizzazione
è disattivata o
non funziona,
l’ordine non si
aprirà
1 h prima circa
APERTURA
ORDINE
INIZIA LA
SPESA
TROVA TUTTI I
PRODOTTI
ALCUNI
PRODOTTI
NON SONO
DISPONIBILI
Tag Innovation School 

Master UI Design Feb-Apr 2019
5/
30
ACCETTARE
LA SPESA
FARE
LA SPESA
VERIFICA DELLE
SOSTITUZIONI
Deve m
prodo
farli sc
È necessario
consultare
telefonicamente
il cliente
SOSTITUISCE I
PRODOTTI
Mancata risposta
da parte del cliente
VA
03
PROCEDERE CON
LA VERIFICA
Tag Innovation School 

Master UI Design Feb-Apr 2019
6/
30
Customer Journey
VERIFICA DELLE
SOSTITUZIONI
Deve mettere tutti i
prodotti in cassa e
farli scannerizzare.
04 05
È importantissimo
rispettare l’orario di
consegna indicato per
non ricevere un giudizio
negativo dal cliente.È necessario
consultare
telefonicamente
il cliente
SOSTITUISCE I
PRODOTTI
Mancata risposta
da parte del cliente
VA IN CASSA
IMBUSTA
LA SPESA
FOTO SCONTRINO
E RICHIESTA
FATTURA
CHIUSURA
ORDINE
dopo la firma del
cliente si dovrà
premere su SPESA
CONSEGNATA.
Si deve fotografare lo
scontrino e la fattura e
inserire l’importo esatto
pagato.
PARTENZA DAL
SUPERMERCATO
Probabilità di
incontrare traffico
CONSEGNA
Il cliente
potrebbe non
trovarsi in casa o
non sentire il
citofono
03
IN
CASSA
PROCEDERE CON
LA VERIFICA
CONSEGNARE
LA SPESA
Analisi & Benchmark
Tag Innovation School 

Master UI Design Feb-Apr 2019
7/
30
Analisi & Benchmark
Tag Innovation School 

Master UI Design Feb-Apr 2019
8/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
Analisi & Benchmark
9/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
10/
30
Moodboard
11/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
Wireframe
12/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
13/
30
UI Guidelines
01
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890£$%&°/()!?.;,:
Typography
Light
Regular
Bold
Aa
Inter
Inter Bold 22 px
Inter Light 22 px
PULSANTE
PARTENZAFOTO
ASSENTE
SOSTITIUISCI
Title
Subtitle Inter Bold 16 px
Inter Regular 16 px
Inter Bold 14 px
Inter Regular 14 px
Body
Info
Inter Regular 12 px
Inter Regular 12 px
Inter Regular 20 px
Inter Regular 12 px
02
Color Palette
Primary
Secondary
Terziary
Gradient
03
Buttons
LABEL
LABEL
LABEL
LABEL
Small Size
Big Size
h 26px
h 40px LABEL
LABEL 2LABEL 1
Anchored
h 46px
#42842b
Design System
Spesa #012
Sig.ra Carla Maria
Guadagno: 12€
18.00 - 18.30
Mercoledì 12 Settembre
Totale spesa: 56,20€
26 prodotti - 2 casse d’acqua
Via Rossi 107, Milano 20124
Esselunga
Via Brera 28, Milano 20124
Sig.ra Carla Maria Sala
40€
Ci sei quasi Mario!
1,50 €
Banane Chiquita
5 pezzi
Ora crea il tuo scontrino
virtuale e recati in cassa
per pagare la spesa!
Ottimo
lavoro!
CREA SCONTRINO
100%9:41 AMSketch
Lista Spesa
4.99 €
(10,35 €/Kg)
Fragole BIO
Short description of the
product can be insert here,
lorem ipsum dolor sit amet sit.
2 Confezioni (500g)
PULSANTE
PARTENZAFOTO
ASSENTE
SOSTITIUISCI
4,99 €
40€
Atoms Molecules
Tag Innovation School 

Master UI Design Feb-Apr 2019
14/
30
40€
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
15/
30
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
16/
30
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
17/
30
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
18/
30
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
19/
30
UI
Tag Innovation School 

Master UI Design Feb-Apr 2019
20/
30
Tag Innovation School 

Master UI Design Feb-Apr 2019
21/
30
Prototipo
Statico
Prototipo
Animato
Tag Innovation School 

Master UI Design Feb-Apr 2019
22/
30

Weitere ähnliche Inhalte

Empfohlen

ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...Palo Alto Software
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free VacationWeekdone.com
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceEmpowered Presentations
 
How to Map Your Future
How to Map Your FutureHow to Map Your Future
How to Map Your FutureSlideShop.com
 

Empfohlen (20)

ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from Prince
 
How to Map Your Future
How to Map Your FutureHow to Map Your Future
How to Map Your Future
 

Progetto Master UI Design

  • 1. App Shopper Carmen Calabrò - Alberto D’Alessandro - Alessio Figini - Letizia Lomma Gruppo 2 UI Design Master 2019 Project Work
  • 2. Tag Innovation School 
 Master UI Design Feb-Apr 2019 2/ 30 Tag Innovation School 
 Master UI Design Feb-Apr 2019
  • 3. 3/ 30 Tag Innovation School 
 Master UI Design Feb-Apr 2019
  • 5. RICEVE LA NOTIFICA DI SPESA TRAMITE SMS O APP I prodotti nella lista non sono disposti in ordine di genere 01 02 Per prendere/ sostituire/cancellare il prodotto si deve aprire il dettaglio prodotto e selezionare lo stato. ACCETTAZIONE ORDINE Customer Journey Non può visualizzare il dettaglio dell’ordine in anticipo e in un posto diverso dal supermercato ARRIVA AL SUPERMERCATO Se la localizzazione è disattivata o non funziona, l’ordine non si aprirà 1 h prima circa APERTURA ORDINE INIZIA LA SPESA TROVA TUTTI I PRODOTTI ALCUNI PRODOTTI NON SONO DISPONIBILI Tag Innovation School 
 Master UI Design Feb-Apr 2019 5/ 30 ACCETTARE LA SPESA FARE LA SPESA VERIFICA DELLE SOSTITUZIONI Deve m prodo farli sc È necessario consultare telefonicamente il cliente SOSTITUISCE I PRODOTTI Mancata risposta da parte del cliente VA 03 PROCEDERE CON LA VERIFICA
  • 6. Tag Innovation School 
 Master UI Design Feb-Apr 2019 6/ 30 Customer Journey VERIFICA DELLE SOSTITUZIONI Deve mettere tutti i prodotti in cassa e farli scannerizzare. 04 05 È importantissimo rispettare l’orario di consegna indicato per non ricevere un giudizio negativo dal cliente.È necessario consultare telefonicamente il cliente SOSTITUISCE I PRODOTTI Mancata risposta da parte del cliente VA IN CASSA IMBUSTA LA SPESA FOTO SCONTRINO E RICHIESTA FATTURA CHIUSURA ORDINE dopo la firma del cliente si dovrà premere su SPESA CONSEGNATA. Si deve fotografare lo scontrino e la fattura e inserire l’importo esatto pagato. PARTENZA DAL SUPERMERCATO Probabilità di incontrare traffico CONSEGNA Il cliente potrebbe non trovarsi in casa o non sentire il citofono 03 IN CASSA PROCEDERE CON LA VERIFICA CONSEGNARE LA SPESA
  • 7. Analisi & Benchmark Tag Innovation School 
 Master UI Design Feb-Apr 2019 7/ 30
  • 8. Analisi & Benchmark Tag Innovation School 
 Master UI Design Feb-Apr 2019 8/ 30
  • 9. Tag Innovation School 
 Master UI Design Feb-Apr 2019 Analisi & Benchmark 9/ 30
  • 10. Tag Innovation School 
 Master UI Design Feb-Apr 2019 10/ 30 Moodboard
  • 12. Tag Innovation School 
 Master UI Design Feb-Apr 2019 Wireframe 12/ 30
  • 13. Tag Innovation School 
 Master UI Design Feb-Apr 2019 13/ 30 UI Guidelines 01 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890£$%&°/()!?.;,: Typography Light Regular Bold Aa Inter Inter Bold 22 px Inter Light 22 px PULSANTE PARTENZAFOTO ASSENTE SOSTITIUISCI Title Subtitle Inter Bold 16 px Inter Regular 16 px Inter Bold 14 px Inter Regular 14 px Body Info Inter Regular 12 px Inter Regular 12 px Inter Regular 20 px Inter Regular 12 px 02 Color Palette Primary Secondary Terziary Gradient 03 Buttons LABEL LABEL LABEL LABEL Small Size Big Size h 26px h 40px LABEL LABEL 2LABEL 1 Anchored h 46px #42842b
  • 14. Design System Spesa #012 Sig.ra Carla Maria Guadagno: 12€ 18.00 - 18.30 Mercoledì 12 Settembre Totale spesa: 56,20€ 26 prodotti - 2 casse d’acqua Via Rossi 107, Milano 20124 Esselunga Via Brera 28, Milano 20124 Sig.ra Carla Maria Sala 40€ Ci sei quasi Mario! 1,50 € Banane Chiquita 5 pezzi Ora crea il tuo scontrino virtuale e recati in cassa per pagare la spesa! Ottimo lavoro! CREA SCONTRINO 100%9:41 AMSketch Lista Spesa 4.99 € (10,35 €/Kg) Fragole BIO Short description of the product can be insert here, lorem ipsum dolor sit amet sit. 2 Confezioni (500g) PULSANTE PARTENZAFOTO ASSENTE SOSTITIUISCI 4,99 € 40€ Atoms Molecules Tag Innovation School 
 Master UI Design Feb-Apr 2019 14/ 30 40€
  • 15. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 15/ 30
  • 16. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 16/ 30
  • 17. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 17/ 30
  • 18. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 18/ 30
  • 19. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 19/ 30
  • 20. UI Tag Innovation School 
 Master UI Design Feb-Apr 2019 20/ 30
  • 21. Tag Innovation School 
 Master UI Design Feb-Apr 2019 21/ 30 Prototipo Statico
  • 22. Prototipo Animato Tag Innovation School 
 Master UI Design Feb-Apr 2019 22/ 30