Projekt aplikacji end-to-end dla platformy wynajmu MooC
Projekt obejmował stworzenie systemu wynajmu ciężkiego sprzętu dla jednej z największych firm w USA. Rzućmy okiem.
Tło
MooC to największa wypożyczalnia ciężkiego sprzętu w Stanach Zjednoczonych. Działa jak Airbnb dla maszyn budowlanych.
Opis projektu
Projektowanie nowych funkcji, które umożliwią użytkownikom natychmiastowy dostęp do danych w czasie rzeczywistym, zamiast wysyłania e-maili i dzwonienia do obsługi klienta. Projektowanie aplikacji dla klientów oraz kluczowych funkcji, takich jak dashboard z danymi wynajmu i finansami, zamówienia masowe oraz narzędzia do raportowania.
Zespół
Projektantka UI/UX w zespole 4 osób. Firma MooC postanowiła stworzyć aplikacje usprawniające proces zamawiania sprzętu zarówno dla dostawców, jak i klientów. Wewnętrzna aplikacja, nazwana ekosystemem MooC, składa się z czterech różnych aplikacji obsługujących różne funkcje dla zespołów, takie jak księgowość, zarządzanie zamówieniami, sprzedaż i realizacja oraz baza danych dostawców. Moim obowiązkiem było projektowanie aplikacji dla użytkowników zewnętrznych i wsparcie zespołu w pracy nad pozostałymi aplikacjami. Wspólnie z Magdą stworzyłyśmy design system dla Aplikacji Klienta i Aplikacji Dostawcy, następnie każda z nas był odpowiedzialny za jedną z aplikacji.
Wyzwanie
Szybki rozwój MooC doprowadził do złożonego i rozdrobnionego systemu, co wymagało przeprojektowania pod kątem wydajności. Wykorzystując metodologię Atomic Design, zbudowałyśmy komponenty, w wyniku czego powstał design system zawierający ponad 2000 elementów. Wykorzystałyśmy bibliotekę MUI React, dostosowując ją do konkretnych wymagań MooC.
Etapy projektu
W naszym procesie wykorzystałam model Double Diamond, aby skutecznie kierować naszą pracą. W skrócie, zebrałam dane i określiłam wymagania projektowe. Zidentyfikowałam kluczowe problemy, dopracowałam architekturę informacji, stworzyłam site map, zaprojektowałam szeroki design system, przygotowałam prototypy do przeprowadzenia user testing oraz napisałam scenariusz do testów.
Użyłam tych narzędzi:
Usprawnienie sklepu internetowego
Aby usprawnić cały system zamówień, zoptymalizowaliśmy sklep internetowy, aby wyszukiwanie produktów i dokonywanie zakupów było szybsze i łatwiejsze. Otrzymałam dane dotyczące person od klienta, a następnie przeanalizowałam architekturę informacji, identyfikując miejsca, w których użytkownicy napotykali trudności, oraz zyskałam wgląd w ich modele mentalne.
Nie mieliśmy bezpośredniego dostępu do użytkowników, więc przeprowadziłam tree testing z zespołem klienta. Pomogło to usprawnić architekturę informacji i zidentyfikować zbędne treści. Zespół przeprowadzili analizę konkurencji, a przez cały proces projektowy ściśle współpracowałyśmy w zespole 4 osób, zapewniając spójne i skuteczne rozwiązanie.
Aplikacja klienta
MooC musiało usprawnić procesy zakupu, zamawiania i zarządzania realizacją bez polegania na rozmowach telefonicznych. Wcześniej ich klienci zarządzali placami budowy za pomocą telefonów lub e-maili. Wdrożenie mojej pracy przyniosło większą efektywność, poprawiając ogólny przepływ pracy.
Develop stage
Stworzyłam user flow, sitemap i wireframe lo-fi, aby odwzorować interakcje użytkowników i strukturę treści, udoskonalać koncepcje projektowe i poprawić ogólne wrażenia użytkownika.
Design system
Stworzenie kompleksowego i starannie ustrukturyzowanego systemu projektowania było przełomową zmianą dla MooC.
Zapewniło to spójność wszystkich produktów, jednocześnie umożliwiając skalowalny wzrost przy minimalnym wysiłku.
Projekt UI
Dla trzech grup docelowych korzystających z aplikacji w różnych warunkach uprościłam interfejs, aby maksymalnie zwiększyć jego efektywność. Umieściłam nawigację w widocznym pasku bocznym, aby łatwo można było znaleźć potrzebne funkcje. Zaprojektowałam przejrzysty układ, intuicyjne wyszukiwanie i filtrowanie, czytelne dane, łatwy dostęp do pomocy, wyraźne przyciski CTA oraz szybkie odpowiedzi na działania użytkowników.
Dzięki tym rozwiązaniom aplikacja jest prosta i wygodna w użyciu, bez względu na to, gdzie się z niej korzysta.
Proces był dokładny i metodyczny. Rozpoczęłam od zebrania szczegółowych informacji o firmie i jej klientach, aby ustalić jasne cele użytkowników. Następnie stworzyłam user flows, sitemaps, wireframes i UI. Korzystając z Figma, opracowałam interaktywne prototypy i przeprowadziłam dokładne scenariusze testów użytkowników.
Ciekawi Cię wynik? Przejdźmy do ostatniej części.
User testing
Przygotowałam prototyp z określonymi celami i zadaniami, aby ocenić użyteczność produktu. Stworzyłam scenariusz testów, opracowałam matrycę oceniania i dostarczyłam wytyczne dla przeprowadzających wywiady na temat tego, jak prowadzić rozmowy z użytkownikami i zadawać istotne pytania.
Ustaliłam następujące cele:
- Identyfikacja problemów w projekcie produktu lub usługi
- Odkrywanie możliwości ulepszeń
- Poznanie zachowań i preferencji docelowych użytkowników
Prototypy
Wykonałam prototypy dla wersji desktopowej i mobilnej oraz opracowałam wytyczne dla prowadzących, zawierające wszystkie wymagane informacje, takie jak ustawienia dotyczące rozdzielczości, dostosowanie do szerokości ekranu uczestnika lub ukrywanie interfejsu Figma itp.
Testowanie celów
Ustaliłam cel testów na przykład ocenę, czy portal jest dostępny dla użytkowników, oraz bardziej szczegółowe odniesienia do funkcji aplikacji.
Pytania przesiewowe
Uczestnicy zostali dostarczeni przez klienta, dlatego pytania wstępne przed testem nie były potrzebne. Zamiast tego użyłam pytań rozgrzewających, aby poznać, jak zazwyczaj wygląda ich dzień pracy i jakich narzędzi używają. Dało mi to szerszy kontekst do zadawania pytań testowych.
Wskaźnik sukcesu
Chciałam ocenić, czy użytkownik ukończył zadanie, napotkał przeszkody w jego realizacji i wybrał inną drogę do ukończenia zadania, czy też nie zakończył zadania.
Pytania testowe
Ustaliłam 7 zadań, pytania oraz kryteria sukcesu dla każdego z nich, na przykład: Znajdź aktywny [specyficzny kontrakt], przejrzyj go i złoż zamówienie na ten kontrakt.
Kryteria sukcesu
Uczestnicy mogą łatwo znaleźć określone miejsce pracy i dokładnie je uporządkować. Pytania: Jak łatwo było rozwiązać zadanie w skali od 1 do 5? (gdzie 1 oznacza bardzo trudne, a 5 oznacza bardzo łatwe). Czy masz jakieś uwagi, zanim przejdziemy do następnego zadania?
Miara SUS
Użyłam serii 10 pytań w skali Likerta do pomiaru użyteczności całego systemu, aby zebrać spostrzeżenia uczestników i określić pułapki użyteczności.
E-mail uzupełniający
Ostatnim krokiem było poinformowanie o otrzymaniu e-maila po spotkaniu i zachęcenie do pozostawienia dodatkowych informacji zwrotnych.
Wnioski
Dzięki temu projektowi moje umiejętności znacznie się rozwinęły. Skutecznie stawiłam czoła wyzwaniom UX, co pozwoliło mi poprawić działanie aplikacji i stworzyć intuicyjne interfejsy, które skutecznie odpowiadają na różnorodne potrzeby użytkowników.
Chcesz zwiększyć konwersje swojego produktu? Niezależnie jakie masz cele, napisz hello@joannarybak.com i sprawdź, jak mogę pomóc Ci je osiągnąć.
Grzegorz Zięba
co-founder @Ikona, co-founder @Design Allies
Następny projekt
Zobacz, jak ożywiłam tę historię dzięki prostej, ale skutecznej animacji.
