...

Aplikacja dedykowana - katalog i konfigurator produktów Derby

by maciej-chmielowski

on

Report

Category:

Software

Download: 0

Comment: 0

582

views

Comments

Description

Download Aplikacja dedykowana - katalog i konfigurator produktów Derby

Transcript

  • 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
  • Fly UP