Styl.fm
Redesign portalu o modzie, urodzie, gwiazdach i serialach
Projekt objął redesign kluczowych widoków portalu: strony głównej, artykułów, galerii, kategorii i widoków wideo.
Skupiłam się na uporządkowaniu treści, poprawie czytelności na urządzeniach mobilnych oraz ułatwieniu przechodzenia między artykułami, galeriami i materiałami powiązanymi.
Dane 2019 - 2021
Efekty po wdrożeniu zmian
Zmiany zostały w pełni wdrożone w 2020 roku. Dane z 2021 pokazują więc pierwszy pełny rok działania serwisu po wdrożeniu.
W 2021 roku Styl.fm miał ponad 20,5 mln użytkowników, blisko 85 mln sesji i ponad 378 mln odsłon.
Zmiana 2020 vs 2021
W 2021 roku część wskaźników związanych ze sposobem korzystania z serwisu poprawiła się względem 2020 roku:
+9,85%
Strony / sesję
+12,82%
Średni czas sesji
-9,46 p.p.
Współczynnik odrzuceń
Zmienił się też sposób korzystania z serwisu. Użytkownicy częściej trafiali bezpośrednio na konkretne artykuły z wyszukiwarki i mediów społecznościowych, głównie na urządzeniach mobilnych.
W porównaniu z 2019 rokiem oznaczało to:
- krótsze sesje,
- mniej stron w jednej sesji,
- wyższy współczynnik odrzuceń.
Dane pokazały większą skalę ruchu niż w 2019 roku oraz poprawę części wskaźników między 2020 a 2021 rokiem.
Kontekst i wyzwanie projektowe
Styl.fm to duży portal lifestyle’owy z artykułami, galeriami, materiałami wideo i rozbudowaną strukturą kategorii. Użytkownicy często trafiali bezpośrednio na konkretny materiał z wyszukiwarki lub mediów społecznościowych, bez wcześniejszego wejścia na stronę główną.
Wyzwaniem było uporządkowanie różnych formatów treści tak, aby użytkownik szybko rozumiał, gdzie się znajduje, mógł wygodnie korzystać z serwisu na telefonie i łatwo przechodził do kolejnych materiałów.
Wiele formatów treści
Artykuły, galerie, materiały wideo i kategorie wymagały spójnej struktury oraz czytelnej hierarchii.
Mobile jako priorytet
Około 95% ruchu pochodziło z urządzeń mobilnych, dlatego widoki musiały być czytelne i wygodne w obsłudze na małym ekranie.
Dalsze przeglądanie serwisu
Artykuły i galerie miały prowadzić do kolejnych powiązanych materiałów, zamiast kończyć wizytę użytkownika.
Najważniejsze decyzje projektowe
Najważniejsze zmiany dotyczyły trzech obszarów: widoku artykułu, galerii oraz elementów angażujących użytkownika.
Widok artykułu
Uporządkowałam strukturę artykułu, wyeksponowałam kategorię i główne zdjęcie oraz dodałam czytelne przejście do galerii.
Artykuł miał ułatwiać nie tylko czytanie, ale także przechodzenie do kolejnych materiałów w serwisie.
- Wyraźne oznaczenie kategorii
- Widoczne przejście do galerii
- Powiązane treści pod artykułem
Widok galerii
Zwiększyłam przestrzeń przeznaczoną na zdjęcia i uprościłam przechodzenie między nimi.
Układ galerii został dostosowany do wygodnego przeglądania na urządzeniach mobilnych.
- Więcej przestrzeni dla zdjęcia
- Wygodne przewijanie gestem
- Osobny wariant dla materiałów wideo
Elementy angażujące
W projekcie uwzględniłam sondy, oceny artykułów, reakcje, komentarze oraz odnośniki do forum.
Użytkownicy mogli dzięki nim oceniać treści, reagować na nie i przechodzić do dyskusji na forum.
- Sondy i oceny artykułów
- Linki do forum dyskusyjnego
- Reakcje i komentarze pod treścią
Płynniejsze przejście między artykułami i galeriami
Artykuł i galeria nie były projektowane jako osobne, zamknięte widoki, ale jako części jednej ścieżki przeglądania serwisu.
Czytelne przejścia między widokami ułatwiały dotarcie do kolejnych powiązanych materiałów. Było to szczególnie ważne na urządzeniach mobilnych, gdzie użytkownicy często rozpoczynali wizytę od pojedynczego artykułu lub galerii.
Dodatkowe usprawnienia
Architektura informacji
Uporządkowałam kategorie i strukturę serwisu, aby użytkownik szybciej rozumiał, gdzie się znajduje, i łatwiej docierał do interesujących go treści.
Transparentność i wiarygodność
Do stopki dodałam ważne informacje organizacyjne i formalne, dzięki czemu podstawowe informacje o serwisie były łatwiej dostępne.
Hierarchia treści
Uporządkowałam układ widoków, aby najważniejsze treści były łatwiejsze do zauważenia, a materiały powiązane wspierały dalsze przeglądanie serwisu.
Wersja AMP
Przygotowałam wersję AMP, która wspierała szybsze ładowanie treści na urządzeniach mobilnych.
Wybrane elementy UI
Przygotowałam wybrane elementy UI, które pomagały zachować spójność między artykułami, galeriami, kategoriami i modułami treści.
Typografia
Kolory główne
Crimson#D82F2F
Gunmetal#2D3436
Dark Silver#6E6E6E
Kategorie
Z życia#00AA55
Uroda#C44569
Fryzury#00A4A6
Gwiazdy#574B90
Moda#E65722
Forum#FBC02D
Wybrane komponenty
Przycisk CTA
Oceny artykułów
Finalne widoki
Finalne widoki pokazują portal w różnych kontekstach: na stronie głównej, w artykule, galerii, widoku wideo, kategoriach oraz modułach angażujących użytkownika.
Projekt łączy czytelność treści, wyraźną strukturę i przejścia do kolejnych materiałów, dzięki czemu ułatwia szybkie przeglądanie serwisu na urządzeniach mobilnych.
Strona główna
Kategorie
Galeria zdjęć
Strona artykułu
Kategorie
Podsumowanie
Redesign Styl.fm obejmował nie tylko warstwę wizualną, ale też sposób porządkowania i przeglądania treści w dużym serwisie contentowym.
Najważniejsze decyzje dotyczyły czytelności widoków mobilnych, połączenia artykułów z galeriami, uporządkowania materiałów powiązanych oraz dodania elementów angażujących użytkowników.
Po wdrożeniu dane z Google Analytics pokazały wyraźny wzrost skali ruchu oraz zmianę sposobu korzystania z serwisu.