Platforma VOD

O projekcie

Beauty In Sp. z o.o. Press sp.k. jest wydawcą magazynu LNE oraz organizatorem Międzynarodowych Kongresów i Targów LNE. Les Nouvelles Esthetiques powstało w 1952 roku we Francji i jest uznawane za najbardziej prestiżowe czasopismo w branży beauty na świecie. Ukazuje się w 15 krajach, m.in. we Francji, Włoszech, Polsce, Japonii, USA, Chinach, Kanadzie czy w RPA. W Polsce magazyn LNE wydawany jest już od 25 lat i jest numerem 1 wśród profesjonalistów z branży beauty.

Cossmeo.pl to platforma VOD prezentująca profesjonalny kontent branżowy. Skierowana jest zarówno do osób prywatnych jak i do przedsiębiorców z branży beauty. To pierwsza taka platforma w branży publikująca regularnie materiały video oraz profesjonalne szkolenia.

ETAP I
Warsztaty Design Sprint
ETAP II
Projekt graficzny i kodowanie warstwy frontowej platformy
ETAP III
Budowa panelu do zarządzania treścią

Etap I
Warsztaty Design Sprint

Warsztaty

Pierwszym krokiem od jakiego rozpoczęliśmy współpracę z Klientem było przeprowadzenie warsztatów mających na celu poznanie oczekiwań klienta, zweryfikowanie potrzeb jak również wytypowanie najważniejszych funkcjonalności platformy. Zdefiniowanie problemów i zagrożeń biznesowych jak również wskazanie obszaru niezbędnego do przetestowania przed rozpoczęciem właściwej realizacji.

Opracowanie prototypu aplikacji

Elementem prac warsztatowych było opracowanie prototypu w wybranym przez Klienta obszarze mającego na celu sprawdzenie słuszności założeń biznesowych założonych względem realizacji platformy.

Przeprowadzenie badań

Sprawdzenie słuszności poczynionych założeń projektowych zostało zweryfikowane w drodze badań jakie zostały przeprowadzone na różnych grupach użytkowników wskazanych przez Klienta. Badania pozwoliły również na zweryfikowanie różnych modeli biznesowych jak również intuicyjność aplikacji.

Opracowanie raportu

Efektem końcowym przeprowadzonych Warsztatów i Badań było sporządzeniem raportu podsumowującego, w którym zamieszczone zostały materiały zebrane podczas prowadzonych prac jak również sugestie i propozycje zmian w zakresie założeń całej realizacji.

Etap II
Realizacja Platformy w zakresie prac frontendowych umożliwiających publikację Platformy.

Analiza projektu, dobór narzędzi i technologii

Po owocnym etapie warsztatów przystąpiliśmy do przeanalizowania pełnego zakresu funkcjonalnego projektu oraz doboru najlepszych technologii umożliwiających nie tylko realizację poczynionych założeń ale również dających możliwość rozwoju projektu o nowe funkcjonalności.

Opracowanie rejestru wymagań

Jednym z najważniejszych elementów w procesie tworzenia oprogramowania jest stworzenie rejestru wymagań. Dokument ten w pełni definiuje oczekiwania biznesowe, funkcjonalne, podział na etapy oraz sposób realizacji każdej z funkcjonalności. Zawiera on niezbędne informacje dające Klientowi pewność, że jego oczekiwania zostały właściwie zrozumiane i zostaną one w prawidłowy sposób wdrożone. Dokument taki definiuje również kryteria akceptacji, które określają czy dana funkcjonalność została zrealizowana zgodnie z oczekiwaniami klienta.

Opracowanie site map i user flow dla procesów występujących na platformie

Realizację rozpoczęliśmy od wytypowania i przedstawienia w formie graficznej wszystkich możliwych procesów rejestracji, logowania, zakupów jak również struktur poszczególnych modułów.

Opracowanie makiet UX dla urządzeń desktopowych i mobilnych

Kolejnym krokiem było opracowanie makiet funkcjonalnych dzięki czemu mogliśmy w graficzny sposób zaprezentować wygląd przyszłej platformy jak również sposób poruszania się po niej.

Opracowanie projektu graficznego UI dla urządzeń desktopowych i mobilnych

Po ustaleniu finalnej struktury Platformy oraz jej nawigacji, wykonaliśmy na bazie stworzonych makiet, projekty graficzne poszczególnych widoków, dobierając odpowiednią kolorystykę, fonty jak również tworząc szereg dedykowanych elementów graficznych.

Zakodowanie warstwy frontowej serwisu

Etap ten był niezwykle ważny z biznesowego punktu widzenia. Dawał on możliwość publikacji Platformy i jej premiery przed najważniejszym wydarzeniem w branży beauty jakim jest Kongres i targi LNE. Zgodna z założeniami czasowymi realizacja tego założenia pozwoliła na wystartowanie Platformy w zaplanowanym czasie. Warstwa frontowa była w 100% zakodowana i udostępniona do użytku publicznego.

Optymalizacja i wdrożenie zabezpieczeń dotyczących treści

Głównym naszym celem było odpowiednie zabezpieczenie publikowanych przez Klienta treści jak również ich bezproblemowe odtwarzanie. Dlatego też streaming na platformie Cossmeo.pl oparty jest o standard HTTP Live Streaming (HLS).
Pliki wideo konwertowane są do standardu HLS za pomocą dedykowanego skryptu, który wykorzystuje bibliotekę FFmpeg. Skrypt przygotowuje pliki z podziałem na jakość od 360p do 1080p. Ogranicza to transfer oraz daje możliwość dynamicznej zmiany jakości zależnie od przepustowości łącza widza.
Dla każdego użytkownika w momencie próby odtworzenia generowany jest unikalny adres dostępowy do pliku. Dostęp do tego pliku ograniczony jest poprzez przypisanie go do adresu ip użytkownika, dodatkowo każde żądanie fragmentu wideo wymaga odpowiedniego przygotowanie requestu. Dostęp do pliku wygasa co pewien okres czasu przez co wymagane jest ponowne zautoryzowanie dostępu do materiału przez użytkownika.

Optymalizacja platformy pod SEO

Niezwykle ważnym elementem całej realizacji była również optymalizacja platformy pod SEO. Założeniem było, żeby każdy materiał wideo bez względu czy jest on darmowy czy zabezpieczony pozycjonował się w przeglądarkach.

Podpięcie i konfiguracja narzędzi analitycznych

Na platformie został zaimplementowany kod GTM dzięki czemu w łatwy sposób można implementować szereg różnych narzędzi analitycznych. Prócz zewnetrzych narzędzi analitycznych Platforma została wyposażona również w moduły analityczne dające możliwość analizy ruchu, ilości obejrzanych materiałów wideo i wielu innych danych niezbędnych do owocnego planowania strategii działań rozwojowych.

Strona cossmeo na urządzeniach mobilnych

Responsive Web design

Zgodnie z panującymi standardami Platforma została wykonana w technice RWD dzięki czemu jej układ dostosowuje się do rozmiaru okna przeglądarki urządzenia, na którym jest wyświetlana.

Optymalizacja, testy funkcjonalne

Na zakończenie prac przeprowadziliśmy szereg testów funkcjonalnych oraz testów obciążeniowych, dodatkowo optymalizując Platformę w celu jej lepszego działania.

Etap III

Opracowanie makiet UX oraz projektu UI panelu do zarządzania platformą

Trzecim etapem prac było przygotowanie panelu administracyjnego dającego Klientowi możliwość łatwego zarządzania treściami publikowanymi na Platformie. Realizacje tego etapu również rozpoczęliśmy od przygotowania makiet UX ponieważ dzięki nim mogliśmy stworzyć najbardziej przyjazną i funkcjonalną od odbiorcy strukturę. W oparciu o makiety powstał dedykowany projekt graficzny panelu administracyjnego.

Zakodowanie warstwy frontowej i backendowej panelu do zarządzania

Ostatnim elementem prac było zakodowanie warstwy frontowej panelu administracyjnego oraz spięcie jej z warstwą backendową Platformy. Po zakończeniu tego Etapu nastąpiła integracja strefy backendowej z wcześniej opublikowaną warstwą frontową Platformy.

Narzędzia i technologie

Efekt pracy

Efektem prac jest nowoczesna platforma VOD funkcjonalnie zbliżona do takich Platform jak Netflix czy HBO MAX. Platforma rozbudowana o dedykowany system zarządzania treścią dający szerokie możliwość modyfikacji modelu sprzedażowego w zależności od założeń biznesowych.

cossmeo.pl

Opinia Klienta

Ich styl zarządzania projektami był otwarty, komunikatywny i wspierający. Łatwa komunikacja, dobre terminy poszczególnych faz realizacji.
Ich doświadczenie, wiedza i podejście komunikacyjne były imponujące.

Ned Mikovic

CEO and Artistic Director, Beauty In Press