← tutti i lavori
UI design · sviluppo · portale B2B · 2021 – 2022

Portale B2B ordini

Un portale riservato dove i punti vendita di una grande catena ordinano i materiali per il negozio — etichette, adesivi, materiali POP e allestimenti per eventi — ognuno con il proprio listino. Ho progettato l’interfaccia in Adobe XD e poi ho sviluppato il sito vero, con WordPress e WooCommerce.

scopri il progetto
cliente
cliente riservato
ruolo
UI design e sviluppo
strumenti
Adobe XD · WordPress · WooCommerce
anno
2021 – 2022

Piattaforma interna ad accesso riservato: nelle immagini marchi, loghi e nomi sono sostituiti da segnaposto.

Home con login del portale B2B
01 · accesso

una home che è già un login

Il portale non è pubblico, quindi la home fa una cosa sola: accogliere e far entrare. Foto grande, messaggio, logo dell’insegna e il form di accesso in primo piano, con un bottone arancio che si vede subito.

Categorie del portale: stickers, POP, eventi
02 · catalogo

tre categorie, ognuna con il suo colore

Dopo l’accesso i prodotti sono divisi in stickers, POP ed eventi. Ogni categoria ha un colore della palette — verde, azzurro, corallo — che ritorna nelle testate e nelle schede, così ci si orienta senza leggere.

Lista prodotti della categoria stickers
03 · ordine

dalla lista al carrello in due clic

Le card prodotto hanno badge “Sale!”, nome e carrello sempre nello stesso punto. La scheda mostra galleria, descrizione e tabella dei formati; un popup permette di vedere i dettagli senza perdere la pagina.

Scheda prodotto
Popup di dettaglio prodotto
04 · sviluppo

dal prototipo al sito vero

Poi ho costruito il portale con WordPress e WooCommerce. Ogni punto vendita entra con il suo account e trova solo i listini della propria insegna; dal pannello sceglie il catalogo, ordina e rivede i propri ordini. Le schede prodotto gestiscono le quantità minime, per esempio solo multipli di 50 pezzi.

Pannello account del portale su laptop e smartphone
Catalogo prodotti del portale
Scheda prodotto con quantità minime
05 · guida di stile

palette e tipografia

Petrolio, verde, corallo e arancio per le azioni, toni chiari per gli sfondi e un blu notte per il footer. Un solo carattere, NanumGothic, pulito e leggibile a ogni dimensione.

#11727B#90B335#F54746#F68529#DCEAEB#F5F1E6#3D3D3D#182D4C
AaNanumGothic
contatti

ti serve un portale?

Area riservata, portale ordini o gestionale: scrivimi e ne parliamo.