Dla jednego z liderów rynku , producenta starpet - firmy Derby z Wrocławia zaprojektowaliśmy niesamowicie ciekawą aplikację dedykowaną Konfigurator Skarpet. Dodatkowo wykonaliśmy serwis internetowy wraz z CMS, szablonem graficznym RWD.

1. Case study
✔ Klient✔ Cele ✔ Zespół ✔ Projektowanie
✔ Funkcje ✔ UI, UX, AI ✔ Podsumowanie
✔ Zaufali nam ✔ Referencje

2. 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

3. 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

4. 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

5. Zespół projektowy
DAMIAN
Customer Account
Manager
__________________________
odpowiedzialny
za zarządzenie projektem
(terminy, budżet,
specyfikacja)
JUSTYNA
Creative director,
web designer
__________________________
odpowiedzialna
za warstwę graficzną
(projekt strony głównej,
projekt interfejsu aplikacji)
KONRAD
Programista
(front-end developer)
__________________________
odpowiedzialny
za wdrożenie projektów
graficznych i import
produktów na stronę
GRZESIEK
Programista
(back-end developer)
__________________________
odpowiedzialny
za programowanie
aplikacji

6. 3 wstępne projekty graficzne

7. Finalny projekt

8. 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

9. 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

10. 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

11. 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)

12. 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

13. Aplikacja dedykowana: projekt (2/3)

14. Aplikacja dedykowana: technologia (3/3)
Przy tworzeniu aplikacji
korzystaliśmy z następujących
technologii:
➨ CSS 3
➨ jQuery
➨ HTML5

15. 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 ;)

16. ➔ 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 biznesowych
2. Przygotowanie specyfikacji i makiety
aplikacji
3. Projektowanie graficzne strony głównej
w 3 różnych wariantach
4. 2x poprawki graficzne do SG
5. Wdrożenie (zakodowanie) projektu SG
6. Projektowanie graficzne
listy i karty produktu
7. Wstępny import produktów
i wprowadzenie treści na podstrony
8. Przeprowadzenie testów i wprowadzenie
poprawek funkcjonalnych
9. Końcowy import produktów
10. Szkolenie on-line + wysyłka
materiałów instruktażowych
11. Publikacja: http://skarpetyderby.pl/

17. Zarządzanie projektem
Prowadzimy projekty w: Asana.com <3
Asana.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ę.

18. Zaufali nam

19. Damian Świerk
✉ damian@krakweb.pl
☎ (+48) 530 555 521
☏ (12) 429-30-13
Agencja Interaktywna Krakweb.pl
www.krakweb.pl
www.marketing.krakweb.pl
ul. Rzemieślnicza 20/124B Kraków
Zapraszamy do współpracy
ZAPRASZAMY DO KONTAKTU