Citybility

Citybility è una startup innovativa a vocazione sociale, che nasce nel 2014 con in mente un'idea rivoluzionaria: trasformare lo shopping in un'opera di bene. Facendo in modo che i normali acquisti dei cittadini si trasformino in donazioni a favore di non-profit locali, generando un circolo virtuoso che possa migliorare il tessuto sociale cittadino.

Dalla nascita in poi, ci siamo occupati di dare una forma efficace a questa idea. Dall'ideazione del brand fino alla progettazione di UX e UI dell'app, passando per la realizzazione del materiale di comunicazione necessario per diffondere l'idea: reportage fotografici, materiali in-store, video illustrativo, realizzazione di campagne ADV online e sul territorio.

Cliente:
Citybility srl
Anno:
2014-2018
Tags:
DesignBrandingUX/UI DesignSviluppo FrontendAppIcon DesignPrint DesignVideoFoto reportageIllustrazioneInfograficheWeb marketing
Citybility - Branding, app design, content creation

01.Brand identity


Creazione logo e icona app

Abbiamo definito un'identità di marca seria e affidabile, adatta ad una società che gestisce donazioni in denaro e tratta anche temi delicati, ma che allo stesso tempo potesse trasmettere positività, allegria e speranza da riversare sulla società.
Lavorando non solo sul logo, per il quale abbiamo previsto declinazioni diverse a seconda dell'uso, ma su tutte le componenti comuni per creare un sistema di brand identity unico e caratteristico.
Ad un logo minimale, che richiama le interazioni tra i 3 tipi di utenti definiti e fa largo uso del verde, sono stati associati in modo ricorsivo e molto presente una serie di elementi creati ad hoc per bilanciare il mood aumentando la percezione di positività: icone, illustrazioni, infografiche, con uno stile fortemente riconoscibile e caratterizzante.
Particolare attenzione è stata data alla realizzazione dell'icona per l'app, asset cardine per il funzionamento del circolo virtuoso di Citybility.

Citybility - Logo design
Citybility - Logo design & App Icon Design

Style guide

A completamento dell'identità visiva di marca abbiamo creato una style guide per uniformare e guidare gli sviluppi futuri dei vari materiali, definendo un set di elementi comuni e un esteso set di icone custom.

Citybility - Style guide

Materiale in-store

Citybility ha una forte connotazione territoriale. L'esperienza utente non inizia online ma dal territorio, dove avvengono i primi contatti con i potenziali utenti e dove si inizia di fatto ad interagire con la piattaforma. abbiamo quindi curato al meglio i materiali di comunicazione presenti in quelle che abbiamo definito come "aree sensibili" nello studio dell'esperienza utente, in un'ottica di continuità visiva e di massima awareness di marca. Anche prevedendo template per l'utilizzo in co-branding nel caso di collaborazioni con partners commerciali.

Citybility Branding - Espositore in cassa
Citybility Branding - Vetrina esercente
Citybility Branding - Poster centri commerciali
Citybility Branding - Cartoline utenti esercente
Citybility Branding - Cartoline esercenti

02.UX/UI Design


Analisi e wireframing

Citybility coinvolge 3 principali attori: Esercenti, società non-profit e cittadini. Per ciascuna di queste tipologie di utenti è stato fondamentale studiare un'esperienza utente stimolante e priva di attriti. Insieme allo staff Citybility abbiamo analizzato il contesto, ideato e progettato la parte tecnica, studiando le migliori soluzioni per la gestione delle transazioni e delle donazioni.
Nel farlo abbiamo definito i flussi core dell'app su cui concentrarci, progettando i flussi utente nei vari touchpoint previsti.

Parte dell'esperienza utente è basata sull'interazione tra online e offline: Uno dei punti chiave dell'esperienza è proprio all'interno dei negozi, in un contesto potenzialmente difficile, con scarso tempo e scarsa attenzione a disposizione.
E' stato quindi cruciale occuparsi al meglio non solo della parte digitale e dell'app in sè, ma anche e soprattutto di come gli elementi di comunicazione online e offline dovevano dialogare tra loro, per suggerire agli utenti molto chiaramente le operazioni da compiere e ridurre al minimo gli abbandoni.

Citybility - UI e UX design per app del terzo settore
Citybility - UI e UX design per app del terzo settore
Citybility - UI e UX design per app del terzo settore
Citybility - UI e UX design per app del terzo settore
Citybility - UI e UX design per app del terzo settore
Citybility - Backend UI/UX design

Realizzazione grafica

Confermati con lo staff di Citybility wireframe e flussi di navigazione, siamo passati a definire la parte di look'n'feel, i materiali finali offline e i dettagli riguardo l'onboarding dell'utente, parallelamente allo sviluppo del software.

Citybility App - UI/UX design - onboarding
Citybility App - UI/UX design - onboarding
Citybility App - UI/UX design - onboarding

03.Frontend development


Sviluppo app native iOs e Android

ITSG ha prodotto le linee guida ed il materiale necessario per la realizzazione delle app native iOs e Android, da fornire agli sviluppatori incaricati. Li abbiamo poi seguiti ed affiancati durante lo sviluppo per offrire supervisione, assistenza, test e fine tuning della parte di frontend, fino alla pubblicazione sugli store ed ai successivi aggiornamenti.

Citybility - UI/UX design

04.Produzione video


Ci siamo occupati di ideare e realizzare i vari video informativi e promozionali: dall'ideazione e stesura dello storyboard fino al montaggio ed al doppiaggio final, affidato ad attori professionisti, passando per la realizzazione delle infografiche animate e delle illustrazioni.

Altri case studies