Breaking from the horizontal convention made sense since the majority of roadmaps were gantt charts, with horizontally navigation. This was a differentiator but also served in usability.
Usability studies showed that users favored a vertical scroll for its natural ergonomics. A timeline that was vertical had more natural interaction, more visible real-estate (optimized for mobile), and a huge feature request: zoom. Users needed to quickly zoom in and zoom out, seeing the big picture and small details which one click.
A series of "How might we" questions guided the design:
- HMW auto-track project activity from multiple platforms for a contractor?
- HMW help clients understand the project’s process?
- HMW avoid breaking flow / adding distration?
On the left is the iterations of input event to the timeline. The right is iterations of the add functions interaction.
For every solution we found on the vertical timeline, there were 5 other problems.
Problems included: How is time read, chronologically or reversed? Does padding between two dates represent time or does padding have no meaning? How do multiple milestones for one day work? How do integrations get added on an individual milestone, versus employed upon the entire timeline?
Screenshot of a screencast during a usability test
We found critical errors after weeks of usability testing. We video recorded every test and went back through it.
Principle helped make prototypes quickly. The prototypes weren't full functioning but we just needed to complete a flow and that worked fine.
Early explorations of desktop UI
Once we fixed the UX errors, we built a live prototype using Meteor.js (a powerful testing bed for rapid prototypes)
View live demo at https://bit.ly/2VjyQtr
We learned users interacting in unique ways with our prototype. For example, when someone wanted to do an IFTTT, they would use brackets. If they wanted to tag a stage, they would use parenthesis. We could use this to design how integrations and tagging worked.
Iterations of the timeline with events and integrations
Questions emerged from these statements like: who to market to, what type of freelancer, who would pay, what features are essential for v1.
We found that we could make prototypes for testing desirability and usefulness of the product using facebook ads, social media launches (betalist), and interviews.
What to test: adoption, desirability / usefulness, and usability.
Screen shots of the various marketing prototypes (not testing the actual product) that informed the messaging and value offered. We made a decision and wanted to gauge the desirability so we made a series of facebook ads. Those ads further taught us what was valuable about the product.