The codebase of Teamwork’s Resource Scheduler was being retired and a new uplifted version had to be worked on. My role was to lead the UI redesign, suggest UX improvements and collaborate with UX designer and project manager to redesign the timeline with more intuitive visuals, gestures and introduce requested features.
Before
After
Teamwork’s Resource Scheduler empower agencies and service manage staff capacity on a user and project level. The feature had been on a legacy codebase for many years and required a polished UI and UX.
I ran an audit to identify ways to improve the UI and UX. Here are some of the recommendations.
Click on the images to enlarge.
Before
After
Before
After
Before
After
Related to the first recommendation above, users should be able to add a project to a user and vice-versa.
To achieve this while avoiding clutter in the timeline, I opted to show the call to action, only on hover. But we could risk users not being able to find the action in the first place.
To validate this decision, I designed the user test below in Maze. Using Pendo Guides in the app, we collected 38 responses.
In Maze, I designed a prototype test, with clear tasks to be followed and a desired path that users should follow. 92% of users followed the intended path.
A follow up question confirmed that 86% of the users found the action intuitive to complete.
With the redesign phase complete, I prepared a handover document communicating all changes and giving detailed guidance on UI implementation using internal conventions to identify when existing components and design tokens should be applied.
Here are some of the highlights. Click on the images to enlarge.
Timeline sizing, margin, paddings
With a complex grid, I pointed out measurements for days, weekends, row heights and separators. In we can see references to design tokens.
Top insight bar
Outlining design details for top insight bar, such as spacings and design tokens.
Cursor interactions
Showing how elements should react to cursor interactions.
Allocation bar and details popover
Specification with design tokens and components.
Flow of expanding and collapsing the insights bar
Example of a flow explaining how the expand/collapse for insights bar should work.
And much more...
Very rarely product design is ever finished with the first release. This time it was no different.
We learned through Pendo feedback and customer support tickets, that users were craving for a way to group information by job roles. For example: filter and/or group users by "Designers" or "Developers".
My manager worked on the wireframe and handed it over to me. My task this time was to translate the wireframes into high fidelity designs, again, keeping in mind the Teamwork's design system library.
Provided wireframe
Final hi-fi design
Any questions or eager to see more?
If you have any questions or would like to get more in-depth on any of the above, I will be happy to share more details with you. 😊
