THE MAKING OF KIFI

Collect, discover, and share knowledge

Next Project

Kifi is the smartest way to collect, organize and share the content you discover and love. It's powered by personalized search, recommendations and a community of people helping people.

Cards

Cards have provided a space for information for as long as we can remember. From baseball and birthday cards, to business and credit cards; they're a great platform for communicating quick information. They can be flipped, folded, stacked, grouped and spread. It was plain to see that this notion was the right direction for the foundation of Kifi.  

Finders keepers

Kifi’s core value is giving the user the ability to save a piece of content with ease, delight and gratification. This is done through the “Keep” button. It was paramount to have this UI element feel special and distinct from the rest of the interface. This wasn’t an easy responsibility as the branding was still unknown. With all wheels in motion and after several rounds of iteration, we landed on the appropriate solution that balanced both aesthetic and function.

Kifi felt this version successfully represented both sentiments of liking a piece of content, and the action of compiling it into a library of related topics.

Here are the versions that didn't make the cut due to reasons including issues of not containing the right amount of delight, or feeling too ambiguous:

1 in 10,000

Branding remained on the back burner for the majority of the project; the other items prioritized in Trello needed immediate attention and resolve.

The team at Kifi speculated that each URL added to the platform was as precious and rare as 1 in 10,000; a site that you should feel lucky enough to have come across. The logo that they had been using before we teamed up was a multicolored four-leaf clover. It lacked sophistication, however it had potential to be better. Here was the final submission:

The final submission created excitement amongst the team. This execution introduced the harmonious relationship they were striving for. The four hearts and the four-leaf clover worked beautifully together. It successfully conveyed the idea that keeps were special, and played nice across the platform.

These are a few versions we explored and what eventually led to the final mark:

Iterate

This update for Kifi would introduce two new features: libraries and recommendations. Users would be able to archive a URL into a library to stay organized or to be retrieved easily.

Recommendations would be a feed of all areas of potential interest, powered by the user’s engagement. Things like people you should follow, articles you should read and topics that may interest you. With all these elements living in the same space, each artifact needed distinction. We didn’t want to confuse the user about what it was they were looking at. It needed to be quickly scannable and transparent.  

Exercises included iterations with color, typographic hierarchy, avatars, alignment, imagery… well, you get the idea.

We started to gravitate towards the use of color. This could allow the right amount of distinction between the types of cards we were looking for. We found with more use, color coating libraries could be easily scanned at a glance, especially in list view.

Multifaceted

There needed to be a place to store meta data elsewhere on the cards to guide the user into further discovery. We brought the notion of real life cards into the digital space. We used the back of the card to house that information which could be accessed through an overflow menu icon. Although this set of information was secondary, it still needed to be accessible.

Tapping the overflow menu would flip the card over and display other information including social activity, related content and further discovery.

This was to retain engagement and allow the user to dive deeper into content. We made it as easy as possible for the user to pivot to other areas of interest.

GUI

The usual suspects. These components were approached with a more delicate aesthetic in order to take a backseat to the content. We ensured the content came first and that the UI was complementary.

Happiness can't go unshared

Kifi is a community of helpers. Sharing and introducing new content to the platform makes it more powerful. It feeds the hive with more value and allows recommendations to be stronger and more accurate based on the user’s activity. Sharing doesn't necessarily have to occur exclusively inside Kifi — content can be shared via deeplinks.

WHAT I LEARNED

Intuition isn’t proof

The static pages of the card interaction model seemed simple to us but perhaps not to the user. Building a prototype was pivotal to moving forward and selling this idea. Design and build started at the same time and we iterated simultaneously. Without the prototype, we may have not been able to convince the client or ourselves that this was a viable solution for them, and would have been staring at wireframes making uninformed assumptions. Having an early build to play with led to many wins in this project and allowed us to discover better design solutions.

Credits: Geoff Teehan, Nelson Leung, Brendan Lynch, Jayne Bingler and Matt Hodgins.