MerixStudio

Karta CASE STUDY

Założenia projektu

Kontakty z przyjaciółmi i dzielenie się z nimi informacjami o miejscach jakie się odwiedziło zawsze było dobrą zabawą. Niestety wraz z wzrastającym tempem życia, ciężko jest znaleźć odpowiednią platformę do dzielenia się tymi informacjami (przynajmniej w internecie). Tak powstała Karta.

Kiedy Samia Saleem i Dana Steffe skontaktowały się z nami w listopadzie, pokazały designy i opisały swój pomysł wiedzieliśmy, że czeka przed nami nie lada wyzwanie. Utalentowany duet designerów z Brooklynu miał bardzo przejrzysto sprecyzowane wymagania. Założeniem było stworzenie platformy, na której ludzie mogą dzielić się mapami i udzielać się towarzysko. Koncepcja graficzna, jak i UX/UI były przygotowane przez Samię i Danę, a naszym zadaniem było stworzyć czysty, skalowalny kod, na którym oparta została potężna aplikacja na Django.

Inspiracja

Aby dowiedzieć się więcej o Karcie, przedstawimy założenia, jakie Samia I Dana stworzyły podczas projektowania tej strony.

1

Wiedziałyśmy, że ma powstać w pełni sprawne narzędzie, nie tylko ze względu na użyteczność, ale także ze względu na formę i funkcję. Zawsze inspirowały nas designy produktów, które przekraczały granicę, łamały bariery, szczególnie w kwestii funkcjonalnej (i w dalszym ciągu były piękne i klasyczne). Adaptery Dieter’a Ramsa z lat 60tych, Słuchawki AIAIAI i designy architekta Johanes Norlander Arkitektur to tylko niektóre z inspiracji, które pomogły stworzyć Kartę.

2

Wiedziałyśmy, że User Experience był najważniejszym
elementem narzędzia, które chciałyśmy zbudować każdy
element, każdy szczegół strony, od fazy graficznej do
programowania, musiał pomagać w budowie UX.

Stworzyliśmy więcej niż kilka wersji designu na samym
początku projektu, ale po pewnym czasie musiałyśmy wrócić
do korzeni i podejść na świeżo do tematu. Pozwoliło nam to
stworzyć grafikę, która w pełni nas usatysfakcjonowała.
Na samym początku przyjęłyśmy
następujące założenia:

Form

W połączeniu z Look and feel’em stworzyłyśmy kolaż, który pokazywał w jakim kierunku chcemy pójść, wraz z pierwszą formą produktu. Minimalizm, ale z zawarciem wszystkich ważnych elementów. Nasze ograniczenie do minimum miało na celu zrobienie produktu, w którym znajdują się tylko najważniejsze funkcjonalności. Zawsze znajdzie się miejsce i czas na dodatkowe funkcjonalności, ale jeżeli miałybyśmy porównywać projekt do czegoś, to najlepszą analogią byłby lodowiec – prawdziwa wielkość projektu, ukryta jest pod jego powierzchnią. Co ważne, prawdziwą zaletą produktu jest sposób w jaki został on zaprogramowany i jak funkcjonuje, a nie tylko piękny design.

Look/Feel

This is pretty much dead on in terms of the vibe I’d like it to take on. Like an adventure through the arctic tundra, where things are somewhat damp, neutral and cold, a landscape of which the explorer finds beautiful and forces them to recognize details and light reflections that would normally go unnoticed. Minimal yet cute. Steril, but in a somewhat charming way (like you can breath, almost relaxing).”

And kudos for that, as the initial idea has been put into design 100%!

Nasz pomysł na implementację

Po pierwsze, Karta to nie typ projektu, który może być zakończony w tydzień. To ponad 1000 godzin kodowania/programowania – cała podróż z użyciem responsive webdesignu (RWD) i Django. Front-end strony został przygotowany pod urządzenia mobilne (strona w pełni responsywna, adaptująca się do każdego urządzenia – nawet problematycznych wyświetlaczy Retina ). HTML5 i CSS3 zostały użyte ze względu na ilość elementów interaktywnych i animacji. Backend musiał być szybki i skalowalny, dlatego też wybraliśmy Django. Django to rozwiązanie dedykowane, które jest ekstremalnie skalowalne i szybkie, które wydało nam się najlepszym możliwym rozwiązaniem.

Backend musiał być szybki i skalowalny, dlatego też wybraliśmy Django. Django to rozwiązanie dedykowane, które jest ekstremalnie skalowalne i szybkie, które wydało nam się najlepszym możliwym rozwiązaniem.

Statystyki

Back-end

1

Problemy i ich rozwiązania

W każdym dobrym projekcie pojawią się przeszkody, którym trzeba stawić czoła. Pierwszym dylematem, przed jakim stanęliśmy, był wybór platformy dostarczającej mapy. Samia I Dana zaproponowały Mapboxa, który wygląda pięknie, a przy okazji jest funkcjonalny i bardzo mocno adaptowalny.
Problemem było API Mapboxa, które nie miało wszystkich zakładanych w specyfikacji funkcjonalności, szczególnie problematyczne byłoby wprowadzenie dedykowanego rozwiązania typu drag and drop, na mapach. Na szczęście skorzystaliśmy z Leaflet.js. Leaflet poradził sobie, drag and drop’em spotów, co było dosyć mocno ograniczone w przypadku Mapboxa. Dzięki zastosowaniu Leaflet’a daliśmy radę spełnić wszystkie założenia z briefu.

LEAFLET

GOOGLE MAPS

2

Baza danych spotów

Drugim największym wyzwaniem był wybór bazy danych spotów (miejsc), z której Karta miała korzystać. Naszą sugestią było pójście do leadera branży i skorzystanie z Google Places, ale początkowo klient odrzucił to rozwiązanie, optując za Factualem, i tak Karta funkcjonowała przez dobre pół roku programowania. Z czasem wiedzieliśmy, że Factual nie wystarczy. Próbowaliśmy bazy danych Foursquare i Nominatim, ale okazały się one nie wystarczające. Foursquare wymagał zmian graficznych, a Nominatim to przede wszystkim dane geograficzne a nie popularne miejsca, jakie rekomendujemy znajomym.

Koniec końców trzeba było poddać się gigantowi i wrócić do Google Places, które było najpełniejszą bazą danych dostępną do tego typu projektu. Dla porównania Factual posiadał miejsca w tylko 63 krajach, co nie było akceptowalne. Karta ma być narzędziem pozwalającym mapować i wybierać spoty na całym globie.

3

Szybkość I skalowalność wyszukwarki

W trosce o szybkość wyszukiwarki, użyliśmy flagowego projektu od Apache Lucene TM, superszybkiego open source’a, jakim jest Apache Solr. Jego głównymi zaletami jest bardzo dokładne wyszukiwanie pełno-tekstowe, nawigacja fasetowa, podkreślanie cząstkowe, prawie natychmiastowe indeksowanie, dynamiczne klastrowanie, integracja bazy danych, obsługę dokumentów (Word, PDF) jak i wyszukiwanie geoprzestrzenne. Solr jest bardzo stabilny, skalowalny i dopuszcza niedokładności w szukanych frazach, jednocześnie zapewnia odpowiednie indeksowanie, dublowanie i szybkie wczytywanie wyszukań, automatyczny system failover and recovery, centralną konfiguracje i inne. Solr jest maszyną napędzającą wyszukiwanie i nawigację wielu dużych stron internetowych na całym świecie, i jest jednocześnie silnikiem na którym bazuje Karta.

4

Media Społecznościowe

Aby aplikacja była bardziej przystępna dodaliśmy integrację z social media, takich jak: Facebook, Twitter, Pinterest czy Instagram. Sama Karta występuje na każdym z tych serwisów w postaci Fanpage’a czy Twitter Feed’a. Użytkownicy linkują swoje profile z profilami społecznościowymi, budując zaufanie, dodając element socialowy. Kolejnym krokiem w rozwoju Karty będzie zaawansowana integracja z Instagramem, ale ten element jest na razie w fazie produkcji. Klientowi zależało na społecznościowym kontekście strony, a my zapewniliśmy, żeby użytkownicy mogli udostępnić swoje konta z Social Media do profili.

Co dalej?

Karta obecnie znajduje się w fazie zamkniętej bety. Liczba osób zaproszonych jak i pozytywnych opinii o produkcie ciągle wzrasta.

Liczba map, spotów i interakcji użytkowników ze stroną wzrasta codziennie, a feedback od użytkowników jest bardzo motywujący.

Gdzie zmierza Karta?

Sky is the limit

Możliwości są nieograniczone, my skończyliśmy swoją pracę nad projektem. Dalszy rozwój leży w rękach Samii i Dany. Bazując na ilości pomysłów i motywacji, jakie posiadają designerki, możemy być pewni, że projekt będzie wielkim sukcesem.

Zachęcamy do sprawdzenia bety: