Jedzenie i restauracja: templatka dla małej, lokalnej sieci burgerowni

Witam w trzecim 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.

Kolejny nasz Klient: mała, lokalna sieć burgerowni

W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla małej, lokalnej sieci burgerowni, mieszczącej się w dużym mieście wojewódzkim. Burger Hut to powstała dwa lata temu sieć punktów (obecnie 4) serwująca burgery z dodatkami i napojami.

Burger Hut to przede wszystkim dobre jedzenie w dobrej cenie. Sieć zorientowana jest na osoby młode, kupujące na wynos, również z dowozem. Miejscówki Burger Hut są nieduże (przeważnie obszar udostępniony klientom nie przekracza 10 metrów kwadratowych), umiejscowione są na osiedlach z tzw. "wielkiej płyty", a także w centrum biznesowym, w obrębieg jednego miasta 350-tysięcznego. W menu sieci znajdziemy 8 rodzajów burgerów (3 rodzaje bułek do wyboru), kilka rodzajów dodatków (np. frytki, talarki, sałatki), a także napoje. Głównymi klientami są młodzi ludzie poszukujący szybkiego posiłku, również grupy młodzieży i rodziny spacerujące po osiedlach. Sieć posiada własną domenę, która przekierowuje na profil firmy w serwisie Facebook. Włodarze sieci potrzebują jednak strony dedykowanej kilku grupom odbiorców: klientom (poznanie marki), a także potencjalnym franczyzobiorcom.

Firma posiada leciwe już logo, które jednak na chwilę obecną "musi wystarczyć".

Kolory brandu to głęboki brązowy (jak grillowany burger wołowy) i brąz o zabarwieniu miodowym, tak, jak flagowy sos podawany do burgerów.

Użytkownicy

Postanowiłem wyodrębnić dwie grupy odbiorców: młodzież szukająca wysokiej jakości fast-foodowego jedzenia i pracownicy korzystający z Burger Hut-a przy okazji przerwy obiadowej:

- Adam odwiedza Burger Hut przynajmniej 2-3 razy w miesiącu, często w weekendy, ze znajomymi (np. w drodze na koncert). Najczęściej kupują na wynos i organizują szybki piknik nad rzeką. Adam nie lubi typowych, zachodnich fast-foodów, ale nie potrafi odmówić sobie dobrego burgera z wysokiej jakości mięsem, szczególnie, że w jego paczce panuje moda, wręcz kult, Burger Hut-a.

- Jola pracuje jako projektant graficzny w centrum biznesowym, w którym znajduje się jedna z miejscówek Burger Hut. Jola jest bardzo zapracowana i często zostaje w pracy do późnych godzin popołudniowych. W biurze utarło się, że zamawiają obiad albo z ulubionej pizzerii (dowóz), albo któryś ze szczęśliwców ma misję zakupu i dostarczenia burgerów (dzwonią wcześniej z zamówieniem) do ich biura.

Dopasowanie

W tym przypadku skorzystamy z templatki, która daje możliwość modnego zaprezentowania głównego produktu, czyli pysznych burgerków, a mianowicie #57779. Duże przestrzenie na obrazy, ciekawy układ i "jedzeniowa" typografia to główne zalety tej templatki.

Komentarz wdrożeniowy

Templatka wybrana pod to konkretne wdrożenie jest kompatybilna z najświeższą linią Joomla, korzysta z Bootstrapa w wersji 3.0. Mamy tu kilka ciekawych rozwiązań, jak slajder na stronie głównej i efekty tranzycji treści, która pojawia się przy scrollowaniu.

Architektura informacji

Po pierwszej rozmowie z Klientem okazało się, że potrzebujemy tylko czterech pozycji w menu: o Nas, Menu, dla Franczyzobiorców, Kontakt.

Nie będziemy tworzyć galerii jako osobnego elementu w nawigacji, ponieważ samymi lokalami "nie ma co się chwalić" (cyt. Klienta), ale już w menu jak najbardziej przedstawimy wygląd wszystkich rodzajów burgerów. Wszystkie elementy to tak naprawdę pojedyncze artykuły statyczne, z tekstem i zdjęciami. Prosta robota!

Funkcjonalności

Potrzebujemy następujące funkcjonalności:

"Zagramy" tu przede wszystkim stroną główną, na której można stworzyć doskonały mariaż zdjęć i tekstu opisującego Burger Hut. Pod linkiem "o Nas" możemy przedstawić historię i filozofię firmy. Linki "Menu" i "Dla Franczyzobiorców" będą prawdopodobnie bardziej spokojne w prezentacji treści (korzystając ze styli typu: https://livedemo00.template-help.com/joomla_57779/index.php/pages/elements). Mamy też ciekawą podstronę kontaktową, z której skorzystamy w naszym przypadku.

Propozycja zmian w stylach (CSS)

Nasza templatka jest przede wszystkim czarno-biała, a kolory wprowadzają zdjęcia. Nie inaczej będzie w naszym wdrożeniu, ale pozwolę sobie zasugerować kilka drobnych zmian.

Kolory naszego brandu w heksach to:

• musztardowy-brązowy-pomarańczowy (jakkolwiek by go nazwać) #DDB03E;
• głęboki brąz #51412B;
• i prosty biały, dopełniający, którego w naszej templatce mamy pod dostatkiem #FFFFFF;.

Postanowiłem zmienić jedynie kolor czarny fontów na białych elementach na kolor głębokiego brązu tak, by templatka wyglądała bardziej spójnie z firmowym brandem:

.icemegamenu > ul > li.active > a.iceMenuTitle, .icemegamenu > ul > li.hover > a.iceMenuTitle {
color: #51412B;
border-bottom: 2px solid #51412B;
border-top: 2px solid #51412B;
}

.icemegamenu > ul > li > a.iceMenuTitle {
color: #51412B;
}

h1 {
color: #51412B;
}

body {
color: #51412B;
}

.btn:not(.dropdown-toggle), .kbutton:not(.dropdown-toggle) {
color: #51412B;
border-bottom: 2px solid #51412B;
}

.page-header *[class*=heading-style]:after, .page_header *[class*=heading-style]:after {
border-top: 2px solid #51412B;
}

.page-header *[class*=heading-style] .item_title_part_last:before, .page_header *[class*=heading-style] .item_title_part_last:before {
border-top: 2px solid #51412B;
}

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. Kolejny artykuł z cyklu będzie poświęcony templatce z branży "Grafika i projektowanie" i pojawi się w styczniu 2017 roku.