Timeline
Smartsheet
A user-friendly alternitive to a Gantt Chart
PROBLEM:
Customers need to see project data - tasks, statuses, and dependencies, but they do not like using Gantt Charts...
An intuitive, user-friendly customizable alternative to a Gantt View that customers will want to use!
SOLUTION:
Project Visualization
Timeline is a project management tool that translates data from a spreadsheet into a visual roadmap. It displays tasks, milestones, ownership, status, duration and dependencies. users can define custom time intervals, alternate between viewing project details and the overall state of the project, create and assign tasks, and view multiple timelines to align with company goals and coordinate across teams
My Role:
Conducted formative research to better understand problem space and define requirements
Created the experience and refined it via multiple iterations
Prototyped a detailed walk-through that was demoed in to senior stakeholders during annual planning
WORKSHOP
For a project this ambitious and complex, it was important to align the entire team on what we are trying to accomplish, and why. It was also important to get everyone's thoughts and ideas, since there was already a lot of institutional knowledge. I prepared and conducted a two-day workshop with where we reviewed competition, defined the problem and collected ideas that we we wanted to pursue further.
.png)
CUSTOMER RESEARCH
The following week, I conducted over 30 remote customer interviews and captured all requests and ideas on sticky notes for further consideration
.png)
CAPTURING IDEAS
.png)
The workshop and customer interviews generated a huge amount of data. To fully process the information, I translated each idea or request into a "bite-sized" UX illustrations. I started by drawing out each idea on a sticky note, but eventually I moved all the information into Sketch to make it easier to edit and review.
ANALYSIS
%201.png)
%201.png)
TOP REQUESTS:
KEY LEARNING:
Cusomers need to see how items that they are responsible for map against org-wide milestones and deliverables. Currently, no product offers this functionality so this could be a differentiator
-
Show milestones relevant to me against org-wide milestones
-
Allow transitioning from detailed task view to project view
-
Executive summary that shows all projects at a glance
-
Ability to customize views and see data from multiple angles
Capturing insights
To make it easier to capture and communicate all of the insights, I created a number of diagrams to illustrate learning and observations
REFINING & ITERATING
Once all design ideas were captured in Sketch, I started iterating and refining them by reviewing them and with stakeholders and customers. I used the "cartoon" wireframing style to emphasize that these are draft concepts, to make it easier for everyone to share their thoughts.
.png)
.png)
.png)
FINAL DESIGNS
Once all design ideas were captured in Sketch, I started iterating and refining them by reviewing them and with stakeholders and customers. I used the "cartoon" wireframing style to emphasize that these are draft concepts, to make it easier for everyone to share their thoughts.
.png)
1.Tasks
Each project task is shown as a line, with milestones shown as dots. If tasks start one after another, they are shown in the same lane. Each type of milestone has its own symbol that can be customized
.png)
2.Overdue Items
Items that are outside of specified project dates are shown using transparency
3.Task Owners
View can be customized to show or hide names and photos of task owners. Milestone text and icons can also be hidden.
.png)
4.Nested Tasks
A task can contain nested items, which can be shown by expanding the parent task
.png)
5.Task Hierarchy
UX supports up to two levels of nested tasks. Research indicated that two levels it is sufficient to accommodate majority of use cases
6.Shared Milesones
The key finding of research was that customers want to see how their milestones line up against the org's shared milestones. This view allows to view project milestones against other phases or milestones from other teams
.png)
7.Milestone summary
Customers also wanted to see all milestones across projects in a single list. This view addresses this need by showing all milestones in a single lane
8. Grouped View
For stakeholders and executives it is important to be able to see summaries across projects, grouped by initiatives. This layout provides top-level overview of what is going on in an organization or a team
10. Customizable Layouts
Customers can customize timeline layout by toggling visibility of task owners' avatars and task details
IMPACT
.png)
I prototyped the experience and tested it with customers during the annual Engage conference. The prototype received a lot of positive feedback. However, Smartsheet acquired another company with similar functionality and the project was put on hold.