Opis projektu

Projekt został stworzony w celu szybkiej nawigacji
pomiędzy kilkoma placówkami firmy zajmującej się
zakwaterowywaniem pokoi akademików.

Naszym celem było stworzenie prostej i czystej strony,
która miała pomóc serwisantom Basecamp poruszać
się po ich zadaniach. Doszliśmy do wniosku, że jest
to trudne zadanie. Ze względu na powtarzające się
moduły, podobne informacje i niezbyt skomplikowany
interfejs, musieliśmy skupić się na czytelności
i dostępie do informacji. Dodatkowym czynnikiem
były różne warunki pracy, aplikacja musiała być
zawsze czytelna.

Szczegóły projektu

Użyte narzędzia: Adobe XD, Photoshop, Ilustrator

Strona klienta: Basecamp

Tagi: UX, UI, aplikacja, studia

Witamy

Projekt aplikacji mobilnej

wykonany dla domów akademickich w celu szybszego zarządzania pokojami oraz orientacji na terenie akademika.

Cele projektu

Projekt został stworzony w celu szybkiej nawigacji
pomiędzy kilkoma placówkami firmy zajmującej się
zakwaterowywaniem pokoi akademików.

  • Przejżysta oraz prosta aplikacja

  • Przedstawiony profesjonalizm firmy

  • Łatwa dostępność w każdych warunkach

Flows

Ważnym elementem tworzenia strony jest świadome projektowanie. Aby skrócić czas i poprawić doznania odwiedzającego w trakcie korzystania ze strony, została stworzona mapa poruszania po niej, która następnie w procesie eliminacji została uszczuplona do zminimalizowania potrzebnych kroków do wybranych funkcji.

Makiety

Makiety pozwalają sprawdzić płynność wizualną serwisu oraz przetestować najlepsze rozwiązania i rozmieszczenie elementów. Pozwalają również uniknąć problemów z wyświetlaniem na telefonie lub tablecie.

Styl graficzny

W tym miejscu przedstawione zostaną założenia stylu graficznego. Pozwoli to przedstawić drogę procesów projektowych oraz wyjaśnić zastosowane rozwiązania.

Kolory

Odcienie niebieskiego zostały wybrane ponieważ kolor ten jest uważany za uniwersalny i jest najbardziej lubiany na świecie. Kojarzy się z intelektem, wiedzą, komunikacją i doświadczeniem a dodatkowo wzmacnia koncentrację.

Typografia

Helvetica jako krój pisma został wybrany ze względu na swoją czytelność. Używany w wielu miejscach takich jak na przykład znaki na ulicach, oznaczenia ewakuacyjne i inne tego typu, potwierdza jedynie czytelność kroju. Czysty, bezszeryfowy, współczesny pasujący do aplikacji.

Widoki UI

Naszym celem było stworzenie prostej i czystej strony, która miała pomóc serwisantom Basecamp poruszać się po ich zadaniach. Doszliśmy do wniosku, że jest to trudne zadanie. Ze względu na powtarzające się moduły, podobne informacje i niezbyt skomplikowany interfejs, musieliśmy skupić się na czytelności i dostępie do informacji. Dodatkowym czynnikiem były różne warunki pracy, aplikacja musiała być zawsze czytelna.

Płynne przejścia

Starając się uzyskać czysty styl, ale bez utraty autentyczności profesjonalnego wykonania skupiliśmy się na płynnych animacjach kształtów.

Oko na wszystko

Ze względu na ilość informacji, które musieliśmy pokazać na jednym ekranie, postawiliśmy na prosty pasek postępu i dalej wyświetlane dane. Nawiązując do założeń klienta, szybki podgląd raportu, procent wykonania czy miejsca wymagające działania widoczne są od pierwszego widoku, natomiast dalsze szczegółowe informacje po rozwinięciu.

Szybka wyszukiwarka

Aby maksymalnie usprawnić nawigację po stronie, stworzyliśmy pasek wyszukiwania. Ze względu na to, że strona opiera się na ciągłym wchodzeniu w nią głębiej poprzez odwiedzanie pokoi i podstron, wracanie mogłoby być męczące. Dzięki paskowi wyszukiwania jesteśmy w stanie szybko zmienić naszą lokalizację za pomocą dwóch kliknięć. Jeśli jednak nie chcemy klikać, możemy użyć skrótu klawiaturowego jak w przykładzie po prawej stronie.

Inteligentne mapy

Aby kontrolować jak przebiega praca lub po prostu znaleźć miejsce/pomieszczenie, które wymaga jeszcze interwencji pracownika, postanowiliśmy dodać mapę. Oprócz wskazania stanu lub miejsca, mapa pokazuje również drogę do celu.