Styl.fm
Redesign portalu o modzie, urodzie, gwiazdach i serialach
Projekt objął kluczowe widoki dużego portalu lifestyle’owego: stronę główną, artykuły, galerie, widoki wideo, kategorie oraz elementy angażujące użytkownika.
Celem było uporządkowanie treści, poprawa czytelności na urządzeniach mobilnych oraz wzmocnienie przejść między artykułami, galeriami i materiałami powiązanymi.
Porównanie 2021 vs 2019
Efekty po wdrożeniu zmian
Zmiany zostały w pełni wdrożone w 2020 roku, a największy wzrost skali ruchu był widoczny rok później. W porównaniu z 2019 rokiem, czyli okresem sprzed redesignu, dane z 2021 roku pokazały wzrost liczby użytkowników o 110,74%, liczby sesji o 259,82% i liczby odsłon o 115,86%.
+110,74%
Liczba użytkowników
+259,82%
Liczba sesji
+115,86%
Liczba odsłon
Jednocześnie analiza danych pokazała zmianę charakteru ruchu. Przy dominującym ruchu mobilnym użytkownicy częściej wchodzili bezpośrednio na konkretne treści, co wiązało się z krótszymi sesjami, mniejszą liczbą stron przeglądanych w jednej sesji i wyższym współczynnikiem odrzuceń niż w 2019 roku.
Zmiana charakteru ruchu wiązała się z:
- krótszymi sesjami
- mniejszą liczbą stron w jednej sesji
- wyższym współczynnikiem odrzuceń
Kontekst: odbicie względem 2020 roku
W porównaniu z 2020 rokiem widać jednak wyraźne odbicie: wzrosły odsłony, strony na sesję i średni czas sesji, a współczynnik odrzuceń spadł z 66,25% do 56,79%.
Ważne było to, że między pierwszym rokiem po wdrożeniu a kolejnym część wskaźników zaangażowania zaczęła się poprawiać. Dane pokazały więc nie tylko wzrost zasięgu, ale też stopniową adaptację użytkowników do nowego sposobu korzystania z serwisu.
Kontekst i wyzwanie projektowe
Styl.fm to duży serwis contentowy z treściami o modzie, urodzie, show-biznesie i lifestyle’u. Użytkownicy trafiali do serwisu z różnych źródeł i często zaczynali wizytę nie od strony głównej, ale od konkretnego artykułu, galerii lub kategorii.
Kluczowe było zaprojektowanie widoków, które wspierają szybkie skanowanie treści, wygodne czytanie na telefonie i dalsze przeglądanie serwisu.
Użytkownik powinien szybko rozumieć, gdzie się znajduje, jaki typ treści ogląda i jakie kolejne akcje ma do wyboru. Dlatego projekt skupiał się nie tylko na wyglądzie pojedynczych ekranów, ale też na lepszym połączeniu artykułów, galerii i treści powiązanych w jedną płynną ścieżkę.
Wiele formatów treści
Artykuły, galerie, newsy i kategorie musiały tworzyć spójną strukturę, łatwą do skanowania na małym ekranie.
Mobile jako priorytet
Większość interakcji odbywała się na telefonie, dlatego widoki musiały być czytelne, szybkie do skanowania i wygodne w obsłudze.
Dalsza eksploracja serwisu
Artykuł miał prowadzić do galerii, podobnych treści i kolejnych materiałów, a nie kończyć ścieżkę użytkownika.
Najważniejsze decyzje projektowe
Najważniejsze zmiany dotyczyły trzech obszarów: czytelności artykułu, płynnego przeglądania galerii oraz elementów, które zachęcały użytkownika do dalszej interakcji z serwisem.
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.
Widok artykułu miał działać nie tylko jako miejsce czytania, ale też jako punkt wejścia do dalszej eksploracji serwisu.
- Wyraźna kategoria artykułu
- Widoczne przejście do galerii
- Powiązane treści pod artykułem
Widok galerii
Odświeżyłam widok galerii, zwiększając ekspozycję zdjęcia i upraszczając przechodzenie między kolejnymi materiałami.
Galerie są jednym z ważniejszych typów treści w serwisie, dlatego ich układ musiał wspierać szybkie, płynne i intuicyjne przeglądanie.
- Duża przestrzeń dla zdjęcia
- Wygodne przewijanie gestem
- Osobny wariant dla materiałów video
Elementy angażujące
Do projektu dodano elementy wspierające interakcję, takie jak sondy, oceny artykułów oraz odnośniki do forum.
Ich celem było zwiększenie zaangażowania użytkowników i zachęcenie ich do dalszego korzystania z serwisu.
- 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
Jednym z celów redesignu było zachęcenie użytkowników do dalszego przeglądania serwisu — przechodzenia z artykułu do galerii, a następnie do kolejnych powiązanych treści.
Zamiast traktować artykuł i galerię jako osobne, zamknięte widoki, projekt łączył je w jedną ścieżkę dalszego przeglądania serwisu.
Projekt wspierał naturalne przechodzenie między kolejnymi materiałami, co lepiej odpowiadało na sposób korzystania z serwisu w ruchu mobilnym i artykułowym.
Dodatkowe usprawnienia
Architektura informacji
Uporządkowano kategorie i strukturę serwisu, aby użytkownik szybciej rozumiał, gdzie się znajduje i łatwiej przechodził do interesujących go treści.
Transparentność i wiarygodność
Do stopki dodano ważne informacje organizacyjne i formalne, które wzmacniały wiarygodność serwisu i ułatwiały dostęp do podstawowych informacji o stronie.
Struktura strony
Widoki zostały uporządkowane tak, aby hierarchia treści była czytelna, a użytkownik mógł łatwiej przechodzić między artykułami, galeriami i materiałami powiązanymi.
Wersja AMP
Przygotowano wersję AMP, która wspierała szybsze ładowanie treści na urządzeniach mobilnych i poprawiała komfort korzystania z serwisu na telefonie.
Wybrane elementy UI
Przygotowałam wybrane elementy UI, które pomagały zachować spójność między artykułami, galeriami, kategoriami i modułami contentowymi.
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ą, jak portal działa 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 lepiej wspiera szybkie przeglądanie serwisu na urządzeniach mobilnych.
Strona główna
Kategorie
Galeria zdjęć
Strona artykułu
Kategorie
Podsumowanie
Redesign Styl.fm koncentrował się nie tylko na odświeżeniu warstwy wizualnej, ale przede wszystkim na poprawie sposobu 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 treści powiązanych oraz dodania elementów angażujących.
Po wdrożeniu zmian dane z Google Analytics pokazały wyraźny wzrost skali ruchu oraz zmianę sposobu korzystania z serwisu. Portal lepiej odpowiadał na ruch mobilny, wejścia bezpośrednio do konkretnych artykułów i dalsze przechodzenie między powiązanymi treściami.