introduzione

Ciao lettore medio! In questo caso di studio UI UX, mostrerò il design della mia app mobile. “Stash&Store” è il nome della mia seconda applicazione mobile. Consiste in varie funzionalità che aiutano l'utente a trovare uno spazio di archiviazione adeguato per i propri articoli e/o a monetizzare lo spazio in eccesso del proprio. Aspiravo ad essere innovativo e creativo e a rendere questa app il più possibile user-friendly, intuitiva, funzionale e unica.

Problema

All'inizio del progetto, avevo in mente un problema specifico che intendevo risolvere. Tuttavia, dopo qualche ulteriore riflessione, mi sono reso conto che "Stash&Store" potrebbe effettivamente essere un'app multifunzionale che risolve problemi alquanto diversi per vari tipi di persone. I seguenti sono problemi che aspiravo a risolvere in qualche modo:

• Mancanza di spazio di archiviazione nelle case delle persone
  Nel mondo moderno le persone hanno una mancanza di vita e tanto meno di spazio di archiviazione.
• Prezzi elevati di unità di stoccaggio e magazzini
  Coloro che pensano di affittare spazi di stoccaggio sono molto spesso scoraggiati dal farlo a causa degli alti prezzi degli affitti. I magazzini specializzati possono spesso essere molto costosi.
• Eccedenza di spazio rimasto inutilizzato
  Le persone che possiedono uno spazio in eccesso a volte sono lasciate solo con le spese per lo spazio inutilizzato.

Essendo consapevole dei problemi di cui sopra, ho iniziato a fare ricerche. La prima cosa che ho fatto è stata, come sempre, analizzare applicazioni e prodotti della concorrenza. In questo modo, mi sono venute in mente alcune idee su cosa avrei potuto aggiungere alla mia app ma, soprattutto, ho trovato difetti e carenze nelle app della concorrenza. Il mio obiettivo finale era creare l'app migliore e più unica per questo scopo! Oltre a ispezionare le app della concorrenza, volevo conoscere l'utente. Durante l'intero processo di progettazione, pensare all'utente e alle sue esigenze è stata la mia massima priorità.

Persona utente

Dopo aver affrontato a fondo i problemi principali che la mia app avrebbe risolto e aver condotto ricerche approfondite sulle esigenze dei potenziali utenti, il passo successivo è stato identificare la persona utente ideale.

Brainstorming

Dopo aver identificato il personaggio dell'utente, ho partecipato ad alcune sessioni di brainstorming. In questa fase, ho preso nota di quasi tutte le idee che mi sono venute in mente. Ho preso queste note in FigJam e le ho successivamente trasferite in una speciale pagina Figma appositamente designata per queste idee.

Come puoi vedere nello screenshot qui sopra, c'era una sezione per il puro brainstorming mentre c'erano anche sezioni per specifiche parti principali dell'app.

Mappa dell'esperienza utente

Dopo aver avuto varie idee, ho costruito una mappa UX. Sono disponibili tre colori di cornice, ognuno dei quali rappresenta una parte distinta dell'app.

Tavola ispiratrice

Per quanto riguarda gli elementi dell'interfaccia utente della mia app, ho realizzato una grande lavagna ispiratrice comprendente un vasto numero di schermate e scatti diversi da diverse app. Nonostante forse sia in qualche modo controintuitivo, ho tratto ispirazione da app di viaggio, app di social media, app di cucina, app di navigazione, ecc. Ho prestato attenzione a tutti gli elementi dell'interfaccia utente: colori, campi di input, menu, icone, pulsanti, caratteri, illustrazioni, carte, ecc. In sostanza, tutte le app condividono una buona quantità degli stessi elementi dell'interfaccia utente.

Ho salvato numerosi scatti da Dribbble, Mobbin, Behance e piattaforme simili sulla mia pagina "Inspiration Board" in Figma. Ho classificato tutti gli scatti in base al loro scopo. In questo modo, c'erano più sezioni distinte contenenti diversi tipi di inquadrature.

Mi sono anche assicurato di lasciare note sotto forma di commenti Figma sugli scatti per ricordarmi la cosa esatta che ha attirato la mia attenzione. Sapevo che dovevo solo riadattare e imitare le opere di vari altri grandi designer per rendere la mia app fantastica! Le app da cui ho tratto ispirazione erano per lo più in uso in tutto il mondo e sono state progettate da alcuni dei migliori esperti del mondo!

Wireframe Lo-Fi

Ho creato tre sezioni wireframe. Il primo è universale e questo è il processo di onboarding. Le altre due sezioni erano wireframe di diverse viste dell'app , una per gli host e una per i client . Una volta che l'app è stata scaricata e l'utente si è registrato, può comunque passare facilmente da uno all'altro. Negli screenshot qui sotto, è visibile che quasi tutti gli schermi sono stati introdotti in questo wireframe.

Una volta completati i wireframe, avevo un'idea molto più chiara di come avrei continuato con il progetto. Inoltre, per non dimenticare i miei pensieri durante il wireframing, ho lasciato commenti Figma in alcune aree dello schermo per ricordarmi i miei piani per uno specifico elemento di design.

Sistema di progettazione

Il carattere tipografico che ho usato in combinazione con il colore del tema si è rivelato la soluzione migliore. Questo tono di colore verde invoca fiducia, ottimismo e positività generale nelle menti degli utenti. D'altra parte, DM Sans come carattere tipografico trasmette un senso di modernità, professionalità e chiarezza. Le linee pulite e gli angoli arrotondati conferiscono all'app un aspetto amichevole e accessibile, mentre i bordi taglienti suggeriscono un senso di precisione.

Per una maggiore produttività nel processo di progettazione, ho creato stili di testo e colore. In questo modo, è stato più facile e veloce decidere il colore di alcuni elementi dell'interfaccia utente e decidere il carattere che avrei usato in un determinato punto. Anche la creazione di stili mi ha aiutato immensamente in seguito ad apportare modifiche al design.

Per quanto riguarda le icone, per mantenere un design coerente in tutta l'app, ho utilizzato un unico pacchetto di icone e un tipo di icona. Il nome del pacchetto di icone è "Heroicons" e conteneva quasi tutte le icone di cui avevo bisogno in un formato SVG (vettoriale). Le icone che non ho trovato, le ho disegnate con uno strumento penna in Figma. Mi sono assicurato che fossero coerenti nelle dimensioni e nel tratto con le icone del pacchetto di icone precedentemente menzionato.

Fonte pacchetto icone:
https://heroicons.com/

Quando si tratta di illustrazioni che ho usato, anche queste sono state prese dalla stessa fonte di illustrazioni. Ancora una volta, la coerenza nell'interfaccia utente è molto importante!

Fonte illustrazioni:
https://storyset.com/time

Progetto definitivo

Come accennato nel capitolo "Wireframe Lo-Fi", "Stash&Store" comprende due viste dell'app . Il primo è incentrato sul cliente e il cliente è il tipo di utente che cerca spazio di archiviazione da affittare tramite l'app. Questa visualizzazione dell'app dovrebbe aiutare il cliente a trovare facilmente le offerte di archiviazione. La seconda visualizzazione dell'app è destinata agli host che desiderano affittare i propri spazi. In questo caso, "Stash&Store" serve l'utente in modi specifici che facilitano la gestione delle sue offerte.

Il processo di onboarding in sé e per sé è relativamente lo stesso per ogni app. In questo caso, all'utente vengono ovviamente fornite due opzioni principali: registrarsi o accedere. Durante la creazione di un account, agli utenti viene richiesto di specificare l'uso previsto per "Stash&Store". Questo è incluso perché l'utente potrebbe essere interessato a una sola visualizzazione dell'app. In base alla sua scelta, continua con il processo di registrazione.
A coloro che procedono come host viene chiesto di elencare subito la propria offerta o di saltare quella parte e tornarci più tardi. Gli host dovrebbero anche scattare una foto della loro carta d'identità rilasciata dal governo per verificare la loro identità.
Tuttavia, l'unico processo di verifica obbligatorio per tutti gli utenti è la verifica tramite posta elettronica.

Dopo aver completato il processo di registrazione del client, gli utenti vengono indirizzati alla schermata Esplora, che funge anche da scheda Home. Da qui, possono cercare lo spazio di archiviazione inserendo una posizione desiderata e possono filtrare i risultati della ricerca. La mappa mostra i pin di posizione dello spazio di archiviazione disponibile. Una volta cliccato su uno di essi, nella parte inferiore dello schermo appare una scheda che fornisce informazioni generali su tale memoria.
Un'altra caratteristica importante di questa scheda è la funzione "Posiziona un punto". Facendo clic sul pulsante nell'angolo in basso a destra, al centro dello schermo viene visualizzato un piccolo pin di localizzazione. Rimane al centro mentre l'utente scorre la mappa. Quando l'utente posiziona il pin nella posizione desiderata e preme nuovamente il pulsante in basso a destra, sullo schermo vengono visualizzati tutti i luoghi di archiviazione vicino al pin posizionato.

Dopo aver trovato lo spazio di archiviazione adatto, i clienti possono inviare una richiesta di disponibilità online. Come si vede nella seconda schermata in alto, i clienti selezionano la data di inizio desiderata e possono anche scrivere una nota all'host. È importante ricordare che spetta ancora all'host approvare completamente la richiesta del cliente.
Una cosa che ho introdotto nell'app che aiuta i clienti a decidere sullo spazio di archiviazione sono i chip di successo . Questi chip vengono visualizzati nella schermata di archiviazione e rappresentano una forma di garanzia per il cliente che l'archiviazione trovata è sicura e affidabile. Gli host sono quelli che ottengono questi chip attraverso la verifica dell'account e un determinato numero di accordi conclusi.

Una volta che il cliente ha prenotato uno spazio in affitto, può trovare l'offerta nella seconda scheda: i miei affitti. In questa scheda, hanno una panoramica di tutte le offerte che hanno fatto. Facendo clic su una delle carte si apre una schermata in cui la persona può visualizzare la sua offerta ma, cosa più importante, dove può modificare e/o cancellare la sua prenotazione. In entrambi i casi, viene chiesto loro di confermare la loro azione per non compiere un'azione accidentale.

"Messaggi" è la terza scheda in questa app. È presente anche nella visualizzazione dell'app host perché è più o meno universale. L'utente può cercare nelle chat, eliminare conversazioni o archiviarle. Inoltre, nel caso della visualizzazione dell'app dei clienti, gli utenti possono inviare domande frequenti pre-generate (come mostrato nella terza inquadratura sopra).

Le schermate del profilo per entrambe le visualizzazioni dell'app sono relativamente simili. Nella parte superiore di entrambe le schermate è presente il pulsante che modifica la visualizzazione dell'app. Volevo che questo pulsante fosse facilmente accessibile. Inoltre, se l'host non ha verificato completamente il proprio account, gli viene ricordato e incoraggiato a completare la verifica. Questo è lo scopo di quel pulsante verde vibrante nella parte superiore del secondo schermo.

Nella visualizzazione dell'app degli host, una delle cose più importanti è la gestione delle prenotazioni. Per garantire un'esperienza senza interruzioni per gli host, ho dato la priorità alla progettazione di un sistema di gestione delle richieste intuitivo che consenta loro di visualizzare e gestire facilmente le richieste.

Anche l'aggiunta e la modifica delle offerte è fondamentale per gli host. Dovrebbe essere facile aggiungere spazi, modificare elenchi e vedere recensioni.

Per quanto riguarda la scheda "messaggi" nella vista degli host, è la stessa per entrambe le viste dell'app. Tuttavia, le chat sono divise/separate tra le due diverse visualizzazioni dell'app.

Conclusione

Per riassumere, l'app Stash&Store è progettata per risolvere il problema delle opzioni di archiviazione sicure e convenienti per le persone che necessitano di spazio aggiuntivo per i propri effetti personali. Attraverso l'app, gli affittuari possono facilmente trovare e prenotare spazi di archiviazione, mentre gli host possono monetizzare il loro spazio inutilizzato.

Se ti è piaciuto il mio case study, assicurati di applaudire questo articolo 50 volte.
Suggerimento pro: prova a tenere premuto il pulsante di applauso :)

Contatto

Non esitate a contattarmi :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/