Case Studies

Jak zaprojektować wielojęzyczną stronę www? Przykład Media Press

Klient:
Media Press
Cel:
zaprojektowanie i wdrożenie nowej strony www
Okres współpracy
październik - listopad 2020
Liczba sprintów:
4
Liczba osób w projekcie:
3

Kontekst projektu


MediaPress to firma z tradycjami. Organizacja powstała ponad 30 lat temu i od tego czasu budowała swoją pozycję w branży. Jest liderem w dostarczaniu metadanych dla sektora mediów i rozrywki. Ponadto, oferuje wiele rozwiązań technologicznych dla operatorów telewizyjnych, dostawców VOD i wydawców czasopism. Ze względu na rozbudowaną gamę usług i międzynarodową strukturę, niezbędne było dostosowanie aktualnej strony www tak, aby mogła w klarowny sposób opowiedzieć o Media Press i zaprezentować zakres i możliwości, jakie są dostępne przy współpracy. 

Strona internetowa o kilku wersjach językowych: krok po kroku

Sprint 1: Kick off i wstępny design

 

Prace nad nową stroną Media Press zaczęły się tak naprawdę jeszcze przed rozpoczęciem naszej współpracy. Po stronie klienta została wybrana osoba bezpośrednio odpowiedzialna za wdrożenie strony, która miała być naszym głównym kontaktem, jeśli chodzi o jakiekolwiek sprawy związane ze stroną www.

Po podjęciu decyzji o rozpoczęciu współpracy, zostaliśmy poproszeni o przekazanie informacji, co powinno zostać przygotowane po stronie klienta, aby stworzone przez zespół klienta makiety były odpowiednie do rozpoczęcia pracy z designem.

Z uwagi na krótki aczkolwiek intensywny harmonogram, podczas projektowania makiet po stronie klienta najważniejsze było dla nas:

  • określenie liczby podstron,
  • przygotowanie zawartości dla każdej z nich – określenie pożądanych sekcji i treści, które powinny pojawić się na poszczególnych podstronach,
  • wstępne przygotowanie copy, co pomoże w rozlokowaniu poszczególnych elementów każdej sekcji,
  • zdefiniowanie funkcjonalności strony, które będą używane najczęściej, aby już w trakcie projektowania wziąć pod uwagę przyszłą modyfikację poszczególnych elementów z poziomu CMS-a.

 

Tak stworzone makiety, nawet w wersji bardzo podstawowej, były wystarczające, aby rozpocząć pracę nad designem.

Co ważne, w zależności od ustaleń z klientem możemy zająć się także tworzeniem architektury informacji i makietowaniem. Etapy te opisaliśmy case study “Strona internetowa dla firmy z branży logistycznej – na przykładzie SKK S.A.” 

 

Kick off meeting

Ze względu na ograniczony scope (zakres projektu), nasz standardowy proces projektowania strony www dostosowaliśmy do okresu 2 sprintów. Tutaj celem spotkania było lepsze poznanie firmy, zrozumienie, czym się zajmuje, co ją wyróżnia i jak działa.

Dzięki godzinnej rozmowie udało nam się wyciągnąć najważniejsze informacje, które pomogły nam w przygotowaniu moodboardu.

Dowiedzieliśmy się więcej o:

  • historii firmy,
  • obecnej strukturze,
  • usługach oferowanych przez Media Press,
  • wykorzystywanych technologiach,
  • odbiorcach i klientach firmy,
  • sytuacji na rynku i konkurencji.

 

Zrozumienie organizacji, jej funkcjonowania, wartości, branży – wszystko to ma wpływ na to, jak postrzegamy daną markę i z czym ją kojarzymy.

 

Moodboard

Media Press to nowoczesna firma, ale z długoletnią tradycją i marką budowaną na przestrzeni lat. Na wszystkie te aspekty musieliśmy zwrócić uwagę podczas projektowania strony www, aby przedstawić Media Press w taki sposób, jak jest to realnie.

Ważnym elementem było nawiązanie do długoletniej historii firmy, która wywodzi się z drukowanych czasopism. Dlatego podczas komponowania moodboardu wybieraliśmy projekty, które dzięki użyciu szeryfowych fontów sprawiały wrażenie “drukowanych”. Przy połączeniu takiej stylistyki z nowoczesnymi rozwiązaniami designerskimi mogliśmy stworzyć styl, który odpowiadał potrzebom marki i temu, jak rzeczywiście powinna być ona prezentowana.

Stonowana kolorystyka brandu Media Press, czarno-biało-czerwona, pozwoliła w naturalny sposób skorelować design z marką i dzięki przygotować odpowiednie połączenie. Wypracowany design będzie mógł finalnie pokazywać tradycję i nowoczesność, ale także profesjonalizm i stabilną markę. 

 

Moodboard, który przygotowaliśmy dla Media Press

Wstępny design

Po prezentacji moodboardu, dzięki wykorzystaniu makiet przygotowanych przez klienta, mogliśmy przejść do etapu eksploracji designu. Na ten moment mieliśmy już wybrany styl oraz przygotowaną zawartość strony. Teraz naszym głównym zadaniem było przekucie dotychczasowych materiałów w design, który może zostać zaadaptowany na wszystkie planowane podstrony.

Teraz także możesz skorzystać z narzędzi do prac nad strategią i designem w Twojej firmie. Za darmo

Na jaki adres mamy wysłać narzędzie?



    Zgadzam się na przetwarzanie moich danych osobowych przez Project: People Sp. z o.o. w celu komunikacji marketingowej, a tym samym wysyłania mi newslettera, informacji o usługach, promocjach lub nowościach zgodnie z Polityką prywatności

    To moment, kiedy możemy pozwolić sobie na pracę twórczą. Wynikiem tego etapu zazwyczaj jest kilka różnych projektów (na przykład strony głównej). Pozwala to na wybranie najlepszych aspektów z danej wersji, a później zestawienie ich, aby osiągnąć możliwie najbardziej dopasowany efekt finalny.

    W przypadku Media Press opracowaliśmy projekty opierające się na kolorystyce brandu, ale z mocnymi akcentami delikatnej szarości, które mają nawiązywać do papieru czy gazet. Powstały wersje ciemna i jasna. Oczywiście w obu bardzo ważną rolę odgrywały zdjęcia, które miały prezentować prawdziwość marki Media Press. Przy wykorzystaniu fontów skupiliśmy się szeryfowych, jednak została przygotowana również wersja, gdzie się nie pojawiły. Dzięki temu mogliśmy zaprezentować alternatywny wygląd.

    Tak przygotowane projekty zostały przekazane do klienta – zależało nam na uzyskaniu feedbacku. Zebraliśmy niezbędne informacje, a ponadto dzięki temu, iż w zespole klienta była osoba, która swobodniej czuła się w Figmie, niektóre propozycje i uwagi Media Press mogły zostać pokazane już wizualnie z wykorzystaniem wcześniej przygotowanych projektów. 

     

    Sprint 2: Finalizacja projektu i przygotowanie do wdrożenia


    Nowy sprint rozpoczęliśmy adaptacją feedbacku i przygotowaniem finalnej wersji strony głównej. To ona miała posłużyć jako punkt wyjścia w projektowaniu kolejnych zaplanowanych podstron. 

    Finalnie, aby dość doraźnie zawrócić uwagę na dojrzałość marki, głównym kolorem, który obejmował tła i sekcje, został czarny. Fonty szeryfowe dla nagłówków zostały wybrane praktycznie jednogłośnie. Aplikując pozostałe uwagi od klienta, doprowadziliśmy stronę główną do momentu, w którym mogła być już wykorzystywana jako wzór stylu dla pozostałych podstron.

     

     

    Przy jej projekcie warto zwrócić na design interaktywnej mapy, która pokazuje wszystkie lokalizacje Media Press na świecie i jest bardzo istotnym elementem prezentującym markę.

     

     

    Teraz naszym głównym celem były strony produktowe i usługowe. Poza standardowymi usługami, jakimi są pozyskiwanie, formatowanie i dostarczanie metadanych, Media Press oferuje szeroką gamę rozwiązań technologicznych i inny usług skierowanych do branży.


    Zostały więc zaprojektowane kolejne podstrony:

    • Metadata,
    • Hubert System,
    • Editorial Services,
    • AI Image Processing,
    • Print Outsourcing Services.

    Na tym etapie projektu równorzędnie z wersją desktopową pracowaliśmy również nad projektem wersji mobilnej dla każdej podstrony. 

     

    Po zakończeniu prac na tą częścią projektu, kolejnym elementem były strony opowiadające o Media Press, jej strukturze, historii, klientach i zespole. Ponadto powstały jeszcze projekty stron związanych z blogiem i artykułami oraz klasyczna podstrona kontakt.

     

     


    Wyzwanie: strona wielojęzyczna

    Warto zwrócić uwagę, że Media Press jest firmą międzynarodową z oddziałami w wielu krajach i klientami z całego świata. W tym wypadku niezbędne jest przygotowanie wielu wersji językowych. Często staje się to mocno problematyczne ze względu na różne długości tłumaczeń danej frazy. 

    Dlatego w trakcie projektowania przez nas domyślnej, angielskiej wersji językowej już powstawały wersje w pozostałych językach. Dzięki temu mogliśmy na bieżąco sprawdzać, jak projekt zachowuje się w skrajnych sytuacjach, i reagować poprzez dostosowanie designu danego elementu lub poprzez dostosowywanie tłumaczenia.

    Powstały wersje angielska, polska, francuska oraz niemiecka, a w planach jest przygotowanie kolejnych dla rynków, na których działa Media Press.

     

    Przygotowanie do wdrożenia


    Aby odpowiednio przygotować projekt do wdrożenia dla deweloperów niezbędne jest dostarczenie kilku rzeczy.

    Ważne są między innymi:

    • design wszystkich niezbędnych, niegenerycznych podstron,
    • przygotowanie wersji mobilnych, aby pokazać jak dany element czy sekcja ma zachować się na smartfonie,
    • odpowiednie nazewnictwo elementów i ich grupowanie, aby kod css generowany przez Figmę był lepiej sformatowany,
    • rozpiska animacji i zachowań elementów interaktywnych, najlepiej z dostarczonymi linkami do przykładów jak powinny wyglądać,
    • kod niezbędny do zaimplementowania użytych fontów – np. generowany za pośrednictwem Adobe TypeKit lub Google Fonts,
    • dostępność na wszystkie pojawiające się pytania w trakcie wdrażania naszego projektu 🙂

     

    Na koniec projektu zawsze warto zostawić sobie trochę przestrzeni na dostosowanie designu i przygotowanie materiałów, które w znaczący sposób wpłyną na dalsze etapy. Dzięki temu nie tylko praca deweloperów będzie łatwiejsza, ale również finalny efekt będzie zdecydowanie bliższy temu, co zaprojektowaliśmy i mieliśmy w naszej wyobraźni. Ponadto pozwoli na dużo dokładniejszą estymację czasu wdrożenia.


    Niemniej jednak nie da się przekazać dosłownie wszystkiego. Dlatego
    warto, przed rozpoczęciem prac wdrożeniowych podczas spotkania z deweloperem omówić wszystkie niezbędne aspekty i odpowiedzieć na pojawiające się już wtedy pytania, aby zminimalizować liczbę potencjalnych niejasności, które mogą wyniknąć w bardziej zaawansowanym etapie wdrożenia.

    Wszystkie wymienione wyżej aspekty staraliśmy się zagospodarować w drugim tygodniu pracy nad wielojęzyczną stroną www dla Media Press.

     

    Sprint 3-4: Backend i Frontend development


    Klientowi zależało na możliwości edycji treści w sposób szybki i przejrzysty. Dlatego postanowiliśmy użyć CMS (Content Managemenet System, system zarządzania treścią) WordPress, który jest świetnym narzędziem do edycji treści nawet dla osób początkujących, a zarazem ogromnym narzędziem dla developera, pozwalającym sprostać wymogom klienckim.

    Strona została zakodowana na bazie bloków. Daje to ogromną przewagę w późniejszym zarządzaniu stroną. Podejście modularne polega na kodowaniu każdej sekcji strony tak, że jest to osobny, niezależny fragment kodu. Tworzy się w ten sposób cały zbiór sekcji, których klient w dowolnym momencie może użyć, by zbudować kolejną stronę, i to bez potrzeby kontaktu z developerami. Budowa ta polega na zasadzie drag&drop, czyli wyboru danego elementu z listy i umieszczeniu go w żądanym miejscu.

    Strona Media Press kodowana była na podstawie autorskich rozwiąń, co przekłada się na bardzo wysokie bezpieczeństwo całej strony na wszelkiego rodzaju ataki. Podchodzimy do kodowania profesjonalnie i nie korzystamy z półśrodków w postaci zbędnych wtyczek czy rozszerzeń, które są tylko dodatkową furtką do włamań.

    Kod został napisany na naszym autorskim szablonie, wykorzystującym najnowsze technologie, ale też pozwalającym nie zapomnieć o wsparciu dla starszych przeglądarek czy systemów. To właśnie dlatego strona Media Press na wszystkich systemach, urządzeniach stacjonarnych i mobilnych prezentuje ten sam wysoki poziom.

    W czasie prac developerskich klient co tydzień otrzymywał od nas zabezpieczony link, pod którym mógł podejrzeć postęp prac, i dzięki temu skonsultować z nami swoje przemyślenia i zgłosić uwagi. Miał więc realny wpływ na projekt w trakcie developmentu. 

    Całość kodowania wraz z uzupełnieniem treści w 4 językach oraz wgraniem na serwer i zabezpieczeniem zajęła około 3 tygodni.

    Podsumowanie w liczbach i nie tylko

     

    Media Press był dla nas wyjątkowo interesującym projektem. Ze względu na wydzielenie tylko części naszego procesu, musieliśmy się dostosować, aby dostarczyć odpowiednią jakość. Ponadto był to również pierwszy projekt, który jako Project: People zrealizowaliśmy również na etapie wdrożenia.

    Pełen efekt naszych prac można znaleźć na: https://www.media-press.tv

    13

    samodzielnych podstron

    4

    wersje językowe

    40

    responsywnych bloków

    Narzędzia, metody i technologie wykorzystane w projekcie

     

    • moodboard
    • style guide
    • Figma
    • WordPress
    • PHP
    • JavaScript
    • SCSS w metodologii BEM

    Case study to za mało?

    Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

    Umów się na bezpłatną konsultację

    Zespół projektowy, czyli kto za co odpowiadał

    Autor Case Study

    Paweł Nawara Product Designer w Project: People
    Od najmłodszych lat związany z szeroko pojętym designem. Pracował przy projektach graficznych różnego typu (strony WWW, aplikacje mobilne, social media, DTP). Od dwóch lat najlepiej odnajduje się w Lean UX & UI Design.

    Pracuje przy innowacyjnych projektach rozwiązując często złożone problemy. Jest na każdym etapie procesu. Od wstępnego pomysłu i rozmów z klientem, przez cały proces projektowania, aż do współpracy z deweloperami przy finalnym wdrożeniu produktu.

    Mocno zaangażowany w różnego typu działania społeczne i organizację wydarzeń (Juwenalia UEK, DesignWays Conf). Aktywny członek organizacji studenckiej - NZS UEK, gdzie pomaga rozwijać się młodym i nastawionym na rozwój studentom poprzez mentoring czy szkolenia.

    Pozostali członkowie zespołu

    Tomasz Osowski Lean UX & Service Designer w Project: People
    Pomaga firmom stworzyć doskonałe doświadczenie użytkownika zapewniając jednocześnie odpowiednią rentowność biznesu. Jego zdanie to stworzyć produkt i usługi, które są potrzebne i przynoszą satysfakcję zarówno odbiorcom jak i właścicielom biznesu.Certyfikowany Trener Biznesu i rozwoju osobistego, Certyfikowany moderator Design Thinking. Przedsiębiorca od 6 lat szczerze zakochany w metodologii Lean. Zawsze stara się dostarczyć produkt jak najszybciej na rynek przy najmniejszym udziale kapitałowym.Współpracował z firmami: T-mobile, Ecard, inPost, ING, Nationale Nederlanden, Brainly, Publicis, Netguru. Organizator DesignWays Conf.