One4Work

One4 è un'innovativa realtà della Brianza, che opera nel Nord Italia come Solution Integrator e nella progettazione e sviluppo di soluzioni IT. Complementari a ITSG per varie competenze, sono nostri partner fidati ormai da tempo.

Società fortemente skillata per la parte di sviluppo e di system integration, nel momento in cui ha avviato la progettazione di una nuova app per la gestione di smart buildings si è rivolta a noi per raffinarne l'usabilità e dare una forma concreta e completa all'idea di progetto, con il nostro supporto.

Cliente:
One4 srl
Anno:
2019-2021
Tags:
DesignBrandingUX/UI DesignSviluppo FrontendAppIonic
One4Work - Cross platform app design

01.Analisi UX/UI

Ottimizzazione UX e wireframing

Gli sviluppatori di One4 avevano già realizzato un primo, embrionale prototipo dell'app, utile per testare le funzionalità dal punto di vista tecnico.

ITSG è intervenuta per ottimizzarne l'usabilità: a partire dai flussi utente e dalla navigazione, fino a dettagli quali gli empty state e il tipo di componenti da utilizzare.
Dopo aver discusso in dettaglio le funzionalità insieme a One4, recepito l'impostazione tecnica ed i vincoli presenti e ad aver analizzato attentamente lo scenario, siamo quindi partiti con la realizzazione di wireframe: utili per definire i flussi utente e dare una nuova impostazione all'app.
Così facendo abbiamo definito le fondamenta da seguire, anche con un primo scheletro low-fi di interfaccia contenente però i dati e le funzionalità necessarie all'utente finale, così da poter proseguire in parallelo agli sviluppatori backend con le attività successive.

One4Work App - UX/UI design e wireframing

02.Branding & look'n'feel

Restyling del brand

L'app aveva anche già un logo, del quale One4 ha desiderato mantenere le caratteristiche base. Abbiamo quindi ripreso il logo presente, adattandolo e completandolo con gli altri elementi del branding.

Lo sviluppo dell'identità dell'app è partito da un nuovo schema cromatico, da delle linee guida per lo stile, i font per l'app e le gerarchie tipografiche, i set di icone ed i vari assets grafici necessari per definire un branding nel complesso funzionale, coerente e riconoscibile.

One4Work app - App icon design
One4Work app - Stili base
One4Work app - Stilizzazione componenti

Style guide

ITSG ha quindi fornito a One4 una style guide "tecnica", orientata allo sviluppo software: sia per servire da manuale visivo per guidare eventuali sviluppi futuri in modo coordinato, che per riportare le variabili CSS e JS destinate agli sviluppatori per colore, dimensioni, font, spaziature e tutto quanto necessario per la stilizzazione dei singoli componenti.
Abbiamo poi creato e fornito l'intero set di icone per coprire tutte le prime esigenze, comprensive di tutti gli smart devices e le risorse prenotabili o configurabili previste inizialmente. Anche in questo caso, linee guide per lo stile delle icone e per le loro declinazioni o il loro utilizzo nell'UI, danno l'impostazione per aggiunte future.

You App - Style guide

03.UI design & frontend development

Design interfacce utente

Definiti con il Cliente wireframe, flussi di navigazione e look'n'feel, siamo passati alla realizzazione delle interfacce finali. In prima battuta con mockup ad alta fedeltà, sulla base dei wireframe realizzati e del look'n'feel definito, per definire i dettagli.

One4Work App - UI/UX design - managing smart building
One4Work App - UI/UX design - managing smart building
One4Work App - UI/UX design - managing smart building

Ionic crossplatform frontend development

Approvato il design delle interfacce insieme al Cliente, ci siamo quindi occupati dello sviluppo frontend, così da riportarlo in modo pixel perfect sui vari device.
Abbiamo sviluppato su base di Ionic, flessibile framework multipiattaforma basato su Angular e React, occupandoci del dialogo con i webservices lato server per la comunicazione con il DB backend e con le API per i dispositivi IOT. Dal punto di vista estetico, non ci siamo limitati a stilizzare i componenti presenti ma abbiamo customizzato in modo estensivo il look'n'feel via Css, Js e vari assets grafici, oltre che per la parte di micro-animazioni sulle interazioni.

Oltre al frontend dell'app mobile, ci siamo occupati di tutti gli altri touchpoint sui diversi dispositivi: il pannello di admin su PC desktop, i vari totem touch per le sale riunioni e risorse prenotabili, e così via.

One4Work App - UI/UX design e ionic frontend app development
One4Work App - UI/UX design - touch office devices
One4Work App - UI/UX design - touch office devices
One4Work App - UI/UX design - touch office devices

Theming e customizzazioni per clienti

One4Work nasce come SaaS, con possibilità di licenza in white label; l'app è stata quindi fin dal principio predisposta per essere declinata nel modo più semplice possibile per le necessità estetiche delle aziende che acquistano il servizio; sia per l'app in sè, che per la parte di backend e di dispositivi fuoriporta associati alle risorse.
Oltre a predisporre dal punto di vista tecnico le possibilità di theming, ITSG si è occupata della prima declinazione dell'app, dal punmto di vista grafico e da quello delle funzionalità, per un'importante realtà italiana del settore dell'alta oreficeria.
Contestualmente all'attività abbiamo definito le linee guida per le declinazioni grafiche successive, così da rendere One4 indipendente per il futuro, qualora fosse necessario.

One4Work App - UI/UX design - app theming
One4Work App - UI/UX design - app theming
One4Work App - UI/UX design - app theming

Altri case studies

Bronte VR App
Applicazione video interattiva in VR ad alto impatto
Bronte Virtual Reality

Giant Vision
Branding, UI&UX design, sviluppo sito web per una società all'avanguardia.
Giant Vision - Branding, UI&UX design, sviluppo sito web

CasaTua
Modellazione 3d di poltrone e divani per un'importante catena di arredamento.
CasaTua - divani e poltrone 3d

+ Vedi tutti