aplikacja dedykowana - katalog i konfigurator produktów derby
TRANSCRIPT
![Page 1: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/1.jpg)
Case study✔ Klient✔ Cele ✔ Zespół ✔ Projektowanie ✔ Funkcje ✔ UI, UX, AI ✔ Podsumowanie
✔ Zaufali nam ✔ Referencje
![Page 2: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/2.jpg)
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
![Page 3: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/3.jpg)
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
![Page 4: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/4.jpg)
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
![Page 5: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/5.jpg)
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
![Page 6: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/6.jpg)
3 wstępne projekty graficzne
![Page 7: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/7.jpg)
Finalny projekt
![Page 8: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/8.jpg)
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
![Page 9: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/9.jpg)
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
![Page 10: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/10.jpg)
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
![Page 11: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/11.jpg)
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)
![Page 12: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/12.jpg)
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
![Page 13: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/13.jpg)
Aplikacja dedykowana: projekt (2/3)
![Page 14: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/14.jpg)
Aplikacja dedykowana: technologia (3/3)
Przy tworzeniu aplikacji korzystaliśmy z następujących technologii:
➨ CSS 3
➨ jQuery
➨ HTML5
![Page 15: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/15.jpg)
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 ;)
![Page 16: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/16.jpg)
➔ 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/
![Page 17: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/17.jpg)
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ę.
![Page 18: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/18.jpg)
Zaufali nam
![Page 19: Aplikacja dedykowana - katalog i konfigurator produktów Derby](https://reader034.vdocuments.pub/reader034/viewer/2022042818/55b53353bb61eb3a258b45a4/html5/thumbnails/19.jpg)
Damian Świerk
✉ [email protected]☎ (+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