Case study✔ Klient✔ Cele ✔ Zespół ✔ Projektowanie ✔ Funkcje ✔ UI, UX, AI ✔ Podsumowanie

✔ Zaufali nam ✔ Referencje

Klient

★ Od 20 lat na rynku producentów skarpet★ Jeden z europejskich liderów wprowadzenia

do produkcji skarpet z przędz wysokoelastycznych★ Najwyższa jakość produktów dzięki nowoczesnemu

parkowi maszynowemu ★ Najnowszy design dla wymagających★ Ponadczasowa klasyka

Priorytety:

★ CUSTOMER PLEASURE ★ PREMIUM PRODUCTS ★ COMFORT USAGE ★ MODERN CHIC

Cele biznesowe

★ prezentacja produktów on-line

★ obsługa zamówień hurtowników

★ łatwość użytkowania

★ dostęp z urządzeń mobilnych

★ lead generation

★ wsparcie wizerunku firmy

★ wyróżnienie na tle konkurencji

Cele biznesowe - realizacja

★ prezentacja produktów on-line

★ obsługa zamówień hurtowników

★ łatwość użytkowania

★ dostęp z urządzeń mobilnych

★ lead generation

★ wsparcie wizerunku firmy

★ wyróżnienie na tle konkurencji

➔ zastosowanie modułu katalogu produktów w Iceberg CMS

➔ zmodyfikowany moduł “schowek” dla katalogu produktów

➔ dwa typy menu: główne i boczne, nawigacja okruszkowa

➔ Responsive Web Design (strona responsywna)

➔ dodatkowe funkcje na stronie dostępne po rejestracji

➔ indywidualny i oryginalny projekt graficznego

➔ dedykowana aplikacja

Zespół projektowy

DAMIAN Customer Account

Manager __________________________

odpowiedzialnyza zarządzenie projektem

(terminy, budżet, specyfikacja)

JUSTYNACreative director,

web designer __________________________

odpowiedzialnaza warstwę graficzną

(projekt strony głównej, projekt interfejsu aplikacji)

KONRADProgramista

(front-end developer) __________________________

odpowiedzialnyza wdrożenie projektów

graficznych i import produktów na stronę

GRZESIEKProgramista

(back-end developer) __________________________

odpowiedzialnyza programowanie

aplikacji

3 wstępne projekty graficzne

Finalny projekt

CMS: instalacja systemu ICEBERG CMS

● Autorski system do zarządzania treścią strony

● Interfejs przystosowany do obsługi na urządzeniach mobilnych

● Indywidualne dostosowanie widoku strony startowej panelu CMS

● Najważniejsze statystyki z Google Analytics

● Nowe moduły: artykuły, slajder, galeria, rejestracja, newsletter i inne

● Rozbudowane możliwości wspomagania SEO

Katalog produktów (1/3)Czytelna karta produktu:● nazwa/opis/parametry

rozmiar, kolor, ilość● podgląd produktów podobnych● duże zdjęcie główne + galeria zdjęć

dodatkowych + lupa● przyciski akcji:

● dodanie do e-formularza zamówienia● zapytanie o produkt

● social media: Facebook, Twitter, Pinterest

● 2 typy użytkowników o różnych możliwościach zawierania transakcji (oraz innych polach do do uzupełeniania przy rejestracji)

● dodatkowe pola w elektronicznym formularzu zamówienia: sposób opakowania, komentarz

Katalog produktów (2/3)

Wybrane aspekty UI, UX, AI

● animacje po najechaniu kursorem● zdjęcia kategorii produktów

z efektem paralaksy (podczas scrollowania część elementów przesuwa się szybciej, część wolniej, co powoduje złudzenie dwóch lub więcej ‘wymiarów’)

● stale widoczne i dynamicznie rozwijane menu produktowe

● czytelne przyciski akcji● okruszki (breadcrumbs) ● widget rejestracji/logowania

Katalog produktów (3/3)

Arkusz importu produktów

● excel →naturalne środowisko pracy

● przyspiesza czas aktualizacji kolekcji

● wygodny sposób na zarządzanie asortymentem

● każda wersja językowa posiada własny arkusz importu (różne produkty na różne rynki zagraniczne)

Na marginesie - na ile sposobów, z palety 24 kolorów, można zaprojektować skarpetę, która ma 5 pasków do wypełnienia kolorem? Odpowiedź: 20 475 sposóbów - tak narodził się pomysł na losowy dobór kolorów ; )

Aplikacja dedykowana: funkcje (1/3)Aplikacja pozwala zaprojektować (i zamówić) swój własny, niepowtarzalny wariant kolorystyczny wybranych modeli skarpet.

● możliwość dodania nowych modeli● różna liczba grupowanych elementów

kolorowalnych (w zależności od modelu)● paleta 24 kolorów (względy produkcyjne)● minimalna ilość - 3 szt. (względy

produkcyjne → przestrojenie maszyny może powodować wystąpienie defektów)

● zamówienie po zalogowaniu przez klientów indywidualnych i hurtowników

● przycisk “Zaskocz mnie” → losowe kolory

Aplikacja dedykowana: projekt (2/3)

Aplikacja dedykowana: technologia (3/3)

Przy tworzeniu aplikacji korzystaliśmy z następujących technologii:

➨ CSS 3

➨ jQuery

➨ HTML5

Wersja mobilna (RWD)

Wybrane aspekty

★ strona dostosowana do każego urządzenia (a nie tylko wybranych rozdzielczości ekranów)

★ menu boczne → ‘select menu’ (lista rozwijana)

★ menu główne → ‘hamburger menu’ (+ pojawia się w momencie przesunięcia strony do góry)

★ programistyczno-deweleoperskie sztuczki dla poprawy użyteczności ;)

➔ realizacja: marzec-maj 2015

(ok. 160 roboczogodzin)

➔ ok. 30 rozmów telefonicznych i 60 wymienionych e-maili

➔ 4-osobowy zespół projektowy

➔ 12 miesięcy wsparcia IT, gwarancji i aktualizacji CMS

➔ konfiguracja 3 domen

Przebieg prac 1. Analiza wymagań i celów biznesowych2. Przygotowanie specyfikacji i makiety

aplikacji3. Projektowanie graficzne strony głównej

w 3 różnych wariantach 4. 2x poprawki graficzne do SG5. Wdrożenie (zakodowanie) projektu SG6. Projektowanie graficzne

listy i karty produktu7. Wstępny import produktów

i wprowadzenie treści na podstrony8. Przeprowadzenie testów i wprowadzenie

poprawek funkcjonalnych9. Końcowy import produktów

10. Szkolenie on-line + wysyłka materiałów instruktażowych

11. Publikacja: http://skarpetyderby.pl/

Zarządzanie projektem

Prowadzimy projekty w: Asana.com <3Asana.com pozwala na:

➔ komunikację w zespole projektowym,

➔ podział projektu na zadania, ➔ przypisanie zadań członkom

zespołu + ustalenie terminów realizacji

➔ monitorowanie postępów realizacji projektu

Asana.com pomaga w przygotowaniu, realizacji i wdrożeniu projektu. Ułatwia jego kompleksową obsługę.

Zaufali nam

Damian Świerk

✉ damian@krakweb.pl☎ (+48) 530 555 521☏ (12) 429-30-13

Agencja Interaktywna Krakweb.plwww.krakweb.pl

www.marketing.krakweb.pl

ul. Rzemieślnicza 20/124B Kraków

Zapraszamy do współpracy

ZAPRASZAMY DO KONTAKTU