UI Design: Timeline View
Project Background
HappyCo, a real estate Software-as-a-Service startup, had soft launched a beta web application for real estate asset managers working primarily in the U.S. apartment industry. The product, called Happy Asset, was intended to supplement existing applications for property operations.
The near-term goals was to be first to market with a fully featured product and to deliver revenue from contracted enterprise customers.
Team Principles
• Prioritise most important features for customers and get them into the product as quickly as possible
• Use first principles approach
• Design as simple as possible, always
• Have the vision for how features will scale over time
My Role
As part of a round of improvements to the product, I was tasked with looking at ways to bring more dimension to the project management tool via possible timeline and calendar views. These two enhancements were raised by a number of customers as functionalities that would be useful.
Process
Empathy Stage
During the time of working on this feature, the Happy Asset product team and I were continuously engaged with customers and prospects directly. We also reviewed recorded sales calls on Gong.io for customer feedback. Time-based views, such as a timeline or calendar, were raised as a standard feature of any project management tool.
Digging deeper, it was evident that customers were lacking a way to see active projects, both in-progress and planned, in the same location within the product across time. Therefore, customers had no way of confidently seeing and managing projects on a given day or in the future.
Another challenge identified was that it took an extra two clicks for a user to navigate from the unit page to the corresponding renovation project’s specific scope of work. Exposing the scope of work at the unit page could save users time and help them get to problem projects quicker.
Define Stage
Problem Statement:
As an Asset Manager, I am trying to identify the status of active projects across my portfolio on a daily basis, so I can see what projects are on track for renovations or what projects are in need of attention. The problem is that while the current product allows me to see a list of units and projects, the list is hard to navigate; it takes time to identify relevant dates and evaluate time periods on my end. This leaves me feeling frustrated and unempowered.
Ideation Stage
The process of ideation began with research and exploration using diverse methods, gradually starting to simplify ideas and designs through validation, prototyping and collaboration with an engineer and team leads.
Brands of several existing popular timeline features that were explored
Common UI components comparison
Early sketches of possible designs
Ideation was a collaborative process. I paired with a front-end engineer to workshop concepts, identify risks, and refine designs and interactions. Below is an example of design being workshopped:
Example of Figma design being workshopped
Prototype Stage
I created multiple static and interactive prototypes for feedback from the team, and workshopped with the engineer during 'Supercharger Sessions'. Feasibility and usability issues were identified and solved quickly and creatively.
Testing Stage
Timeline Feature Built Pre-Production
The engineer iterated on a built version of timelines incorporating my input and feedback from the team. After several sessions, the built timeline was in nearly shippable state, as seen below.
Credit to John Calanio for building the timeline
Figma files were prepared to capture the final designs, rules and edge cases for posterity. Plans for future application of the timeline elsewhere in the Happy Asset product were also documented.
Summary
The project was a collaborative, iterative process that brought about a useful and feasible first version and a vision for how the tool might be used in the future. The timeline was launched to customers in the future sprint, and the team excitedly awaits customer feedback.
