Dobry design ułatwia osiągnąć cele biznesowe

W Droptica zespół programistów ściśle współpracuje z designerem. Bliska współpraca i nieograniczony kontakt pozwalają budować strony, nie tylko atrakcyjne wizualnie i dopracowane pod kątem UX i UI, ale także dopracowane pod kątem programistycznym. W tym wpisie opiszę proces, zgodnie z którym pracujemy nad projektami i jak wygląda w praktyce współpraca designera, programistów i testerów.

Czym zajmujemy się w Droptica?

Droptica to agencja drupalowa, której główne aktywności skupiają się na budowaniu i rozwoju oprogramowania w oparciu o Drupala i Symfony. Od wielu lat pracujemy nad budową serwisów internetowych od zera, ale dbamy także o bieżące utrzymanie istniejących stron działających na bazie tych technologii. Wysokiej klasy efekty dostarczamy klientom, zarówno w pierwszym, jak i drugim przypadku. W tym wpisie skupię się tylko na rozwiązaniach kompleksowych, gdzie jesteśmy odpowiedzialni za cały powstający produkt  - od pomysłu klienta po finalne wdrożenie. Taki proces to przygotowanie koncepcji UX, na bazie której powstaje projekt graficzny (UI). Opracowany i zatwierdzony przez klienta projekt wizualny jest wdrażany i zamieniany w działającą stronę online.

Jak wygląda zespół pracujący nad projektem i podział kompetencji?

Aby dostarczyć klientowi najlepszy produkt, pracujemy zespołowo. Złożone projekty, a oprogramowanie z pewnością do takich należy, wymagają specjalistów, którzy wykonają prace na poszczególnych etapach. W skład takiego zespołu wchodzą osoby lub grupy odpowiedzialne za zagadnienia takie jak UX/UI, programowanie oraz testy. Designer odpowiada za analizę potrzeb i wytycznych klienta, przygotowanie koncepcji architektury wyglądu każdej z podstron, układu i hierarchii elementów, a także za przygotowanie prototypów oraz późniejsze testy użyteczności. Efektem tych prac jest stworzenie makiet (wireframe), na podstawie których tworzony jest ostateczny projekt UI. Za kwestie programistyczne odpowiadają programiści tworzący technologiczną część aplikacji. Tester jest osobą odpowiedzialną za testowanie oprogramowania i wychwytywanie błędów. Zespół ma ze sobą kontakt i ściśle współpracuje na każdym etapie projektu.

Jaka jest rola designera w procesie tworzenia aplikacji?

W Droptica już na etapie projektowania UX designer ma kontakt z programistą. Dzięki temu możliwe jest wybranie możliwie najlepszych rozwiązań technicznych. Połączenie tych, uzupełniających się, kompetencji powoduje powstanie projektów atrakcyjnych wizualnie oraz przyjemnych w obsłudze dla użytkownika. Przykładem bezpośredniej korzyści, wynikającej z takiej współpracy, jest perfekcyjnie działanie systemu na wszystkich typach urządzeń mobilnych i stacjonarnych, niezależnie od rozdzielczości i wielkości ekranu. Rozwiązania zaproponowane przez designera są od razu konfrontowane z technicznymi możliwościami, a ewentualne problemy techniczne wychwytywane już na początku. Dzięki temu nie opóźniają prac na późniejszym etapie wdrażania. Cały proces projektowy toczy się zgodnie z metodologią Agile w oparciu o SCRUM. Codzienne spotkania i konsultacje powodują, że projekt rozwija się bardzo szybko, na oczach klienta, który ma wgląd w ten proces na każdym etapie.

Projekt w ostatniej fazie jest precyzyjnie sprawdzany przez testera w przygotowanym środowisku testowym. Na podstawie efektu prac developerów sprawdzane jest działanie aplikacji oraz istnienie ewentualnych błędów. Także na tym etapie designer ściśle pracuje z zespołem, dbając o wizualną jakość budowanego projektu. Dzięki bliskiej relacji w zespole nawet drobne błędy są wychwytywane i szybko przekazywane do programisty. Ważne jest dla nas, aby zatwierdzony przez klienta projekt został wdrożony z największą dokładnością. Designer stoi na straży podejścia Pixel Perfect gdzie odwzorowanie designu musi być jak najbardziej precyzyjne.

Narzędzia designera w Droptica

W "arsenale" zespołu designerskiego znajdują się narzędzia projektowe oraz wspomagające pracę i komunikację. Projekt UX, czyli makiety i pierwsze screeny powstają w UXpin. Jest to świetne narzędzie, dzięki któremu szybko tworzymy działające prototypy, którymi możemy dzielić się z klientem. UXpin pozwala na pokazanie interakcji między elementami aplikacji oraz daje możliwość przetestowania koncepcji strony na pierwszych etapach projektowania UX. Jest to efektywne narzędzie, zarówno do prezentacji dla klienta, ale także do konsultacji wewnątrz zespołu. Za jego pomocą designer jest w stanie pokazać jakiego efektu oczekuje od programisty.

Aby poznać opinie klienta do przygotowanego projektu UI używamy InVision. To praktyczne oprogramowanie pozwala klientowi w komfortowy sposób dzielić się uwagami i komentarzami do konkretnych podstron aplikacji. Toczone za pomocą InVision dyskusje, dotyczące konkretnych elementów graficznych oraz prosty system komentowania bardzo ułatwiają i przyśpieszają prace. Zarówno programiści, jak i testerzy, mają dostęp do tego narzędzia i również mogą uczestniczyć w powstawaniu ostatecznego projektu.

Projekt UI tworzymy za pomocą programów pakietu Adobe Creative Cloud. Adobe XD, Illustrator oraz Photoshop. Programy te pozwalają dostarczyć wysokiej jakości grafikę, która może być sprawnie zakodowana w działającą stronę. Designer udostępnia projekty screenów za pomocą narzędzia Zeplin, które pozwala programistom na dokładny wgląd w stworzony projekt. Wdrożenie projektu w stylu Pixel Perfect, za pomocą tego narzędzia, jest bardzo usprawnione. Mierzenie odległości między elementami oraz pobieranie styli CSS ze stworzonego projektu jest dzięki temu bardzo proste.

Nic nie zastąpi spotkań osobistych, ale Slack jest dla nas bardzo wygodnym sposobem komunikacji. Szybka wymiana pytań lub plików zapewniona przez tę platformę jest kolejnym narzędziem usprawniającym pracę. Do bezpośredniej komunikacji z zespołem zapraszamy również klienta. Komunikator umożliwia szybką komunikację, skutecznie zastępując e-mail jako podstawowe narzędzie do wiadomości pisemnych.

Jakie korzyści otrzymuje klient, korzystając z kompletnego zespołu?

Główna zaleta z korzystania z pełnego zespołu skupiającego designerów, programistów i testerów to jakość otrzymanego oprogramowania. Tylko zespół ściśle współpracujący ze sobą i znający swoje kompetencje jest w stanie osiągać najlepsze rezultaty.

Bliski kontakt designera i developera pozwala szybko i na odpowiednim etapie pozbyć się błędów, a na początku projektu skutecznie dobrać najlepsze rozwiązania technologiczne. Często zapomina się o wpływie programistów na dobre User Experience, ograniczając dobry UX do przygotowania makiet i mockupów. Sposób działania aplikacji, czas ładowania podstron, optymalizacja dla poszczególnych urządzeń i platform leży głównie po stronie programistów, a również w znacznym stopniu odpowiada za doświadczenia użytkownika. Jeżeli zespół projektowy nie ma kontaktu z programistami efekt finalny może być niesatysfakcjonujący.

Współpraca z testerami również przynosi pozytywne efekty, szczególnie przy wdrożeniach. Szybkie wychwytywanie błędów wizualnych przez testera i przekazywanie ich do projektanta wpływa na  wygląd projektu. W Droptica tester na końcowym etapie projektu konsultuje z designerem działanie i wygląd elementów budzących wątpliwości.

Korzyścią takiego modelu realizacji jest powierzenie projektu zespołowi, który zna się wzajemnie i sprawnie wykona pracę. Unikamy kłopotów z komunikacją wewnątrz zespołu i szybko reagujemy na powstające problemy. Gdy zespół składa się z nieznających się członków, czasami taka komunikacja trwa długo, co w przypadku złożonego projektu nie jest mile widziane.

Jeżeli chciałbyś, aby Twoim projektem zajął się dedykowany, profesjonalny zespół napisz do nas. Chętnie porozmawiamy o Twoim projekcie!