Custom views: Monitoring, reporting and sharing client work

Custom views: Monitoring, reporting and sharing client work

OVERVIEW

Teamwork.com is a project management platform offers tools for task management, time tracking, and team communication to enhance productivity and streamline workflows.

My Role

On this project I led strategic design by bringing research insights to life, unpicked a complex legacy system and crafted innovative conceptual designs. I facilitated an offsite alignment workshop on these concepts with the leadership team (CEO, CTO, CPO), presented at our annual tech council and collaborated with area leads to translate the vision into pragmatic cross-team roadmaps.

Company

Teamwork.com

Year

2024

Skills

Story telling

Leadership

Strategic thinking

Complex systems

AI

SAAS

Project management

DETAILS

Figma, Responsive web, Dovetail

The problem

After 15 years of growth, Teamwork faced mounting tech and design debt, with evolving customer needs outpacing the app’s legacy structure. To stay competitive, the team needed to address system inefficiencies, reimagine the app’s architecture, and align around a clear, future-focused vision to meet modern user expectations.

After 15 years of growth, Teamwork faced mounting tech and design debt, with evolving customer needs outpacing the app’s legacy structure. To stay competitive, the team needed to address system inefficiencies, reimagine the app’s architecture, and align around a clear, future-focused vision to meet modern user expectations.

  • 📝 Reporting required excessive manual effort: Creating client-friendly reports was time-consuming and required ops managers to duplicate their efforts, relying on external tools to produce layouts to monitor work in progress of tasks.

  • ⚠️ Lack of proactive risk forecasting: Ops managers lacked insights into project timelines, warnings for at-risk tasks, and an efficient way to identify overbooked resources without manual searches.

  • 📊 Inefficient task monitoring: Project managers struggled to track task progress in a summarised way, as the existing structure of the app was rigid and met only a few of their needs.

The RESULTS

Through a month-long diary study, a UX audit, visionary concepts and a pragmatic phased roadmap, we uncovered key customer behaviours, addressed legacy system inefficiencies, aligned leadership on transformative infrastructure changes and ensured the incremental delivery of value to customers.

Through a month-long diary study, a UX audit, visionary concepts and a pragmatic phased roadmap, we uncovered key customer behaviours, addressed legacy system inefficiencies, aligned leadership on transformative infrastructure changes and ensured the incremental delivery of value to customers.

  • 🚀 Diary study insights report: Conducted a month-long diary study with 20 customers, uncovering key behaviours and challenges. The findings were compiled into a research report, presented to teams, and used as a foundational asset for future design decisions.

  • 🚀 Addressed inconsistencies in a legacy system: Conducted a comprehensive UX audit of the legacy system, identifying key inconsistencies and performance bottlenecks. The findings informed a strategic roadmap to improve the system's usability and efficiency.

  • ❤️ Crafted visionary concepts and presented to leadership and tech department: Developed transformative concepts to overhaul the app’s infrastructure, facilitating onsite workshops with the CEO, CTO, CPO, and tech council. Presented these ideas to the broader tech team, helping scope the project and assess feasibility for implementation.

  • ✍️ Created pragmatic roadmap with phased rollout plan: Developed a pragmatic, phased cross team roadmap to implement the vision incrementally, ensuring rapid delivery of value to customers while maintaining a clear path toward the long-term goal.

MY PROCESS

For an in-depth look at how I tackle a project like this, check out my process below

MY PROCESS

For an in-depth look at how I tackle a project like this, check out my process below

USER RESEARCH

This project began with a 30 day diary study in collaboration with our lead user researcher. Over the course of the study, we observed and interviewed 20 customers to understand their daily behaviours and challenges using our product.

This project began with a 30 day diary study in collaboration with our lead user researcher. Over the course of the study, we observed and interviewed 20 customers to understand their daily behaviours and challenges using our product.

KEY PERSONA: Ops MANGER OLIVIA

KEY PERSONA IDENTIFIED: PROJECT MANGER PAULA

KEY PERSONA: CLIENT USER CLAIRE

ANALYSING INSIGHTS

Once the diary study concluded, we synthesised all insights and categorised them into problem statements, key insights, and findings. We then shared those results through a research report presentation with all teams across the product, development, and design organisations.

Once the diary study concluded, we synthesised all insights and categorised them into problem statements, key insights, and findings. We then shared those results through a research report presentation with all teams across the product, development, and design organisations.

THE TEAM & MY ROLE

The core team consisted of the Head of Design, Core Group Product Lead, Design System Lead, and myself as Principal Product Designer. We collaboratively shaped the vision and provided weekly updates to stakeholders to ensure alignment and stay on track throughout the project.

The core team consisted of the Head of Design, Core Group Product Lead, Design System Lead, and myself as Principal Product Designer. We collaboratively shaped the vision and provided weekly updates to stakeholders to ensure alignment and stay on track throughout the project.

COMPETITOR ANALYSIS

After establishing the problem statements, I conducted comprehensive competitor analysis to understand how industry leaders were addressing these challenges. The report highlighted competitors’ strengths and weaknesses and identified opportunities for differentiation.

After establishing the problem statements, I conducted comprehensive competitor analysis to understand how industry leaders were addressing these challenges. The report highlighted competitors’ strengths and weaknesses and identified opportunities for differentiation.

UX AUDIT OF EXISTING SYSTEM

Teamwork had accumulated tech and design debt. To ensure the new strategic vision was feasible, I led app wide UX audit of all key components, identifying areas requiring refactoring to enhance consistency, usability, and overall user experience. This audit provided a clear roadmap for the necessary improvements to support the product's evolution.

Teamwork had accumulated tech and design debt. To ensure the new strategic vision was feasible, I led app wide UX audit of all key components, identifying areas requiring refactoring to enhance consistency, usability, and overall user experience. This audit provided a clear roadmap for the necessary improvements to support the product's evolution.

CRAFTING THE VISION

Following the deconstruction of the legacy system, our team felt equipped to begin reworking the solution from the ground up. We collaborated closely to envision a more user-centric experience and through rounds of iteration created detailed wireframes outlining the new solution.

Following the deconstruction of the legacy system, our team felt equipped to begin reworking the solution from the ground up. We collaborated closely to envision a more user-centric experience and through rounds of iteration created detailed wireframes outlining the new solution.

Given the complexity of the interactions, I intentionally kept the fidelity low during this phase to maintain focus on the core IA & UX problems. This allowed us to prioritise functionality and the UX, quickly testing and refining interactions before moving to detailed design.

Given the complexity of the interactions, I intentionally kept the fidelity low during this phase to maintain focus on the core IA & UX problems. This allowed us to prioritise functionality and the UX, quickly testing and refining interactions before moving to detailed design.

SHARING THE VISION

Once we were clear on the direction, I transformed the wireframes into visionary concepts and led an alignment workshop with the CEO, CTO, and CPO. In this session, I demonstrated how the new solution could address customer challenges and facilitated discussions to align on strategic direction and design priorities. This process refined the vision further and secured leadership buy-in for the next steps.

Once we were clear on the direction, I transformed the wireframes into visionary concepts and led an alignment workshop with the CEO, CTO, and CPO. In this session, I demonstrated how the new solution could address customer challenges and facilitated discussions to align on strategic direction and design priorities. This process refined the vision further and secured leadership buy-in for the next steps.

TRANSLATING INTO ACTIONABLE ROADMAP

Once we secured leadership buy-in, I presented the concepts to over 100 developers at our annual tech council. This session served as a springboard for a feasibility discussion, we explored how to pragmatically implement the new designs considering the technical debt in the system.

Once we secured leadership buy-in, I presented the concepts to over 100 developers at our annual tech council. This session served as a springboard for a feasibility discussion, we explored how to pragmatically implement the new designs considering the technical debt in the system.

Presenting the concepts at the annual tech conference & getting feedback

I worked closely with the group product & technical leads to create a cross-team phased roadmap that outlined actionable steps for rolling out the new vision. This roadmap ensured that we aligned on priorities, mitigated potential roadblocks, and started working toward the vision from day one, fostering collaboration across product, design, and development teams.

I worked closely with the group product & technical leads to create a cross-team phased roadmap that outlined actionable steps for rolling out the new vision. This roadmap ensured that we aligned on priorities, mitigated potential roadblocks, and started working toward the vision from day one, fostering collaboration across product, design, and development teams.

collaborating with teams to create a cross-area roadmap for views

INCREMENTALLY MAKING THE VISION A REALITY

We kicked off Phase 1, focusing on redesigning our highest traffic area the Table view. We revamped several global components, including features like "Group By," advanced filtering, and sorting to improve usability and consistency. We approached this phase with a user-centric mindset, ensuring each component aligned with the broader feature areas while addressing key pain points identified during the research.

We kicked off Phase 1, focusing on redesigning our highest traffic area the Table view. We revamped several global components, including features like "Group By," advanced filtering, and sorting to improve usability and consistency. We approached this phase with a user-centric mindset, ensuring each component aligned with the broader feature areas while addressing key pain points identified during the research.

RESULTS

Through a month-long diary study, a comprehensive UX audit, visionary concept development, and a pragmatic phased roadmap, we uncovered key customer behaviours, addressed legacy system inefficiencies, aligned leadership on transformative infrastructure changes, and ensured the incremental delivery of value to customers.

Through a month-long diary study, a comprehensive UX audit, visionary concept development, and a pragmatic phased roadmap, we uncovered key customer behaviours, addressed legacy system inefficiencies, aligned leadership on transformative infrastructure changes, and ensured the incremental delivery of value to customers.

🚀 Diary study insights report: We conducted a month-long diary study with 20 customers, uncovering key behaviours and challenges. The findings were compiled into a research report, presented to teams, and used as a foundational asset for future design decisions.

🚀 Addressed inconsistencies in a legacy system: Conducted a comprehensive UX audit of the legacy system, identifying key inconsistencies and performance bottlenecks. The findings informed a strategic roadmap to improve the system's usability and efficiency.

❤️ Crafted visionary concepts and presented to leadership and tech department: Developed transformative concepts to overhaul the app’s infrastructure, facilitating onsite workshops with the CEO, CTO, CPO, and tech council. Presented these ideas to the broader tech team, helping scope the project and assess feasibility for implementation.

✍️ Created pragmatic roadmap with phased rollout plan: Developed a pragmatic, phased cross team roadmap to implement the vision incrementally, ensuring rapid delivery of value to customers while maintaining a clear path toward the long-term goal.