MerixStudio

Karta CASE STUDY

The background

Socializing and sharing information with friends about places you’ve been to always has been fun. However as of late there has been no easy way to show where have you been and what did you do (at least on the web). Here comes Karta.

When Samia Saleem and Dana Steffe has approached us in November 2012, shown us the designs and pitched in the idea of the site, we knew we were in for a wild ride. The designer duo from Brooklyn had a clear view of what they wanted to accomplish. They wanted a platform for people to share maps with, and generally socialize. The graphics and UX/UI part was taken care of, our mission was to code the best out of it!

Inspiration

To give you a more in-depth look into Karta, let me quote and show you the things that inspired the talented Designers from NYC, and how they approached the design:

1

We knew that we wanted it to be a tool—not just in its utility, but in the sense of its form and function. We have always been inspired by product design that pushed the boundaries of function (and in return are beautiful and classic in their own right.) Dieter Rams’ stereo turntables from the 60′s, AIAIAI track headphones and the designs of architect Johannes Norlander Arkitektur to name just a few.

2

We knew that the user experience was by far the most
important element in what we’d be building, and everything
from design to development would support that.

We went through numerous design explorations in the
early days of the project, but it wasn’t until we really
stepped back and revisited our initial goals that we landed
on something that felt right. These were the original
moodboards we had put together along with a brief
explanation of each:

Form

Combined with the look and feel, I’ve put together a moodboard that illustrates the direction for the form of the product. Minimal, but including everything necessary. It’s not about being minimal just for the sake of minimal, but to strip down the product to the essentials. I think there is always room for surprises, like a whale sighting on the horizon, but in general I think a glacier is a good analogy for the project in that the real mass is hidden beneath the surface. What makes it powerful is the way it’s developed and constructed, not just visual candy.

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%!

The general guidelines / our idea of implementation

First of all Karta is not an easy concept to accomplish, it is not a 1 week endeavor, but rather a thousand hours journey into responsive webdesign and Django implementation. Front-end was prepped for mobile devices (site is fully responsive and adapts to any device you use - even those pesky retina displays!). It was coded in HTML5 and CSS3, as there are plenty of animations in it.

As for the backend we went with speed and scalability and unleashed the flying Django pony to make this thing reach the stars! Django as a bespoke solution is extremely scalable and fast, and seemed the most feasible way to accomplish something really stunning.

crucial numbers

techonologies used

1

Obstacles and solutions

As with every great projects, there come roadblocks. First one was a choice of a map platform, to make it look stunning. Samia and Dana chose MapBox, which looked stunning, functional and most of all vintage.
The problem was, the API didn’t have all the functionalities needed. But don’t worry! That’s where Leaflet.js, a modern open-source JavaScript library for mobile-friendly interactive maps, kicked in. As it was much easier to implement drag and drop interfaces then to what MapBox API provided. Thanks to implementation of Leaflet.js we were able to fulfill all the necessities from the brief.

LEAFLET

GOOGLE MAPS

2

The database of spots

Second biggest challenge was to choose a database of spots/places, that users could use and take advantage of. Our first solution was to go to the Goliath – Google Places, but initially client wanted something else. Karta at first functioned with factual database for a long time. In meantime, we tried both foursquare and nominatim databases, but they weren’t feasible.

At the beta launch we needed to succumb to the giant, and turn our heads back to Google Places as the most complete resource needed for the site. Simple, because factual just didn’t have enough spots and just 63 countries available.

3

Speed and scalability of search

In order to provide a fast search, and engine we implemented Apache Solr, which is a popular, blazing fast open source enterprise search platform from the Apache LuceneTM project. Its major features include powerful full-text search, hit highlighting, faceted search, near real-time indexing, dynamic clustering, database integration, rich document (e.g., Word, PDF) handling, and geospatial search. Solr is highly reliable, scalable and fault tolerant, providing distributed indexing, replication and load-balanced querying, automated failover and recovery, centralized configuration and more. Solr powers the search and navigation features of many of the world's largest internet sites.

4

Social interactions

In order to make the site even more accessible, and friendly to use, Karta has Facebook, Twitter, Pinterest and Instagram integrations of sorts. Users link their profiles to their accounts, to add credibility of a social element. Also, there is an advanced integration with Instagram in plans, and it should be ready before going from beta into a full-swing website. Client wanted to put an emphasis on social context of the site, and we made sure that users can use the popular channels to operate Karta even more easily.

Where is it now?

Karta is currently in closed beta. Number of people invited is slowly rising as is the appreciation of the people for the tool.

Number of maps, spots and general interactions is increasing with times, and people are giving amazing feedback.

What’s next for Karta?

Sky is the limit

We finished our part, and the designer duo is in charge of further development of the site. Given the number of ideas and general drive of Samia and Dana, we know that this project will take off and take internet by the storm.