Wstęp

Cześć średni czytelniku! W tym studium przypadku UI UX zaprezentuję mój projekt aplikacji mobilnej. „Stash&Store” to nazwa mojej drugiej aplikacji mobilnej. Składa się z różnych funkcji, które pomagają użytkownikowi znaleźć odpowiednią przestrzeń do przechowywania swoich przedmiotów i/lub zarabiać na nadmiarze własnej przestrzeni. Chciałem być innowacyjny i kreatywny, aby ta aplikacja była jak najbardziej przyjazna dla użytkownika, intuicyjna, funkcjonalna i wyjątkowa.

Problem

Rozpoczynając projekt, miałem w głowie jeden konkretny problem, który zamierzałem rozwiązać. Jednak po dłuższym zastanowieniu zdałem sobie sprawę, że „Stash&Store” może skutecznie być wielofunkcyjną aplikacją rozwiązującą nieco inne problemy różnych typów ludzi. Oto problemy, które chciałem w jakiś sposób rozwiązać:

• Brak miejsca do przechowywania w domach
  We współczesnym świecie ludziom brakuje miejsca do życia, a co dopiero do przechowywania.
• Wysokie ceny lokali i magazynów
  Osoby myślące o wynajmie powierzchni magazynowych bardzo często zniechęcają się do tego wysokimi cenami najmu. Wyspecjalizowane magazyny często mogą być bardzo drogie.
• Nadmiar niewykorzystanej powierzchni
  Osobom posiadającym nadmiar powierzchni zostają czasem tylko wydatki na niewykorzystaną powierzchnię.

Mając świadomość powyższych problemów, przystąpiłem do badań. Pierwszą rzeczą, którą zrobiłem, była jak zwykle analiza aplikacji i produktów konkurencji. W ten sposób wpadłem na kilka pomysłów, co mógłbym dodać do mojej aplikacji, ale co ważniejsze, znalazłem wady i niedociągnięcia w aplikacjach konkurencji. Moim ostatecznym celem było stworzenie najlepszej i najbardziej unikalnej aplikacji do tego celu! Oprócz sprawdzenia aplikacji konkurencji, chciałem poznać użytkownika. W całym procesie projektowym moim priorytetem było myślenie o użytkowniku i jego potrzebach.

Persona użytkownika

Po dokładnym omówieniu podstawowych problemów, które rozwiązałaby moja aplikacja, oraz przeprowadzeniu szeroko zakrojonych badań potrzeb potencjalnych użytkowników, kolejnym krokiem było zidentyfikowanie idealnej osobowości użytkownika.

Burza mózgów

Po zidentyfikowaniu osobowości użytkownika miałem kilka sesji burzy mózgów. Na tym etapie zanotowałem prawie każdy pomysł, który przyszedł mi do głowy. Zrobiłem te notatki w FigJam i przeniosłem je później na specjalną stronę Figma przeznaczoną specjalnie dla tych pomysłów.

Jak widać na powyższym zrzucie ekranu, była sekcja poświęcona czystej burzy mózgów, a także sekcje dotyczące określonych głównych części aplikacji.

Mapa UX

Po tym, jak wpadłem na różne pomysły, skonstruowałem mapę UX. Istnieją trzy kolory ramek, z których każdy reprezentuje odrębną część aplikacji.

Tablica inspiracji

Jeśli chodzi o elementy interfejsu użytkownika mojej aplikacji, stworzyłem dużą tablicę inspiracji zawierającą ogromną liczbę różnych ekranów i ujęć z różnych aplikacji. Choć może trochę sprzeczne z intuicją, czerpałem inspirację z aplikacji podróżniczych, aplikacji społecznościowych, aplikacji do gotowania, aplikacji nawigacyjnych itp. Zwracałem uwagę na wszystkie elementy interfejsu użytkownika — kolory, pola wprowadzania, menu, ikony, przyciski, czcionki, ilustracje, karty itp. Zasadniczo wszystkie aplikacje mają dużą liczbę tych samych elementów interfejsu użytkownika.

Zapisałem wiele ujęć z Dribbble, Mobbin, Behance i podobnych platform na mojej stronie „Inspiration Board” w Figma. Wszystkie ujęcia podzieliłem na kategorie według ich przeznaczenia. W ten sposób istniało wiele odrębnych sekcji zawierających różne rodzaje ujęć.

Zadbałem również o to, aby zostawić notatki w postaci komentarzy Figmy do ujęć, aby przypominały mi dokładnie o tym, co zwróciło moją uwagę. Wiedziałem, że muszę tylko dostosować i naśladować prace różnych innych świetnych projektantów, aby moja aplikacja wyglądała świetnie! Aplikacje, z których czerpałem inspirację, były w większości używane na całym świecie i zostały zaprojektowane przez jednych z najlepszych ekspertów na świecie!

Modele szkieletowe Lo-Fi

Stworzyłem trzy sekcje modelu szkieletowego. Pierwszy jest uniwersalny i jest nim proces onboardingu. Pozostałe dwie sekcje to modele szkieletowe różnych widoków aplikacji , jedna dla hostów , a druga dla klientów . Po pobraniu aplikacji i zarejestrowaniu się użytkownika nadal można łatwo przełączać się między nimi. Na poniższych zrzutach ekranu widać, że prawie każdy ekran został wprowadzony w tym modelu szkieletowym.

Kiedy skończyłem szkielety, miałem o wiele jaśniejsze pojęcie o tym, jak mam zamiar kontynuować projekt. Ponadto, aby nie zapomnieć o moich myślach podczas tworzenia szkieletu, zostawiłem komentarze Figmy w niektórych obszarach ekranu, aby przypomnieć mi o moich planach dotyczących określonego elementu projektu.

System projektowy

Zastosowany przeze mnie krój pisma w połączeniu z kolorem motywu okazał się najlepszym rozwiązaniem. Ten odcień zielonego koloru wywołuje zaufanie, optymizm i ogólną pozytywność w umysłach użytkowników. Z drugiej strony DM Sans jako krój pisma oddaje poczucie nowoczesności, profesjonalizmu i przejrzystości. Czyste linie i zaokrąglone rogi sprawiają, że aplikacja jest przyjazna i przystępna, a ostre krawędzie sugerują precyzję.

Aby zwiększyć produktywność w procesie projektowania, stworzyłem style tekstu i kolorów. W ten sposób łatwiej i szybciej było zdecydować o kolorze niektórych elementów interfejsu użytkownika i zdecydować, jakiej czcionki użyję w określonym miejscu. Tworzenie stylów również ogromnie pomogło mi później w dokonywaniu modyfikacji w projekcie.

Jeśli chodzi o ikony, aby zachować spójny wygląd w całej aplikacji, użyłem jednego pakietu ikon i jednego rodzaju ikon. Nazwa pakietu ikon to „Heroicons” i zawierała prawie wszystkie ikony, których potrzebowałem, w formacie SVG (wektorowym). Ikony, których nie znalazłem, narysowałem piórem w Figmie. Upewniłem się, że są one zgodne pod względem rozmiaru i obrysu z ikonami z wcześniej wspomnianego pakietu ikon.

Źródło pakietu ikon:
https://heroicons.com/

Jeśli chodzi o ilustracje, których użyłem, to one również zostały zaczerpnięte z tego samego źródła ilustracji. Ponownie, spójność interfejsu użytkownika jest bardzo ważna!

Źródło ilustracji:
https://storyset.com/time

Ostateczny projekt

Jak wspomniano w rozdziale „Makiety Lo-Fi”, „Stash&Store” obejmuje dwa widoki aplikacji . Pierwszy koncentruje się na kliencie , a klient to typ użytkownika, który szuka magazynu do wynajęcia przez aplikację. Ten widok aplikacji ma pomóc klientowi w łatwym znalezieniu ofert przestrzeni dyskowej. Drugi widok aplikacji jest przeznaczony dla gospodarzy , którzy chcą wynająć swoje powierzchnie. W tym przypadku „Stash&Store” obsługuje użytkownika w określony sposób, który ułatwia zarządzanie jego ofertami.

Proces wdrażania sam w sobie jest względnie taki sam dla każdej aplikacji. W takim przypadku użytkownik ma oczywiście do dyspozycji dwie główne opcje — zarejestrować się lub zalogować. Podczas tworzenia konta użytkownicy są proszeni o określenie przeznaczenia „Stash&Store”. Jest to uwzględnione, ponieważ użytkownik może być zainteresowany tylko jednym widokiem aplikacji. Zgodnie ze swoim wyborem kontynuuje proces rejestracji.
Ci, którzy postępują jako gospodarze , są proszeni o natychmiastowe wypisanie swojej oferty lub pominięcie tej części i powrót do niej później. Gospodarze musieliby również zrobić zdjęcie swojego dowodu osobistego wydanego przez rząd, aby zweryfikować swoją tożsamość.
Jednak jedynym procesem weryfikacji obowiązkowym dla wszystkich użytkowników jest weryfikacja adresu e-mail.

Po zakończeniu procesu rejestracji klienta, użytkownicy są kierowani do ekranu Eksploruj, który służy również jako karta Strona główna. Stąd mogą wyszukiwać miejsce do przechowywania, wprowadzając żądaną lokalizację i mogą filtrować wyniki wyszukiwania. Na mapie wyświetlane są pinezki lokalizacji dostępnej pamięci. Po kliknięciu jednego z nich, w dolnej części ekranu pojawia się karta z ogólnymi informacjami na temat tego magazynu.
Kolejną ważną funkcją na tej karcie jest funkcja „Umieść punkt”. Kliknięcie przycisku w prawym dolnym rogu powoduje wyświetlenie na środku ekranu małej pinezki lokalizatora. Pozostaje w centrum, podczas gdy użytkownik przewija mapę. Gdy użytkownik umieści pinezkę w żądanym miejscu i ponownie naciśnie prawy dolny przycisk, na ekranie pojawią się wszystkie miejsca do przechowywania w pobliżu umieszczonej szpilki.

Po znalezieniu odpowiedniego magazynu klienci mogą wysłać zapytanie o dostępność online. Jak widać na drugim ekranie powyżej, klienci wybierają żądaną datę rozpoczęcia i mogą również napisać notatkę do gospodarza. Należy wspomnieć, że pełne zatwierdzenie prośby klienta nadal należy do gospodarza.
Jedną z rzeczy, które wprowadziłem do aplikacji, która pomaga klientom w podejmowaniu decyzji o przechowywaniu, są żetony osiągnięć . Chipy te pojawiają się na ekranie przechowywania i stanowią pewną formę gwarancji dla klienta, że ​​znalezione przez niego miejsce jest bezpieczne i niezawodne. Gospodarze to ci, którzy otrzymują te żetony poprzez weryfikację konta i określoną liczbę zawartych transakcji.

Gdy klient zarezerwuje miejsce na wynajem, może znaleźć ofertę w drugiej zakładce — moje wynajmy. W tej zakładce mają przegląd wszystkich złożonych przez siebie ofert. Kliknięcie jednej z kart otwiera ekran, na którym dana osoba może zobaczyć swoją ofertę, ale co ważniejsze, na którym może edytować i/lub anulować swoją rezerwację. W obu przypadkach proszeni są o potwierdzenie swojego działania, aby nie wykonać przypadkowego działania.

„Wiadomości” to trzecia zakładka w tej aplikacji. Jest również obecny w widoku aplikacji hosta, ponieważ jest mniej lub bardziej uniwersalny. Użytkownik może przeszukiwać czaty, usuwać rozmowy lub je archiwizować. Ponadto w przypadku widoku aplikacji klienta użytkownicy mogą wysyłać wstępnie wygenerowane często zadawane pytania (jak pokazano na trzecim ujęciu powyżej).

Ekrany profili dla obu widoków aplikacji są stosunkowo podobne. Na górze obu ekranów znajduje się przycisk, który zmienia widok aplikacji. Chciałem, aby ten przycisk był łatwo dostępny. Ponadto, jeśli gospodarz nie zweryfikował w pełni swojego konta, otrzymuje przypomnienie i zachętę do zakończenia weryfikacji. Taki jest cel tego zielonego, tętniącego życiem przycisku na górze drugiego ekranu.

W widoku aplikacji gospodarzy jedną z najważniejszych rzeczy jest zarządzanie rezerwacjami. Aby zapewnić bezproblemową obsługę hostów, priorytetowo potraktowałem zaprojektowanie intuicyjnego systemu zarządzania zgłoszeniami, który umożliwia im łatwe przeglądanie zgłoszeń i zarządzanie nimi.

Dodawanie i edytowanie ofert jest również kluczowe dla gospodarzy. Dodawanie przestrzeni, edytowanie ofert i przeglądanie recenzji powinno być łatwe.

Jeśli chodzi o zakładkę „wiadomości” w widoku hostów, jest ona taka sama dla obu widoków aplikacji. Jednak czaty są podzielone/rozdzielone między dwoma różnymi widokami aplikacji.

Wniosek

Podsumowując, aplikacja Stash&Store ma na celu rozwiązanie problemu bezpiecznych i niedrogich opcji przechowywania dla osób, które potrzebują dodatkowej przestrzeni na swoje rzeczy. Dzięki aplikacji najemcy mogą łatwo znaleźć i zarezerwować miejsce do przechowywania, a gospodarze mogą zarabiać na niewykorzystanej przestrzeni.

Jeśli spodobało Ci się moje studium przypadku, nie zapomnij poklepać tego artykułu 50 razy.
Wskazówka: spróbuj przytrzymać przycisk klaskania :)

Kontakt

Zapraszam do kontaktu :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/