Skip to main content
Secret of Taste 2.0! 😍
07/08/2020
Marek
UI Designer & Developer
Tak, w końcu! 🥳

Nowe przepisy nadchodzą, a wraz z nimi blog zbudowany na nowo! Jesteśmy dumni z tego, co udało się nam stworzyć. 🤩 Takiego bloga kulinarnego w naszym kraju jeszcze nie było. Poniżej opisałem w skrócie cały proces, a za kilka miesięcy pojawi się szczegółowe case study w moim portfolio. 😎
W każdy poniedziałek i sobotę na blogu będzie publikowany nowy przepis! 🔥 Dodatkowo na naszym Facebooku będą pojawiać się ciekawostki i zagadki kulinarne.

Cele i analiza konkurentów

Celem jest stworzenie popularnego bloga kulinarnego z nowatorskimi przepisami oraz lepszym i szybszym dostępem do nich.

Konkurencja to zazwyczaj blogi z dużą ilością różnych przepisów. Po większości z nich trudno się poruszać i szybko wyszukać przepis. Część z tych blogów ma słabe zabezpieczenia, zbudowana jest na starej technologii i nie jest dostosowana do urządzeń mobilnych, a to one generują dziś największy ruch w sieci. 😢

Pozyskanie danych

Stworzyłem ankietę, rozesłaliśmy ją po znajomych i dalej. Otrzymaliśmy bardzo dużo zaskakujących danych, dzięki którym odkryliśmy problemy obecnych blogów kulinarnych i nowe potrzeby różnych grup wiekowych użytkowników. 👦👩‍🦰👵

Problemy obecnych blogów kulinarnych
  • 😩 trudna dostępność, szczególnie na urządzeniach mobilnych
  • 😩 korzystanie ze starych technologii i praktyk
  • 😩 słabe zabezpieczenia
  • 😩 wiele nieużywanych, obciążających serwer funkcji
  • 😩 długie i niepotrzebne opisy potraw w przepisach
  • 😩 irytujące, wyskakujące reklamy w każdym miejscu
Rozwiązanie
  • 😍 stworzenie lekkiego i prostego bloga
  • 😍 zwiększenie dostępności i możliwości eksplorowania bloga
  • 😍 nowe technologie i dobre wyniki w audycie
  • 😍 ograniczenie reklam
Plan działania
  1. Opracowanie projektu UI/UX.
  2. Przygotowanie znaku rozpoznawalnego dla bloga oraz zaprojektowanie zestawu ikon i ilustracji.
  3. Stworzenie motywu Wordpress od zera na podstawie projektu.
  4. Ograniczenie ilości instalowanych wtyczek.
  5. Stworzenie aplikacji PWA (Progressive Web Apps). 😎
  6. Ograniczenie reklam do jednej, małej na samym dole.
  7. Dostosowanie pod SEO i schema.
  8. Audyt, a następnie optymalizacja wydajności, dostępności, SEO, PWA.
Projekt
  1. Przygotowanie wstępnej architektury informacji oraz user flow (ścieżki poruszania się po blogu). 🤔
  2. Stworzenie makiet high fidelity (wysokiej jakości).
  3. Stworzenie projektu strony głównej i najważniejszych zakładek dla komputerów, tabletów oraz urządzeń mobilnych.
  4. Przygotowanie szybkiego prototypu.
  5. Stworzenie zestawu ikon.
  6. Stworzenie zestawu ilustracji.
  7. Przygotowanie mini design systemu.
  8. Przygotowanie ikon oraz splash screenów pod aplikację PWA.
Wdrożenie
  1. Wygenerowanie czystej struktury motywu Wordpress z dodanym Bootstrapem 4 + Sass.
  2. Przygotowanie szkieletu bloga na podstawie projektu.
  3. Napisanie funkcji, aby ograniczyć ilość zainstalowanych wtyczek.
  4. Napisanie mechanizmu dodawania przepisów zawierających strukturę schema recipe i SEO. 🤓
  5. Napisanie stylów na podstawie projektu.
  6. Dodanie alertów i powiadomień w zależności od wykonanej akcji.
  7. Dodanie zabezpieczenia antybotowego.
  8. Przygotowanie pliku manifest, dodanie meta tagów dla systemów iOS, service workera i uruchomienie aplikacji PWA.
  9. Testowanie aplikacji, optymalizacja i dostosowanie pod system Android oraz iOS.
  10. Integracja z usługami Google.
  11. Audyt za pomocą narzędzia Lighthouse (Chrome DevTools).
  12. Optymalizacja i poprawki w celu uzyskania najwyższych wyników.
  13. Osiągnięcie 💯 na 💯 w kategorii dostępność, najlepsze praktyki, SEO oraz wszystkie punkty zgodności w aplikacji PWA. 💪
Rozwój
  1. Optymalizacja oraz dostosowywanie bloga do potrzeb użytkowników.
  2. Zwiększenie aktywności, wprowadzenie postów angażujących w social mediach.
  3. Uruchomienie reklam.
  4. Systematyczne dodawanie przepisów. 🤫
  5. Pozyskanie większej ilości aktywnych użytkowników.
Pssst. Jak znajdę więcej wolnego czasu, to zrobię wersję dark mode 🌗 (ciemną wersję UI 🦄).
Czas na ucztę

Już teraz gorąco zachęcamy do dodania bloga w formie aplikacji na ekran główny smartfona. 😎 Bez dodatkowego pobierania, wystarczy wykonać kilka kliknięć w przeglądarce. Na urządzeniach z Androidem wystarczy kliknąć baner i potwierdzić, a na urządzeniach z iOS wystarczy dodać aplikację ręcznie poprzez kliknięcie ikony udostępniania na dolnym pasku Safari, a następnie wybrania opcji “Do ekranu początk.” i gotowe. Zachęcamy również do eksploracji bloga oraz co najważniejsze, korzystania ze smacznych przepisów! Zbudowaliśmy blog na nowo z myślą o Was! 💛

Jeśli macie jakieś pytania lub propozycje, to odsyłamy Was do zakładki 👉 kontakt.