Przewodnik po wyzwaniach i doskonaleniu się na stażu w zakresie projektowania UX
Opublikowany: 2022-03-10Oto opowieść o moim stażu projektowym. Nie mówię, że twój staż będzie podobny do mojego. W rzeczywistości, jeśli mogę powiedzieć jedną rzecz, aby ukształtować twoje oczekiwania, byłoby to: bądź gotów odłożyć je wszystkie na bok. Przede wszystkim pamiętaj, aby dać sobie przestrzeń i czas na naukę . Dzielę się moją historią jako przypomnienie tego, jak bardzo się zmagałem i jak dobrze wszystko poszło pomimo moich trudności, tak że nigdy nie przestanę próbować, a ty też nie.
Wszystko zaczęło się w maju 2018 roku, kiedy wysiadłem z samolotu w Granadzie w Hiszpanii z bagażem przy boku, laptopem na plecach i bardzo zardzewiałym hiszpańskim w głowie. To był mój pierwszy raz w Europie i będę tu przez następne trzy miesiące na stażu w projektowaniu UX w Badger Maps. Nadal byłem dość zielony w UX, ucząc się o tym zaledwie rok w tym momencie, ale czułem się gotowy i chętny do zdobycia doświadczenia w profesjonalnym otoczeniu.
Śledź, jak nauczyłem się stosować wiedzę techniczną, aby wykonać przydzielone mi praktyczne zadania projektowe:
- Stwórz system projektowania dla naszej aplikacji na iOS za pomocą Sketch;
- Zaprojektuj nową funkcję wyświetlającą błędy występujące podczas importu danych;
- Naucz się podstaw HTML, CSS i Flexbox, aby zaimplementować mój projekt;
- Twórz animacje za pomocą programów Adobe Illustrator i After Effects.
Ten artykuł jest przeznaczony dla początkujących, takich jak ja . Jeśli jesteś nowy w projektowaniu UX i chcesz poznać tę dziedzinę — czytaj dalej, aby dowiedzieć się, czy staż projektowania UX jest dla Ciebie odpowiedni! Dla mnie praca, którą zakończyłem, znacznie przekroczyła moje oczekiwania. Nauczyłem się, jak projektować system, jak iść na kompromis projekt z potrzebami użytkownika, wyzwaniami związanymi z wdrażaniem nowego projektu i jak stworzyć „chwile rozkoszy”. Każdego dnia na stażu prezentowaliśmy coś nowego i nieprzewidywalnego. Pod koniec mojego stażu zdałem sobie sprawę, że stworzyłem coś realnego, coś namacalnego i jakby wszystko, z czym się zmagałem, nagle znalazło się na swoim miejscu.
Zalecana literatura : Jak zdobyć pierwszorzędny staż w projektowaniu graficznym
Rozdział 1: Lego
Moim pierwszym zadaniem było stworzenie systemu projektowego dla naszej istniejącej aplikacji na iOS. W przeszłości tworzyłem systemy projektowe dla własnych projektów i aplikacji, ale nigdy nie robiłem ich retrospektywnie i nigdy dla projektu, który nie był mój. Aby ukończyć zadanie, musiałem wykonać inżynierię wsteczną makiet w programie Sketch; Najpierw musiałbym zaktualizować i zoptymalizować plik, aby stworzyć system projektowania.
To było również w tym dogodnym momencie, kiedy dowiedziałem się, że program Sketch na moim komputerze był przestarzały od około półtora roku. Nie wiedziałem o żadnych symbolach, przesłonięciach i innych funkcjach w nowszych wersjach. Wyciągnięta lekcja: aktualizuj oprogramowanie.
Zanim zacząłem martwić się o stronę symboli, przejrzałem makietę według obszaru roboczego, upewniając się, że są one zaktualizowane i zgodne z aktualnie wydaną wersją aplikacji. Kiedy to zrobiłem, zacząłem tworzyć symbole i nadpisania dla różnych elementów. Zacząłem od nagłówka i stopki, po czym przeszedłem dalej.
Z reguły, jeśli element pojawił się na więcej niż jednej stronie, uczyniłbym go symbolem. Po drodze dodawałem różne ikony do systemu projektowania, rozbudowując bibliotekę. Jednak szybko stało się jasne, że system projektowania ewoluował i zmieniał się szybciej, niż mogłem próbować go uporządkować. W połowie przestałem próbować uporządkować symbole, zamiast tego zdecydowałem się wrócić i zreorganizować je po zakończeniu odtwarzania każdej strony. Kiedy przestałem chodzić tam i z powrotem między makietami i symbolami i martwić się o organizację dla obu, mogłem pracować wydajniej.
Łatwo było docenić przesłonięcia i symbole w Sketchu. Funkcje sprawiły, że program był znacznie potężniejszy niż to, do czego byłem przyzwyczajony, i zwiększyły funkcjonalność pliku w przyszłych projektach. Samo zadanie stworzenia systemu projektowania wymagało ode mnie zagłębienia się w program oraz zrozumienia wszystkich szczegółów projektu naszej aplikacji . Zacząłem zauważać małe niespójności w odstępach, rozmiarze ikon lub rozmiarach czcionek, które mogłem poprawić podczas pracy.
Ostatnim krokiem było powrót do strony symboli i uporządkowanie wszystkiego. Wypielęgnowałem wszystkie symbole, usunąłem te nieużywane i wszelkie repliki. Mimo że był trochę żmudny, był to bardzo cenny krok w całym procesie . Przeglądanie symboli po przejrzeniu dokumentu dało mi szansę na ponowną ocenę sposobu, w jaki stworzyłem symbole dla każdej strony. Pogrupowanie ich razem zmusiło mnie do zastanowienia się, w jaki sposób były powiązane w całej aplikacji.
Przechodząc przez ten proces myślowy, zdałem sobie sprawę, jak trudne było stworzenie systemu nazewnictwa. Musiałem stworzyć system wystarczająco szeroki, aby objąć wystarczającą ilość elementów, wystarczająco specyficzny, aby uniknąć niejasności i który mógłby łatwo zrozumieć inny projektant. Zajęło mi kilka prób, zanim wylądowałem na działającym systemie, z którego byłem zadowolony. Ostatecznie uporządkowałem elementy według miejsca ich użycia w aplikacji , grupując elementy, takie jak listy. Działało dobrze w przypadku aplikacji takiej jak Badger, która miała różne projekty dla różnych funkcji w aplikacji. Ostateczny produkt był bardziej zorganizowanym plikiem, z którym łatwiej byłoby pracować w przyszłych iteracjach projektowych.
Jako zwieńczenie tego projektu eksperymentowałem z modernizacją projektu. Przeprojektowałem nagłówki w całej aplikacji, czerpiąc inspirację z natywnych aplikacji Apple. Na szczęście zespół również był tym podekscytowany i rozważa wprowadzenie zmian w przyszłych aktualizacjach aplikacji.
Ogólnie rzecz biorąc, praca nad tak szczegółowym plikiem Sketch była niespodziewanie pomocnym doświadczeniem. Wyszedłem z dużo lepszym podstawowym zrozumieniem takich rzeczy, jak rozmiar czcionki, kolor i odstępy dzięki przerabianiu każdej strony. Ćwiczenie polegające na skopiowaniu istniejącego projektu wymagało drobiazgowej dbałości o szczegóły, co było bardzo satysfakcjonujące. To było jak składanie modelu Lego: miałem wszystkie elementy i wiedziałem, jak powinien wyglądać produkt końcowy. Wystarczyło wszystko uporządkować i poskładać, aby stworzyć gotowy produkt. To jeden z powodów, dla których lubię projektować UX. Chodzi o rozwiązywanie problemów i układanie puzzli, aby stworzyć coś, co każdy może docenić.
Rozdział 2: Projekt
Kolejna część mojego stażu pozwoliła mi zagłębić się w chwasty przy pracach projektowych. Zadanie: zaprojektować nową stronę importu dla aplikacji webowej Badger.
Zespół pracował nad przeprojektowaniem borsuka do integracji z CRM, aby stworzyć system, który umożliwi użytkownikom przeglądanie wszelkich synchronizacji danych i samodzielne zarządzanie kontami. Obecne połączenie wymaga wielu praktycznych prac ze strony CSA i AE borsuków w celu skonfigurowania i utrzymania. Udostępniając interfejs umożliwiający użytkownikom bezpośrednią interakcję z importem danych , chcieliśmy poprawić komfort użytkowania naszej integracji z CRM.
Moim celem było zaprojektowanie strony, która wyświetlałaby błędy występujące podczas importu danych, a także informowałaby użytkowników o tym, jak i gdzie dokonać niezbędnych zmian w swoich danych. Gdyby było więcej błędów związanych z pojedynczym importem lub użytkownicy chcieliby wyświetlić wszystkie błędy naraz, powinni mieć możliwość pobrania pliku Excel zawierającego wszystkie te informacje.
Cele
- Utwórz stronę importu, która informuje użytkownika o statusie importu w toku;
- Zapewnij historyczny zapis synchronizacji kont między Badger a CRM ze szczegółowymi błędami związanymi z każdym importem;
- Podaj linki do CRM dla każdego konta, które ma błąd importu w Badger;
- Zezwól użytkownikom na pobranie pliku Excela ze wszystkimi zaległymi błędami.
Historie użytkownika
Klient borsuka z kontem CRM :
Jako klient z CRM chcę mieć możliwość połączenia mojego CRM z moim borsukiem i wizualizacji wszystkich synchronizacji danych, abym był świadomy wszystkich błędów w procesie i mógł wprowadzać zmiany w razie potrzeby.
Borsuk :
Jako borsuk chcę, aby użytkownicy mogli zarządzać i wyświetlać status swojej integracji z CRM, aby zaoszczędzić czas i ręczną pracę, pomagając i rozwiązywać problemy z użytkownikami synchronizującymi borsuka z kontami CRM.
Zanim naprawdę zagłębiłem się w projekt, musieliśmy się zastanowić, aby zdecydować, jakie informacje pokazać i w jaki sposób:
- Import luzem a import ciągły
W zależności od typu użytkownika istnieją dwa sposoby importowania danych do Badgera. W przypadku korzystania z arkuszy kalkulacyjnych importy byłyby grupowane i moglibyśmy wizualizować importy w grupach. Użytkownicy zintegrowani z ich systemami CRM musieliby jednak stale aktualizować swoje dane Badgera, ponieważ wprowadzali zmiany w swoim CRM. Projekt musiał być w stanie obsłużyć oba przypadki użycia. - Importuj rekordy
Ponieważ była to nowa funkcja, nie byliśmy całkowicie pewni zachowania użytkownika. W związku z tym decyzja, jak uporządkować informacje, była nie lada wyzwaniem. Czy powinniśmy pozwolić użytkownikom na przewijanie w nieskończoność listy ich historii? Jak szukaliby konkretnego importu? Czy powinni być w stanie? Czy powinniśmy pokazywać aktywność dzień po dniu czy miesiąc po miesiącu?
Ostatecznie byliśmy w stanie jedynie odgadnąć każdy z tych problemów — wiedząc, że możemy wprowadzić odpowiednie poprawki w przyszłości, gdy użytkownicy zaczną korzystać z tej funkcji. Po przemyśleniu tych problemów przeszedłem do tworzenia szkieletów. Miałem okazję zaprojektować coś zupełnie innego i było to jednocześnie wyzwalające i wymagające. Ostateczny projekt był zwieńczeniem poszczególnych elementów z różnych projektów, które powstały po drodze.
Proces projektowania
Najtrudniejszą częścią tego procesu była nauka rozpoczynania od nowa. W końcu dowiedziałem się, że narzucanie czegoś w moim projekcie wyłącznie ze względów estetycznych nie jest idealne. Zrozumienie tego i uwolnienie moich pomysłów było kluczem do uzyskania lepszego projektu. Musiałem nauczyć się, jak zaczynać od nowa, aby odkrywać różne pomysły.
Wyzwania
1. Używanie spacji
Od samego początku musiałem zbadać, jakie informacje chcieliśmy pokazać na stronie. Mogliśmy zawrzeć wiele szczegółów — i zdecydowanie miejsce, w którym można to zrobić.
Wszystkie niepotrzebne informacje dodały zbyt dużego obciążenia poznawczego i odebrały to, o co faktycznie martwił się użytkownik. Zamiast próbować pozbyć się całej białej przestrzeni, musiałem z nią popracować. Mając to na uwadze, ostatecznie wyrzuciłem wszystkie nieistotne informacje, aby pokazać tylko to, o co oczekujemy, że nasi użytkownicy będą najbardziej zaniepokojeni: błędy związane z importowaniem danych.
To była ostateczna wersja:
2. Nawigacja
Kolejnym wyzwaniem było podjęcie decyzji między paskiem bocznym a nagłówkiem do wyświetlania informacji. Zaletą paska bocznego było to, że informacje były stale widoczne podczas przewijania przez użytkownika. Ale musieliśmy również upewnić się, że informacje zawarte na pasku bocznym są logicznie powiązane z tym, co dzieje się w pozostałej części strony.
Nagłówek oferował zaletę czystej, jednokolumnowej konstrukcji. Minusem było to, że zajmował dużo pionowych nieruchomości w zależności od tego, ile informacji zawierało nagłówek. Ponadto wizualnie nadawał priorytet zawartości nagłówka przed tym, co znajdowało się pod nim dla użytkownika.
Kiedy ustaliłem, jakie informacje mają być wyświetlane, nawigacja na pasku bocznym stała się bardziej logiczną decyzją. Spodziewamy się, że użytkownicy będą głównie zaniepokojeni błędami związanymi z ich importowaniem i dużym nagłówkiem, ponieważ zbyt wiele z tych informacji znajdzie się w części strony widocznej na ekranie. Pasek boczny mógłby wówczas być kontenerem na import i podsumowanie aktywności, który byłby widoczny podczas przewijania przez użytkownika.
Projekt paska bocznego : po tym, jak zdecydowałem się na posiadanie paska bocznego, sprowadzałem się do podjęcia decyzji, jakie informacje umieścić i jak je wyświetlić.
Miałem problemy ze stworzeniem projektu, który byłby interesujący wizualnie, ponieważ było mało informacji do pokazania. Z tego powodu po raz kolejny znalazłem się w dodawaniu niepotrzebnych elementów, aby wypełnić przestrzeń, chociaż chciałem nadać priorytet użytkownikowi. Eksperymentowałem z różnymi treściami i kombinacjami kolorystycznymi , próbując znaleźć kompromis między designem a użytecznością. Im dłużej nad nim pracowałem, tym bardziej byłem w stanie przeanalizować projekt do nagich kości. Łatwiej było odróżnić przydatne informacje od wypełniaczy. Produkt końcowy to uproszczony projekt z zaledwie kilkoma statystykami podsumowującymi. Oferuje również dużą elastyczność, aby w przyszłości uwzględnić więcej informacji.
Proces importu : strona postępu importu została utworzona po sfinalizowaniu projektu strony importu. Największym wyzwaniem projektowym tutaj było podjęcie decyzji, jak wyświetlić synchronizację importu w toku. Próbowałem różnych rozwiązań z wyskakujących okienek i nakładek, ale ostatecznie zdecydowałem się na pokazywanie postępów na pasku bocznym. W ten sposób użytkownicy mogą nadal usuwać wszelkie błędy i przeglądać historyczny zapis danych swojego konta podczas trwania importu. Aby zapobiec przerwom w imporcie, przyciski „Synchronizuj dane” i „Powrót do borsuka” są wyłączone, aby użytkownicy nie mogli opuścić strony.
Po wykonaniu projektów przeszedłem na HTML i CSS.
Rozdział 3: HTML/CSS
Ten projekt był moim pierwszym doświadczeniem z jakimkolwiek rodzajem kodowania. Chociaż próbowałem wcześniej nauczyć się HTML i CSS, nigdy nie osiągnąłem żadnego poziomu biegłości. A czy jest lepszy sposób na rozpoczęcie niż makieta własnego projektu?
Zrozumienie logiki organizowania dokumentu HTML przypomniało mi o zorganizowaniu dokumentu Sketch za pomocą symboli i nadpisań. Na tym jednak podobieństwa się kończyły. Kodowanie wydawało mi się czymś bardzo obcym, nad którym konsekwentnie starałem się owinąć głową. Jak powiedziałby mój mentor: „ Podczas programowania napinasz zupełnie inne mięśnie niż podczas projektowania ”. Mając gotowy produkt, jestem w pełni przekonany, że nauka kodowania to najfajniejsza rzecz, jakiej nauczyłem się od czasu nauki korzystania z nocnika.
Pierwszym wyzwaniem, po przygotowaniu dokumentu i zrozumieniu podstaw, była praca z Flexboxem. Projekt, który stworzyłem, obejmował dwie kolumny obok siebie. Prawa część miała się przewijać, podczas gdy lewa pozostała statyczna. Flexbox wydawał się czystym rozwiązaniem do tego celu, zakładając, że uda mi się go uruchomić.
Wdrożenie Flexboksa polegało na wielu próbach i błędach oraz ślepym kopiowaniu kodu, podczas gdy ja przeszukiwałem różne strony internetowe, czytałem samouczki i sprawdzałem kod. Dzięki wskazówkom mojego mentora przez cały ten proces w końcu udało nam się to uruchomić. Nigdy nie zapomnę momentu, kiedy w końcu zrozumiałem, że używając flex-direction: column umieściłbym wszystkie elementy w jednej kolumnie, a flex-direction: row pomógł umieścić je w jednym wierszu.
Teraz ma to tyle sensu, chociaż moje początkowe zrozumienie było dokładnie przeciwne (myślałem, że flex-direction: column umieści elementy w kolumnach obok siebie). Co zaskakujące, nie zdałem sobie z tego sprawy, dopóki kod nie zadziałał. Przeglądałem swój kod i zdałem sobie sprawę, że w ogóle go nie rozumiem. Co mnie uprzedziło? W moim CSS zakodowałem flex-direction: row do klasy, którą nazwałem column . Ten scenariusz dość dobrze wskazywał, jak poszła reszta mojego pierwszego doświadczenia z kodowaniem. Mój model mentalny rzadko był zgodny z logiką kodu i często kolidowały i rozchodziły się. Kiedy to się stało, musiałem wrócić, znaleźć swoje błędne przekonania i poprawić kod.
Po skonfigurowaniu Flexbox musiałem dowiedzieć się, jak ustawić lewą kolumnę, gdy prawa część się przewija. Okazuje się, że nie można tego osiągnąć za pomocą jednej linii kodu, jak się spodziewałem. Ale przepracowanie tego pomogło mi zrozumieć relację rodzic-dziecko, która pomogła mi ogromnie w dalszej części procesu.
Kodowanie pionowej osi czasu i tarczy również było procesem. Oś czasu była prostsza, niż początkowo przewidywałem. Udało mi się stworzyć cienki prostokąt, ustawić do niego cień wewnętrzny i wypełnienie gradientowe oraz przypisać go do szerokości każdego dziennika aktywności.
Tarcza była trudna. Próbowałem zaimplementować go za pomocą czystego CSS z bardzo małym sukcesem. Kilka razy rozważałem zmianę projektu na coś prostszego (takiego jak pasek postępu), ale jestem całkiem zadowolony, że się z tym uporałem.
Najważniejszą walką było uzyskanie zewnętrznego wskaźnika postępu, aby zakrył okrąg w tle wzdłuż granicy. W tym miejscu nieco zmieniłem projekt — zamiast wycinać rozładowaną część pokrętła postępu, nakłada się ono dookoła. Był to kompromis między moim projektem a kodem, którego początkowo nie chciałem tworzyć. Okazuje się jednak, że efekt końcowy mnie zadowolił i gdy już to zdałem sobie sprawę, z radością poszedłem na ten kompromis. Ostateczna tarcza została zaimplementowana za pomocą JavaScript.
Był taki moment w moim procesie kodowania, w którym wrzuciłem każdy wiersz kodu, który kiedykolwiek napisałem, do każdej klasy, aby spróbować, aby działał. Aby zrekompensować ten brak perspektywy, musiałem poświęcić trochę czasu na przeglądanie i sprawdzanie wszystkich elementów, aby usunąć bezużyteczny kod . Czułem się jak właściciel wyrzucający lokatorów, którzy nie płacili czynszu. Z całą pewnością była to lekcja nauczona w utrzymywaniu odpowiedniego poziomu utrzymania porządku oraz rozsądnym i rozważnym posługiwaniu się kodem.
Większość tego doświadczenia przypominała przechodzenie na ślepo i naukę retrospektywną. Jednak nic nie było bardziej satysfakcjonujące niż zobaczenie gotowego produktu. Przejście przez ten proces sprawiło, że wszedłem w interakcję z moją pracą w sposób, którego nigdy wcześniej nie robiłem, i dało mi wgląd w to, jak projekt jest wdrażany. We wszystkich moich oczekiwaniach na staż nigdy nie spodziewałem się, że będę w stanie kodować i tworzyć własne projekty. Nawet po tym, jak powiedziano mi, że będę mógł to zrobić pierwszego dnia, nie wierzyłem w to, dopóki nie zobaczyłem ukończonej strony.
Rozdział 4: Praca z małymi borsukami
W ramach procesu integracji użytkowników Badgera z ich kontami CRM potrzebowaliśmy naszych użytkowników do zalogowania się do ich CRM — co wymagało od nas przekierowania ich z borsuka do natywnej witryny CRM. Aby zapobiec nagłemu, irytującemu przejściu z jednej witryny na drugą, musiałem zaprojektować strony pośrednie wczytujące się.
Zacząłem od Twojej zwyczajnej statycznej strony przekierowującej. Były proste i zdecydowanie spełniły swój cel, ale nie byliśmy z nich całkiem zadowoleni.
Wyzwaniem było stworzenie czegoś prostego i ciekawego, który w ciągu kilku sekund informował użytkownika o opuszczaniu naszej strony. Projekt musiałby się przedstawić, wyjaśnić, dlaczego tam był, i odejść, zanim ktokolwiek zmęczy się patrzeniem na niego. Zasadniczo było to ćwiczenie z szybkich randek. Mając to na uwadze, postanowiłem wypróbować animacje — konkretnie zuchwałego małego borsuka, inspirowane istniejącym logo.
Używając logo borsuka jako punktu odniesienia, stworzyłem różne postacie borsuka w programie Adobe Illustrator. Oryginalne logo wydawało się trochę zbyt surowe dla animacji ładowania, więc zdecydowałem się na coś ładniejszego. Zachowałem czerwoną klatkę piersiową i rysy twarzy z oryginalnego logo dla spójności i pracowałem nad stworzeniem ciała i głowy wokół tych elementów. Chwilę trwało masowanie głowy i pasków w kształty, z których byłam zadowolona. Ciało przybrało nieco łatwiejszą formę, ale znalezienie odpowiedniej proporcji między wielkością głowy a tułowiem zajęło trochę więcej czasu. Kiedy już to przybiłam, byłam gotowa przejść do animacji.
Moim pierwszym odruchem było wypróbowanie animacji poklatkowej. Pomyślałem, że będzie świetnie — a la Wallace i Gromit. Ale po pierwszej próbie, potem drugiej i wszystkich kolejnych, stało się jasne, że oglądanie tego spektaklu jako dziecko nie wyposażyło mnie w pełni w umiejętności wymagane do wykonania animacji poklatkowej.
Po prostu nie byłem w stanie osiągnąć pożądanej płynności i pojawiły się małe niespójności, które wydawały się zbyt drażniące dla bardzo krótkiej animacji ładowania. Animacja zwykle działa z szybkością 23 klatek na sekundę, a moja animacja borsuka miała tylko około 15 klatek na sekundę. Rozważałem dodanie większej liczby klatek, ale po sugestii mojego mentora postanowiłem zamiast tego spróbować animacji postaci.
To był pierwszy raz, kiedy animowałem coś, co miało więcej niż 5 ruchomych części i zdecydowanie trzeba było się nauczyć, jak animować dwuwymiarową postać w satysfakcjonujący wizualnie sposób. Musiałem ożywić poszczególne elementy, aby poruszały się samodzielnie, niezależnie od całości, aby ruch był wiarygodny. Podczas pracy nad animacją importowane przeze mnie warstwy stawały się coraz bardziej ziarniste. Głowa przeszła z jednej warstwy do piątej, gdy nauczyłem się zachowania programu i tego, jak wprawić borsuka w ruch.
Zakotwiczyłem każdą kończynę ciała i jako dziecko ustawiłem każdą część ciała w macierzystej warstwie ciała. Ustawiłem punkty zakotwiczenia odpowiednio na górze ud i ramion, aby upewnić się, że poruszają się odpowiednio, a następnie, używając obrotów i luzów, symulowałem ruch części ciała. Głowa była nieco trudna i wymagała pewnego pionowego ruchu niezależnie od ciała. Aby skok wydawał się bardziej realistyczny, chciałem, aby głowa zawisła trochę w przestrzeni, zanim reszta ciała wypchnęła ją w górę, i opadła tuż za resztą ciała. Poprawiłem również kąt, pod jakim starałem się, żeby wyglądał tak, jakby prowadził nosem, skierowanym w górę podczas skoku i prosto podczas biegu.
Animacja na stronie przekierowująca użytkownika z powrotem do borsuka przedstawiała małego borsuka biegnącego z powrotem do borsuka z plecakiem pełnym informacji z CRM.
I wreszcie: zdezorientowany borsuk. Zostało to zrobione dla ostatniej strony, którą musiałem stworzyć: strony błędu powiadamiającej użytkownika o nieoczekiwanych komplikacjach w procesie integracji. A czy jest lepszy sposób na zrobienie tego niż współczujący, zdezorientowany borsuk?
Trudną częścią było połączenie bocznego profilu istniejącego borsuka z kreskówek i logo w celu stworzenia przedniego kształtu głowy. Przed rozpoczęciem tego projektu nigdy nie widziałem prawdziwego żywego borsuka. Nie trzeba dodawać, że Badger znalazł się w moim wyszukiwaniu grafiki w Google w tym miesiącu. Byłem zaskoczony, jak płaska jest głowa borsuka. W moich pierwszych kilku projektach próbowałem to naśladować, ale nie byłem zadowolony z rezultatu. Jeszcze trochę popracowałem nad kształtem, dostosowując położenie nosa, pasków i uszu, aby uzyskać ostateczny efekt:
Ten proces animacji zmusił mnie do przeniesienia dotychczasowej wiedzy na wyższy poziom. Musiałem wyjść poza to, co wiedziałem , zamiast ograniczać się do tego, co myślałem, że mogę zrobić. Początkowo zacząłem od animacji poklatkowej, ponieważ nie ufałem sobie, że zrobię animację postaci. Dając sobie szansę spróbowania czegoś nowego i innego, udało mi się osiągnąć coś, co przekroczyło moje własne oczekiwania.
Wniosek
Trzy miesiące spędzone na stażu były niesamowicie satysfakcjonujące. Każdy dzień polegał na nauce i próbowaniu czegoś nowego. Wszystko, co robiłem, wiązało się z wyzwaniami — nawet z zadaniami, z którymi byłem bardziej zaznajomiony, takimi jak projektowanie. Za każdym razem, gdy coś tworzyłem, byłem bardzo niepewny i obawiałem się, jak to zostanie odebrane. Było dużo zwątpienia w siebie i wiele odrzuconych pomysłów.
Z tego powodu bycie częścią zespołu i posiadanie mentora, który poprowadził mnie we właściwym kierunku, było niesamowite. Polecenie spróbowania czegoś innego było często jedyną zachętą, której potrzebowałem, aby spróbować czegoś innego i osiągnąć coś większego i lepszego. Lubię sobie wyobrażać siebie jako gryzonia w grze w walnięcie w kreta, raz po raz uderzanego w głowę, ale zawsze wyskakującego raz za razem. Teraz zmagania i wyzwania dobiegły końca, chcę tylko zrobić to od nowa.
Doceniam to, czego się nauczyłem i jak zostałem popychany, by wyjść poza to, co myślałem, że mogę zrobić. To szaleństwo widzieć, jak daleko zaszedłem w ciągu kilku miesięcy. Moje zrozumienie bycia projektantem UX ogromnie wzrosło, od wymyślania funkcji, do dopracowywania projektu, a następnie pisania kodu front-endowego, aby go zaimplementować. Ten staż nauczył mnie, ile jeszcze muszę się nauczyć i zmotywował mnie do dalszej pracy. Zrozumiałam, że to, co potrafię, nigdy nie powinno być ograniczone przez to, co potrafię zrobić.
