Epic.io

An alpha UI in four days

By Adam King

Michael Lewkowitz was scheduled to present his new startup at DemoCamp Guelph, but all his team had to actually “demo” was a bunch of roughly sketched wireframes. So he hired me with less than a week to spare. Here are the wireframes I was given:

Epic.io aimed to be a hybrid of social network and project management platform, with the goal of organically propelling teams forward — using “missions” rather than projects, and emphasizing soft metrics around mood, momentum, and collaborative dialogue over more traditional project management techniques.

I rewired their initial sketches into a collection of fairly developed mockups.

Interface and feature concepts were in many cases borrowed from consumer apps like Facebook (activity streams, networking of users, ad revenue, tagging of users in comments or posts, etc.), Tumblr (post-type, “Load more” button), Twitter (mentions, open network approach to “following” users and missions) and of course various predecessors in project management (Teamwork, Basecamp, etc.) We were wanting to maximize familiarity with social network concepts, so that the more unconventional approach the app was taking to project management might not seem as difficult for our intended userbase to grok.

example of a “Mission” activity stream:

If I were designing this interface again today, the visual design in these mockups would lean less heavily on gradients, grain, and drop-shadows, and I’d probably go another direction with the icon art approach. But UX-wise, I still think it’s got some really interesting interface control elements.

For instance, the dock along the lower left-hand side of the universal nav sidebar at first instance might appear to be visual clutter. But one of the core use cases of the app was aiming to allow users access to missions across organizations — not completely siloing the workspaces like Slack now does, for example. (Slack did not exist at this point, of course.) So, to promote frequent users to get multi-mission usage out of the app, this dock was added as a “recent history” of mission pages and user profiles — giving quick access to frequently used parts of the sites. Later plans might’ve added “pinning” of often-used missions or profiles so that’d they’d always appear on the dock.

Particularly since this interface was intended for an alpha product, I focused on manual refresh devices (ex: “Load more” button at bottom of activity streams vs. automatic loading once having reached the bottom, “Apply” button for activity stream filter checkboxes) so as to not to needlessly overwhelm server capacity, anticipating there might be significant performance limits in early code. Likewise, I relied on extra clicks to trigger the third-column loading of tag clouds, comment threads, and other interactions.

We did keep a lot of computation-heavy features in the interface in terms of the core “discovery” feature set, which depended on soft metric calculations on dimensions like “velocity”, “progress” and “activeness” to make suggestions to team members for where they should kick in more effort, or to team managers for where they needed to do check-ins with particular members or missions. Especially for pitching/demoing purposes, we wanted to at least touch on the larger potential for aggregate data-mining and personalized, usable metrics for managers and team members. The idea was that this would especially be seen as a boon for organizations trying to implement a more organic, creative small-team approach to project management.

In particular the dashboard (above) attempted to make some predictions for the types of metrics that active users of the system would want to see, and attempted to use colour-coding of projects to drive simple data visualizations. Colour tabs underneath mission overview icons ( “My Missions” section) indicate the corresponding colour in the chart above.

Below we see a “Mission Profile” page — detailing metrics and metadata for a single project. (A sidebar toggle allows you to switch back to the “Activity Stream” we already looked at.) And then we have a “User Profile” — again listing vital statistics, user-inputted data, and network metadata for the user. Each user would have Activity Streams much like the Missions do.