Eko Cards – Innovating a versatile collaboration tools

Business Need

The project was unique as it poses an interesting question: what product will become our future-proof solution? Think within the context of work productivity, collaboration, project management, activities that we already have a ground on, but think outside of the box.

As an example, look into MS Excel, surveys shows that it’s the No.1 Project Management tool in the world despite the success of Trello, Asana, and the likes. Why? Because people find it easy to use and good enough to cater to most of their project management needs.

Its “open-scenario” style also makes it a very versatile tool, therefore despite its branding as a spreadsheet solution, people use it for many things beyond a spreadsheet. Product Owners use it for Roadmap and Backlog, programmers use it as a database, some could even program their software using Macros in Excel!

What would be something that we can create to match Excel’s versatility?

To answer this question I look into the tools I’ve already use, to look for inspirations. What project management tools do I use? What are the other tools that I find very useful in my day to day work? Then I asked my colleagues the same questions to ensure minimum bias. After that research, the answer converged into three tools: Google Keep, Apple Note, and sticky notes!

Why sticky notes?

I love sticky notes! It’s a multi-purpose tool that you can use to taking notes, creating reminders, sending a message for others, insight generation in card-sorting activity, and many things. You can even create artwork from it! In fact, even in our office we quickly realized we used sticky notes a lot. It’s on the walls, the windows, monitors, tables, refrigerator, everywhere!

My concern with sticky notes is its very silo-ed and analog nature, meaning its content can not be seamlessly integrated into other media, rather permanent, space is very limited, and not easily duplicable. The available digital version back then, even from its originator 3M, was leaning towards creating a virtual board for you to play around with digital sticky notes, yet weirdly, copying their limitation as well. Among those that pushed for innovation, Miro was the one that proposes interesting value as a digital whiteboard, but it still doesn’t answer the needs we identified.

On the other hand, we have Keep/Note that is also used in a similar fashion: you can use it for almost everything! What’s good about those is that they’re digital, so it carries the awesomeness of digital products like the ability to edit, copy and paste, search contents, and adds multiple properties like adding date, sharing, color, links.

So I was wondering if we could somehow create something that represents these two marvels.

Turned out we could.

The Concept

The converged idea comes in one afternoon and I quickly sketched it on a piece of paper to show to the CEO/Head of Product, the CTO, and my Product Owner counterpart. After a quick discussion and add on notes, this is what we got:

The concept that we agreed upon is a “note”, an entity that can be made to support different purposes through properties, e.g. date, people, response, comment, and can be linked to other cards to form a cluster of cards. This way, you can even do project management using cards! Simple, versatile, powerful.

The next step is to decide on the look, and how it works. For these goals, our team did a lot of case studies collecting to identify common use-cases, a co-creation workshop to tap into our colleague’s rich knowledge, as well as doing benchmarking.

By running tests with our current users, and speaking into potential users, we also got good feedback into how they would use the product, which helps in setting the product direction, features to be included, what should be in our MVP, and what is our roadmap.

At the end of the project, our UI Designers reviewed at least 40 different products to decide on the visualization!

Naming wise, after consulting with other stakeholders, including our VP of Marketing, eventually, we settled on “Eko Cards” or just “Cards”.

Challenges

What I found as a very interesting challenge from this project, aside from the innovation challenge was the importance of having a thorough use-cases examination. Why?

As a German proverb says, “Der liebe Gott steckt im detail”, which translates as ‘God is in the detail’, popularized in the Modern Design movement by Mies Van Der Rohe, the use-cases really helped us in identifying challenges and how to solve it.

For example:

  • Which feature(s) shall we put on the top menu? How should it look on the empty state, upon filled, how to best save the precious screen estate but kept the function recognizable?
  • As Cards support realtime collaboration, what would happen if two or more people are editing the same card at the same moment? Which input shall we prioritize?
  • Should there be a save button? What about autosave? How often should we autosave it without putting too much burden on the server? Can we create a local buffer?
  • What would happen if the internet connection was lost, and other contributors are unknowingly making changes to the same section the user is editing? Whose edit shall be prioritized? What should happen to the other edits?
  • What would happen if a user edits a section, which practically locks it, but then going idle? Shall the system keep locking the section? For how long? Should there be a way to inform the user?
  • How should we add the feature to transform Card into a task? What should happen if a task is done, should we “close” or deactivate the card? What should be shown on other card(s) linked to that card?
  • How to effectively inform the card viewer that there are other card(s) attached?
  • To what extent should we display the card’s History? What considered as an edit? What are the events the system needs to track?
  • How should it behave on a desktop web view? How to best taking advantage of the bigger screen estate on the desktop? Should we completely mimic the mobile version’s behavior, or should they complement each other?
  • And so on.

Those are dizzying questions but necessary to ensure the creation of intuitive experience. Hours of discussion spent, and on many occasions we simply need to be content with having an educated guess, to be iterated later on after we can gather real user feedback. Else it will be an endless loop.

After the tough discussions, several iterations of creating and testing, including grabbing strangers in public places for guerrilla testing whenever we can, finally we launched the product and I was so happy to see it taking center stage in our app.

For more reference about Eko’s Virtual Workspace, visit the company page here:
https://www.ekoapp.com/

For more information about Eko Cards, follow through this link:
https://eko.zendesk.com/hc/en-us/articles/360035375433-Introduction-to-Cards

Design Portfolio Update, May 2020

One of the most tedious, demanding task for any designer looking for career opportunities, admit it, is updating our portfolio! It’s almost impossible to do while we’re working full-time, (unless you’re already thinking ahead of switching job), yet when we finally have time, without a proper evidence gathering rigorously practised during we’re still employed, it means going back and forth through the whatever archive we can get our hands upon.

I’m glad I did some evidence gathering once in a while which help to give structure to my storytelling, so my current design portfolio update wasn’t that painful.

Still in it’s first draft stage, almost 40 pages long! Yes I will trim it down but that’s stage two, for now this is it, a work in progress:

Click on this link to view it (~7 MB), and let me know what do you think? (byms)