Upload
maciej-chmielowski
View
588
Download
3
Embed Size (px)
Citation preview
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
✉ [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