Biznes i usługi: templatka dla sieci franczyzowej

Witam w pierwszym artykule cyklu dla webmasterów pt."UX-owe podejście do doboru templatki", dzięki któremu będziecie mogli nauczyć się jak sprawnie przepracować fazę koncepcyjną z Klientem i wdrożyć templatkę do dowolnego CMS-a. Metodologia tutaj zaprezentowana czerpie garściami z tzw. "podejścia UX-owego" (ja tak to nazywam), w którym centralną częścią jest Użytkownik (tzw. User-Centered Design), a wybory, których dokonujemy jako Wdrożeniowiec, zorientowane są na podniesienie efektywności działań tego Użytkownika w drodze do osiągnięcia sukcesu.

Na początek: strona franczyzowa sieci kawiarni

W tym artykule opiszę przypadek stworzenia strony internetowej dla firmy z branży kawiarnianej, polskiej sieci oferującej możliwość wypicia kawy, również z deserem. Starmug wydaje się być odrobinę jak klon zachodnich sieciówek, szukający swojego miejsce na rynku jako firma patriotyczna - barwy brandu to czerwień, głęboki brąz i biel. Firma posiada już dziesięć lokali w trzech województwach i szybko rozszerza zasięg.

Starmug oferuje to, co powinna oferować nowoczesna kawiarnia: możliwość wypicia kawy na miejscu, w kawiarni z przytulnym wnętrzem, ale również zamówienia na wynos. Do tego kilka dodatków - ciasta, galaretki. W sezonie lody naturalne.

Firma poszukuje franczyzobiorców, chce stopniowo zwiększać ilość lokali w Polsce. Właścicieli firmy interesuje zwiększenie tempa ekspansji na inne województwa. W tym celu mamy za zadanie stworzyć stronę internetową dla potencjalnych zainteresowanych otwarciem kawiarni pod marką Starmug.

Firma posiada dobrze rozwinięty profil w serwisie Facebook. Głównym odbiorcą produktów i usług firmy są osoby w wieku 20-40 lat, często są to rodziny, również z dziećmi. Kawiarnie mają lokalizację w miejscach gwarnych, często uczęszczanych przez rodziny, np. na zakupach (centra handlowe). Sukcesem będzie zwiększenie zainteresowania wśród potencjalnych franczyzobiorców i zwiększenie liczby wysokiej jakości lokali. Firma posiada dobrze opracowany, choć leciwy już, branding.

Użytkownicy

W przypadku tego projektu tak naprawdę mamy jedną główną personę: osobę zainteresowaną otwarciem własnej kawiarni pod marką Starmug. Projektowanie pod tak ogólnie określonego odbiorcę byłoby ryzykowne - żyjemy przecież w czasach, w których pokolenia (X/Y/jak by ich nie określać) są różnorodne, choć działają w bardzo podobnych kontekstach, za pomocą relatywnie podobnych narzędzi. Określimy sobie zatem 2 persony o bardzo podobnych scenariuszach:

- Mariola, była urzędniczka, która w wieku 54 lat postanowiła założyć własny biznes. Mariola jest już seniorem, więc potrzebuje bardzo poukładanej informacji, przekazanej prostszym językiem, dodatkowo okraszonej zdjęciami, które wpłyną na jej wyobraźnię. Nasza potencjalna franczyzobiorczyni będzie korzystała ze swojego nie najnowszego już komputera do przejrzenia oferty firmy Starmug. Mariola nachętniej umówiłaby się na spotkanie i zadała wszystkie możliwe pytania, ale rozumie, że dzisiejsza rzeczywistość to komunikacja na odległość i przynajmniej na razie musi poradzić sobie online. Mariolę określimy jako raczej introwertyczkę, ale aspirującą do roli odpowiedzialnej szefowej.

- Tomek, 33-letni, świeżo upieczony tato, który miał dość pracy w korporacji i postanowił zainwestować oszczędności w swój własny biznes. Tomek posiada smartfon, tablet i laptop, więc strona musi poprawnie wyświetlać się na każdym z tych urządzeń. Tomek oczekuje konkretów i możliwości korespondencji mejlowej z osobą kontaktową z firmy Starmug. Z chęcią przejrzy profil firmy na Facebook-u, by ocenić dynamikę rozwoju firmy. Tomek jest entuzjastą nowoczesnych technologii i umiarkowanym ekstrawertykiem. W poprzedniej pracy dowodził małym zespołem, więc powinien poradzić sobie w nowej roli.

Mariola i Tomek przede wszystkim będą poszukiwali informacji na temat firmy (szczególnie - planów rozwoju), opisu warunków przystąpienia do programu franczyzowego i możliwości szybkiego kontaktu z osobą obsługującą franczyzę po stronie firmy Starmug. O firmie mogą poczytać na oficjalnej stronie (już taka istnieje, choć główna komunikacja z klientami opiera się o Facebook-a), ale szefostwo firmy stwierdziło, że jest potrzeba przygotowania treści specjalnie dla zainteresowanych franczyzą - stąd pomysł na stronę dla tego typu odbiorców.

Dopasowanie

Szukamy templatki, która będzie oferowała mocno prezentacyjny charakter nowo stworzonej strony. Musi być jednocześnie nowoczesna i przejrzysta. Nie chcemy przestraszyć potencjalnych franczyzobiorców zbyt wyszukanymi rozwiązaniami. Oczekujemy po templatce wykorzystania responsywności (RWD).

Mój wybór padł na Jumerix, całkiem nową templatkę dla Joomla, z oferty Template Monster.

Komentarz wdrożeniowy

Jumerix to templatka kompatybilna z najświeższą linią Joomla, do tego korzysta z Bootstrapa 3.0. Skorzystamy z kilku wbudowanych właściwości, które wychodzą na przeciw naszym potrzebom. Z pewnością trzeba będzie dopracować kolorystykę, ponieważ wiodące kolory odbiegają od kolorów brandu firmy StarMug.

Architektura informacji

Demo templatki Jumerix wskazuje, że Jumerix idealnie odpowiada na potrzeby naszych użytkowników. Na pierwszej stronie możemy "zagrać" pięknym zdjęciem z wnętrza kawiarni, być może ekipy z szefem lokalu. Następnie wylistujemy zalety posiadania własnej kawiarni Starmug i poprowadzimy użytkownika w głąb serwisu, opisując pokrótce zasady przystąpienia do franczyzy.

Funkcjonalności

Potrzebujemy następujące funkcjonalności:

• mikroblog (skorzystamy z wbudowanej funkcjonalności Joomla i wyświetlimy przegląd artykułów),
• formularz kontaktowy (Jumerix jest na to gotowy),
• na pewno przyda się sekcja FAQ (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/faqs),
• możemy przedstawić szefostwo firmy i managerów lokalnych w bardzo przyjazny sposób (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/our-team),
• to spodoba się Marioli: przejrzysty sposób pokazania w kilku krokach w jaki sposób zostać franczyzobiorcą Starmug (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/process),
• mamy również wbudowane style dla formularzy aplikacyjnych (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/careers).

Propozycja zmian w stylach (CSS)

Oryginalnie Jumerix jest w kolorach przekłamanego niebieskiego, fioletu i żółtego. Wykorzystamy więc możliwość nadpisania styli CSS i podmienimy kolorki na stronie. Pamiętajcie, by zmiany zapisywać do pliku custom.css tak, by nie stracić zmian np. przy aktualizacji templatki.

Kolory naszego brandu w heksach to:

• czerwony #A81D1D;
• głęboki brąz #3A1E09;

Spójrzmy na wylistowane wyżej adresy i zmiany, które można wprowadzić relatywnie bezboleśnie:

• w sekcji FAQ (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/faqs) powinniśmy zmienić kolory tekstu na hoverze tabów i tło aktywnego taba:

   .custom .panel-group .panel-heading a {
    background: #A81D1D;
    }
    .custom .panel-group .panel-heading:hover a {
    color: #FFFFFF;
    }
    .custom .panel-group .panel-heading a.collapsed:hover {
    color: #A81D1D;
    }

• prezentacja pracowników (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/our-team) - tutaj przydałoby się zmienić kolory fontów i ikonek kontaktowych na te zgodne z brandem Starmug:

  .mod-newsflash-adv__team_about .item .item_content .item_title {
    color: #A81D1D;
    }
    .mod-newsflash-adv__team_about .item .item_content .item_introtext span.link_color {
    color: #3A1E09;
    }
    .mod-newsflash-adv__team_about .item .item_content .item_introtext .social-links li a {
    color: #A81D1D;
    }

• kroki (http://livedemo00.template-help.com/joomla_60060_v2/index.php/pages/process) - tutaj możemy przekolorować tła kroków:

  .moduletable.work-process .mod-newsflash-adv__work-process .row:nth-child(even) {
    background: #A81D1D;
    }
    .moduletable.work-process .mod-newsflash-adv__work-process .row:nth-child(even) {
    background: #3A1E09;
    }
    .moduletable.work-process .mod-newsflash-adv__work-process .row:nth-child(even) .item_content-icon {
    background: #3A1E09;
    }
    .moduletable.work-process .mod-newsflash-adv__work-process .row:nth-child(odd) .item_content-icon {
    background: #A81D1D;
    }

Możemy jeszcze poprawić kilka innych kolorów, takich, jak linki, czy duże buttony ze strony głównej:

• główny przycisk Call To Action:

    .swiper-slide-caption .btn {
    background: #A81D1D;
    }
    .swiper-slide-caption .btn:hover {
    background: #FFFFFF;
    }

• przycisk "read more":

  .mod-article-single__whatwedo-top .btn.readmore {
    background: #A81D1D;
    }
    .mod-article-single__whatwedo-top .btn.readmore:hover {
    color: #FFFFFF;
    background: #3A1E09;
    }

Nie są to oczywiście wszystkie poprawki, które powinniśmy wprowadzić, ale dzięki tej próbce z pewnością będziecie w stanie dokonać dalej idących zmian, a przede wszystkim podpasować kolorystykę templatki pod Wasz konkretny przypadek wdrożeniowy.

Podsumowanie

To by było na tyle. Oczywiście nie wyczerpałem tematu - ten artykuł to jedynie "zajawka" do tego, byście samodzielnie mogli spojrzeć na templatki z innego poziomu: bardziej analitycznie, profesjonalnie, dobierając rozwiązania pod konkretne potrzeby. Do zobaczenia w następnym artykule.

Wszystkie znaki firmowe i marki, nazwy firm i osoby zostały wymyślone na potrzebę tego artykułu. Jakiekolwiek podobieństwa z tworami ze świata realnego są niezamierzone i przypadkowe.

Głosowanie zostało zamknięte. Zapraszamy pod koniec listopada - kolejny artykuł z cyklu będzie poświęcony templatce z branży "Edukacja i Książki".