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 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.
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:
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.
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.
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.
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.
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.