MerixGames

23 lutego 2016

/ case studies

Jak to robimy: Alabaster i Tara Anthun - elegancki sklep internetowy na Magento

Ciekawi cię, jak wygląda praca nad projektem e-commerce? Chcesz dowiedzieć się, co trzeba zrobić, by stworzyć elegancki sklep internetowy? W ramach cyklu "Jak to robimy" przedstawiamy, co dzieje się za kulisami agencji interaktywnej, co pozwoli na rozwianie wszelkich waszych wątpliwości! Dzisiaj macie możliwość poznać dwa projekty - Alabaster i Tara Anthun.

W połowie maja 2014 skontaktował się z nami Jan Anthun, któremu nasze usługi polecił jeden z naszych klientów z Norwegii. Wraz z żoną Tarą planowali stworzyć markę, pod którą mieli sprzedawać na rynku norweskim wysokiej jakości pościele w atrakcyjnych cenach. Sprzedaż prowadzona miała być przede wszystkim online, lecz w związku z niewielkim doświadczeniem w tym zakresie potrzebowali oni partnera, który pomógłby im przełożyć wizję na konkretne rozwiązania technologiczne. W tym momencie rozpoczęła się nasza współpraca.

Oczekiwania klienta i cel projektu

Stworzenie sklepu internetowego zajmującego się sprzedażą pościeli na rynku norweski. Główne założenia to prosta obsługa, czytelność oraz elegancki design nadający poczucie ekskluzywności.

Cele poboczne

  • grupowanie produktów prostych i konfigurowalnych,
  • dostępność sklepu na urządzeniach mobilnych,
  • tworzenie wishlisty i możliwość opublikowania jej w mediach społecznościowych,
  • promocja sklepu poprzez prowadzenie bloga,
  • opcja zamówienia prezentu,
  • donacja na cele charytatywne.

UX i design

Pracę nad projektem rozpoczęliśmy od analizy potrzeb Klienta i działań ich konkurencji. Już na samym początku okazało się, że najlepszym rozwiązaniem technologicznym będzie tutaj open source'owa platforma e-commerce - Magento Community Edition. Po doprecyzowaniu wszystkich najważniejszych kwestii dotyczących wymagań Klienta przystąpiliśmy do tworzenia makiet. Iteracyjne podejście do tego procesu umożliwiło pozwoliło Klientowi na zapoznanie się z proponowaną architekturą sklepu już na wczesnym etapie, dzięki czemu cały czas mogliśmy konsultować poszczególne widoki i elementy strony. Faza ta zakończona została przygotowaniem technicznej specyfikacji wdrożeniowej oraz pełną makietą stworzoną przy pomocy programu Axure RP.

Na podstawie makiet, analizy przedwdrożeniowej, analizy konkurencji i briefu od Klienta przygotowaliśmy design. Ten w założeniu miał oddawać skandynawski charakter marki i jedocześnie sprawiać wrażenie ekskluzywności sprzedawanych produktów.

Wdrożenie sklepu na platformie Magento

Po stworzeniu designów dla wszystkich kluczowych widoków przeszliśmy do wdrożenia sklepu. W przypadku interfejsu strony szczególny nacisk położony został na odpowiednie dostosowanie strony według podejścia RWD (Responsive Web Design), które umożliwia komfortowe poruszanie się po sklepie i dokonywanie zakupów na różnych urządzeniach, w tym również mobilnych.

Wprowadziliśmy także wiele rozwiązań związanych z funkcjonalnym aspektem strony

  • dzielenie się wishlistą w mediach społecznościowych - każdy użytkownik tworząc swoją wishlistę może ją upublicznić na stronie oraz opublikować w social mediach.
  • produkty grupowane + konfigurowalne w grupowanych - wiele produktów w sklepie wchodzi w skład kilkuelementowych zestawów (np. prześcieradło, poszewka na poduszkę i poszewka na kołdrę), które można dowolnie kompletować lub zamawiać każdy element oddzielnie. Z tego względu konieczne było więc zastosowanie produktów grupowalnych. Dodatkowo rozszerzyliśmy tę funkcjonalność także o możliwość dodawania produktów konfigurowalnych do grup produktów w taki sposób, by z poziomu jednego widoku można było dodać do koszyka wielu elementów w różnych wersjach kolorystycznych czy rozmiarach.
  • blog i promocja najnowszych postów w mediach społecznościowych - jak wiadomo, odpowiednio dobrane treści mogą zachęcić odbiorców do zakupu, w związku z czym Klient postawił na prowadzenie bloga firmowego. Obok funkcjonalności blogowej wprowadziliśmy również widget promujący najnowsze wpisy. Przeczytaj jak dbać o treści w sklepie internetowym w artykule Poradnik 'E-commerce od podstaw" (cz. 1): Jak zadbać o treści w sklepie internetowym.
  • możliwość zamówienia prezentu - dzięki zastosowaniu dodatkowego modułu umożliwiliśmy użytkownikom zamawianie produktów na prezent. Udostępnione zostały także opcje dodatkowe, takie jak wybór, które produkty mają zostać zapakowanie, wybór ozdobnego papieru, pudełka oraz wzoru bileciku dołączanego do prezentu.
  • datki na cele charytatywne - nasz Klient przy okazji prowadzenia biznesu ma na uwadze również dobro innych, co przełożyliśmy na możliwość przekazania określonej sumy na cele charytatywne w ramach dokonywania zakupów. Każdy użytkownik na poziomie koszyka może określić sumę, jaką chce wesprzeć potrzebujących.

Zastosowane moduły

Własne

  • produkty konfigurowalne jako element produktów grupowalnych,
  • wsparcie celów charytatywnych,
  • dzielenie się wishlistami.

Moduły zewnętrzne

  • zmodyfikowany moduł bloga - AheadWorks Blog,
  • moduł opcji prezentowych - Magestore Gift Wrap,
  • moduł obsługi płatności – DIBS,
  • moduł obsługi dostaw – Bring,
  • moduł integracji z aplikacjami Mailchimp i Mandrill - Ebizmarts Magemonkey,
  • moduł do tworzenia Pop-up'ów - TRM Promotional Pop-ups.

Alabaster - Responsive Web DesignCzas realizacji

  • Czerwiec – Sierpień 2014 - prace koncepcyjne, tworzenie makiet i specyfikacji,
  • Sierpień 2014 - Wrzesień 2014 - design,
  • Wrzesień - Listopad 2014 - prace wdrożeniowe związane z back-end i front-end developmentem oraz testowaniem sklepu.

Współpraca z Alabaster zaowocowała stworzeniem ciekawego i nowoczesnego sklepu internetowego z wyjątkowym, skandynawskim charakterem. Zastosowanie technologii RWD pozwoliło dotrzeć do szerokiej grupy użytkowników urządzeń mobilnych, która stanowiła około 40% wszystkich użytkowników odwiedzających sklep Alabaster.no. Recenzję naszej współpracy możecie przeczytać w serwisie Clutch.co

Czas na zmiany – redesign strony

W związku ze zmianą marki, a przez co także logotypu strony, Klient odezwał się do nas pięć miesięcy później w sprawie dostosowania typografii oraz schematu kolorystycznego strony do nowego wizerunku firmy. Zamiast chłodnego, kojarzącego się ze Skandynawią głównego koloru Baja Blue postanowiliśmy wykorzystać cieplejszy, wpadający w pomarańcz kolor żółty. Jako główny font wybraliśmy Lato, nagłówki na blogu wykorzystują zaś Lucię, która imituje pismo odręczne.

Layout, zwłaszcza strony głównej, został zmieniony na siatkę boxów. Nowy wygląd zyskał również listing bloga, gdzie zmieniliśmy siatkę na układ listy, sekcję nagłówkową w widoku postu bloga rozciągnęliśmy zaś na pełną szerokość strony.

Przyczyny zmiany designu

  • zmiana marki sklepu z Alabaster (pod tą marką wciąż sprzedawane są pościele) na TaraAnthun (od nazwiska właścicielki),
  • zmiana asortymentu - oprócz wysokiej jakości pościeli sprzedawanej wciąż pod marką Alabaster w asortymencie pojawiły się naturalne kosmetyki, mydła oraz aromatyczne świece różnych marek,
  • zmiana charakteru sklepu na butik oraz postawienie na budowanie świadomości i trendów opartych na działalności i doświadczeniu właścicielki.

Wprowadzone modyfikacje i nowe funkcjonalności

  • zmiana layoutu strony głównej i dostosowanie pozostałych stron,
  • zmiana kolorystyki i typografii pasujących do nowego brandu,
  • wprowadzenie nowego asortymentu,
  • wprowadzenie elementów treści z zewnętrznych serwisów: YouTube, Pinterest, Instagram,
  • zwiększenie wykorzystania newsletterów oraz umieszczenie w wielu miejscach serwisu formularza zapisu do newslettera,
  • zmiana layoutu bloga oraz poszerzenie go o kategoryzację wpisów.

Wdrożenie zmian w e-sklepie

Wśród nowych funkcjonalności znalazły się między innymi boxy z feedami Instagrama i Pinteresta, w którym wyświetlane są najnowsze zdjęcia i piny. Dodatkowo na stronie głównej dodany został box promujący wideo z YouTube.
Na blogu pojawiły się także kategorie oraz sekcja z promowanymi postami. W wielu miejscach na stronie postawiono na zachęcenie użytkownika na zapis do newslettera.Tara Anthun - strona internetowa

Czas realizacji

Marzec - Maj 2015 - makietowanie, specyfikacja, design,

Maj - Wrzesień 2015 - prace wdrożeniowe związane z back-end i front-end developmentem oraz testowaniem sklepu.

Dodatkowa aktywność w mediach społecznościowych, uwidocznienie jej na stronie sklepu oraz zwiększenie nacisku na budowanie bazy subskrybentów newslettera dały możliwość zbudowania społeczności wokół marki TaraAnthun. Takie działania skutecznie kreują wizerunek i zaufanie wśród obecnych i potencjalnych klientów, zwiększając tym samym potencjał sprzedażowy sklepu. Wyzwanie, jakie niósł ten projekt, było o tyle ciekawe, że należało się skupić na dodatkowych celach marketingowych klienta. Redesign i nowe funkcjonalności umożliwiły realizację tych celów.

Podsumowanie

Po kilku miesiącach od podjęcia decyzji o realizacji projektu, klient otrzymał dostosowany do bieżących potrzeb sklep internetowy. Ponieważ było to zapełnienie pewnej niszy na rynku norweskim, sklep stał się świetnym narzędziem do sprawdzenia wybranego modelu sprzedaży, doboru asortymentu oraz rozpoznania co sprawi, że klienci będą kupować takie produkty. Po zweryfikowaniu strategii marketingowej po kilku miesiącach działalności spowodowało, że klient zwrócił się do nas z prośbą o przeprowadzenie zmian. Po dostosowaniu sklepu do nowych założeń TaraAnthun kontynuuje skuteczną sprzedaż z wykorzystaniem stworzonego przez nas sklepu internetowego.

 

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.