Timebook

Timebook

The 6-in-1 project management application designed to replace all your current tools to simplify workflow and boost productivity

Customer

Timebook Sowtware Inc.

Location

San Francisco, USA

Project Time

2020-2023

Industry

Project Management & Productivity

What

Desktop & Tablet App

Who

Cross-functional team of 20+ people

Tools

Figma, Miro, Jira

Timebook Software Inc. was founded in 2020 with the mission to address the challenges of getting things done in our app-centric world by building a comprehensive project management tool helping individuals, teams, and businesses plan, schedule, and manage their time. The product vision is based on the belief that proper scheduling is key to completing tasks timely and according to their importance.

Problem Statement

In today's fast-paced world, with so many specialized apps for managing tasks, schedules, and communication, people and teams find themselves overwhelmed by constantly switching between all these platforms. This fragmentation hinders effective planning and prioritization, leading to decreased productivity, increased frustration, missed deadlines, scheduling conflicts, and potential misalignment within teams — all far from the streamlined and focused workflow we all aim for.

Opportunity

By developing an MVP that seamlessly integrates tasks, calendars, workstreams, notes, files, and messages into a single, user-friendly platform, the business can address the market's demand for a unified productivity tool. This streamlined approach promises to revolutionize both individual and team planning and scheduling, attract a sizable user base seeking a comprehensive solution, and has the potential for enterprise-level adoption.

My Role

📍As a Product Designer and Squad Lead, I was in charge of designing two key product modules, Tasks and Workstreams. Collaborating closely with the CEO and Product Managers, I established a robust iterative process rooted in the double-diamond model, ensuring a comprehensive design journey from ideation to release.

📍For three years, I was actively involved in the creation and evolution of a Design System, which consisted of 100+ components.

📍I supported the development of other features (Meetings, Notes, Preferences, and Settings), and crafted presentation assets, email and landing page designs.

📍I participated in the design hiring process and conducted over 20 interviews, assessing candidates' skills, fit, and potential contribution to our team.

Results

🏆

I successfully designed 100% of the Task Module functionality required for the beta launch. The solution I built for the task card entity was later introduced in Notion, validating the accuracy of my design decisions.

🏆

I completed 80% of the Worsktreams Module features required for the MVP, laying a solid foundation for its completion and subsequent iterations.

🏆

Together with my team, we developed robust functionality that ensured a seamless company-wide transition from Jira to Timebook for our daily work and long-term planning. This allowed us to start systematic modules testing and capture insightful feedback on their functionality and user experience from all teams.

🏆

89% of users reported high satisfaction with the Task Module according to our internal Customer Satisfaction Score survey, highlighting its user-friendliness and the significant reduction in time for data refinement by team members.

🏆

I optimized our demo meetings by introducing the idea of pre-recorded demos from all teams for preliminary product team review, followed by more focused post-review discussions. This approach reduced the meeting duration from 4-5 hours to just 1 hour per week.

Design Process

Step 1

Discovery & Research

📍Meetings with the Stakeholders

📍Competitor Analysis

📍Target Audience

📍Interview Analysis

📍Feature Documentation

Step 2

Synthesis & Prototyping

📍Information Architecture

📍User Flows

📍User Stories & Scenarios

📍Sketches, Mockups & Prototypes

Step 3

Handoff & Design Review

📍Preparing Design Assets for Development

📍Creating Jira Tickets

📍Testing Features

📍Providing Feedback

📍Contributing to the Design System

Step 4

2023 Update

📍Kanban Card Redesign

📍Task Drawer Redesign

📍Middle Navigation Design

📍Smart Lists Design

Step 5

STEP 1

Discovery & Research

📍Meetings with the Stakeholders

📍Competitor Analysis

📍Target Audience

📍Interview Analysis

📍Feature Documentation

Meetings with the Stakeholders

We used 1-week sprints for designers and developers, with design sprints being several weeks ahead. Designers had daily meetings with the squad and regular check-ins with stakeholders. During these meetings, we discussed module specifics, reviewed designs, evaluated feature priorities, formed the feature backlog, gathered feedback for the implemented solutions, and had ideation sessions.

feature priorities backlog

Competitor Analysis

I conducted a thorough competitor analysis for each major feature. I researched the leading tools in the time-management and project-management sectors, and gathered insights on the following:

📌

The availability and functionality of key features across our competitors to identify areas of differentiation and understand user needs.

📌

Innovative ideas and approaches used by competitors to discuss with the team for future iterations.

📌

Visual design and presentation of information to identify opportunities for improvement.

📌

Overall design trends and patterns in the sector to stay up-to-date with best practices.

Competitor Analysis: Tasks Module

We identified our key digital competitors for task management: Asana, Trello, and ClickUp. However, during interviews we revealed a surprising insight: the most challenging competitor to our product was actually a traditional paper notebook! Despite numerous apps offered by the market, nearly 90% of interviewees still preferred using paper notebooks for taking quick notes, especially during online calls when switching between multiple apps was considered inconvenient.

01 competitor analysis matrix

Paper Notebook

02 competitor paper notebook

ClickUp

04 competitor clickup

Asana

03 competitor asana

Trello

05 competitor trello

Competitor Analysis: Workstreams Module

Another ambitious goal set for my squad was to revisit a conventional approach towards effective project management. Our main competitors in this area were Jira, Wrike, and Zepel. We recognized that they were well-established players in the project management software market, but we also noticed that many users find these tools overwhelming and difficult to use. Our team aimed to discover the best features of these products, analyze them, and create a simpler, more straightforward, and user-friendly solution for organizing and planning work in teams and companies.

Target Audience

The target audience of the product spans a wide range of users, each with distinct needs and goals. We've identified three primary user segments:

📌

Individuals & Professionals: At its core, the product will serve users who strive to enhance both personal and professional productivity and manage their tasks efficiently.

📌

High-Level Executives: This segment will gain access to features tailored for strategic planning and advanced time management.

📌

Teams of different sizes and expertise: These users will benefit from the application's collaborative features, ensuring everyone is aligned and moving towards shared objectives.

Interview Analysis

Our team conducted 12 interviews with a diverse group of professionals, including high-level executives and specialists from a range of fields from IT to sales. As part of my involvement, I formulated interview goals and hypotheses, created interview questions, analyzed the responses, and summarized the insights. Our interview goals were the following:

📌

Understand patterns for creating tasks;

📌

Understand patterns for delegating tasks;

📌

Distinguish how team members collaborate on projects;

📌

Distinguish the most common user challenges and pains in dealing with existing task management tools;

📌

Figure out the most popular actions made with tasks;

📌

Discover the missing opportunities.

01 interview02 interview

Feature Documentation

My modules involved multiple feature dependencies and member roles with different rights, making them highly complex. To help the team better understand the specific rules and dependencies that needed to be followed, I created detailed documents that served as a valuable reference tool. This increased clarity and transparency helped the team work more efficiently, reducing the risk of errors and miscommunication.

STEP 2

Synthesis & Prototyping

📍Information Architecture

📍User Flows

📍User Stories & Scenarios

📍Sketches, Mockups & Prototypes

Information Architecture

The design team collaborated to establish a cohesive global architecture, ensuring that each module adhered to a logical and consistent structure. As for my own modules, I crafted their information architecture based on the desired functionality for our MVP, while also factoring in potential future features we wished to incorporate.

information architecture tasks module

User Flows

I created the detailed user flows for each complex feature as separate files. These flows included comprehensive descriptions and all the necessary information required by the team to ensure successful and accurate feature implementation.

User Stories & Scenarios

I generated user stories for each feature, encompassing all possible scenarios and flows for every story. I arranged them all into a Figma file to make it easier for the development team and a QA specialist to fully comprehend the features.

Sketches, Mockups & Prototypes

I initiated the design process with paper sketches to rapidly visualize content layouts. This groundwork paved the way for creating detailed mockups and interactive prototypes in Figma, based on our component library to maintain design consistency.

STEP 3

Handoff & Design Review

📍Preparing Design Assets for Development

📍Creating Jira Tickets

📍Testing Features

📍Providing Feedback

📍Contributing to the Design System

As a Squad Lead, I oversaw design, development, and QA processes. I managed the Jira backlog, creating detailed Jira tickets with comprehensive user stories, scenarios and flow descriptions and maintaining regular updates. Daily communication with the development team guaranteed accurate design implementation and timely issue resolution. Additionally, I enriched our Design System by building components used across my modules.

01 jira tickets02 jira tickets03 jira tickets
timebook design system

2023 UPDATE

New Features & Redesign

📍Kanban Card Redesign

📍Task Drawer Redesign

📍Middle Navigation Design

📍Smart Lists Design

Shortly after moving to the Netherlands, the product manager and lead engineer from my former team reached out, seeking my expertise to finalize features related to the Tasks Module for the Personal Edition launch. We decided I would rejoin the project full-time. Together, my team and I redesigned and implemented a significant number of features. Here are just a few highlights.

Kanban Card Redesign

One of my design goals was to redesign the task card views for all layouts, including list, table, and kanban. Among these, the kanban card presented the most significant challenges for two main reasons: numerous shortcomings in displaying information in the existing implementation, and the difficulty of determining the most critical parameters to display on the card due to its limited size.

Old Cards

01 old kanban card02 old kanban card

To address these challenges, I constantly conducted diverse surveys among all teammates to gather valuable insights into the preferred characteristics of the task card. Additionally, I experimented with various layouts, exploring all possible options for arranging information in a manner that would ensure consistency and enhance usability.

03 kanban card survey04 kanban card research

I went through multiple design iterations, which we evaluated during our general meetings, searching for all possible pitfalls and discussing potential implementation complexities. Once we finalized the crucial information parameters to be displayed on the card, I proceeded to create the designs for all card variations. This step was essential to ensure that the layout remained consistent across every variation. Additionally, it provided developers with a comprehensive guide containing the display logic and visual parameters for each card variation, facilitating a smooth implementation process.

05 kanban card variations06 kanban card variations

Prod Before

07 kanban card old07 kanban card old

Redesign

09 kanban redesign

Task Drawer Redesign

I started the redesign process by analyzing the current state of the drawer, identifying all the areas critical for improvement, and prioritizing them with the team.

01 task drawer redesign analysis

My initial approach to the redesign was to optimize the amount of space used and create a more logical and intuitive layout for the information presented in the drawer.

02 task drawer redesign03 task drawer redesign

After discussing the proposed solution with the team and CEO, we agreed to eliminate any unnecessary visual clutter (for example, we redesigned the inputs) and move all key task-related information to the header to make it consistent with the task card.

Newly created task

04 task drawer redesign

Task filled with details

05 task drawer redesign

Additionally, I redesigned all the flows for editing the task information, including changing the assignee and priority, picking the due date and start date, selecting a parent task, modifying the location, and adding a task to a workstream.

Middle Navigation Design

As we started using the Tasks Module on a daily basis, it became evident that users encountered difficulties in customizing this section to meet their specific requirements. We identified two key issues:

📌

Users were unable to filter out their personal tasks created within their personal Workgroups in all their accounts.

📌

The existing filter functionality fell short in supporting users' diverse needs, making it challenging for them to focus on specific groups of tasks.

To address these challenges, we launched a series of brainstorming sessions to examine various use cases and explore possible solutions.

01 middle navigation brainstorming02 middle navigation brainstorming

After careful consideration, we recognized the necessity of implementing a middle navigation, which would be achieved by combining existing task lists with default and customizable smart lists. We identified the following parameters as crucial:

📌

Account association. Since users could have multiple accounts, it was crucial to incorporate a logic that allowed them to see the tasks from different accounts in one view.

📌

Smart lists. We settled on the following default smart lists: "All tasks," "Due today," "Due tomorrow," "Due this week," "Overdue," and "High Priority." Additionally, users would be able to create their own custom smart lists.

📌

People section. Displays all tasks assigned to the user by other individuals.

📌

Workgroups section. Displays all tasks within a specific workgroup.

I created an information architecture for the middle navigation that would serve as a reference point, ensuring the team had a clear overview of the feature's functionality.

03 middle navigation information architecture

I created designs for all the different variations of the middle navigation, taking into account various subscription options that would have diverse layouts. Furthermore, I proposed multiple alternatives for showcasing the expansion/collapse of lists, individuals with different accounts, workgroups from different workplaces, and more.

05 middle navigation layouts

Following a range of discussions and testing within the team, we decided to abandon the implementation of the workgroups section. Instead, we believed that workgroups can be efficiently managed through the utilization of filters and the introduction of new smart lists. I finalized the designs and provided a comprehensive description of the smart lists layouts, including their dependency on filters and grouping.

07 middle navigation filter dependencies08 middle navigation filter dependencies

Smart Lists Design

During our team meetings, we discussed the essential parameters that should be incorporated into the smart lists, enabling users to customize them according to their specific use cases and attain the highest degree of flexibility possible. After careful consideration, we settled on the following parameters:

📌

List name

📌

Assignee (supporting multiple assignees)

📌

Priority (supporting multiple priorities)

📌

Status (supporting multiple statuses)

📌

Due date (supporting a date range)

I prepared a comprehensive feature logic map to ensure that every team member has a clear understanding of how it should function.

01 smart list information architecture

Following that, I created designs for smart lists and developed all the necessary user flows accompanied by detailed descriptions and prototypes.

02 smart list design03 smart list design04 smart list design

LEARNINGS

💡Learning #1

Don't Design an MVP for Edge Cases

When designing solutions for diverse users, focus on the 80% most common and important cases., which would take 20% of your time dedicated to these features. While it may be tempting to address every possible scenario, even though it might happen once in a blue moon, it's important to first make the product available for use. And when it's done, you can iteratively design solutions for edge cases.

💡Learning #2

Always Write User Stories

I found it incredibly beneficial (for both myself and the development team) to write user stories and provide detailed descriptions of user flows. The deeper I delved into the specifics, the more gaps I identified and could address before the development process began.

😌A Moment of Personal Pride

The Lead QA Specialist praised my Jira tickets as the best he had ever seen in his 10+ years of experience. He found it super easy to test features based on these tickets. In fact, our CEO was so impressed that he encouraged other designers to adopt my approach in creating their own flows and tickets.

💡Learning #3

Design with Future Features in Mind

When tackling a large and demanding project, it's crucial to avoid designing solutions solely for the present release. Instead, consider the bigger picture and be aware of the planned features for future releases. Remember that everything is interconnected, and your design should allow room for future enhancements and improvements.

💡Learning #4

Don't Think You Know Everything

Even if you feel confident in your knowledge of the features, it's essential to be open to your team members' opinions. They might identify gaps in your design and highlight user cases that you haven't considered.

💡Learning #5

Embrace Design Criticism with Patience

When your design is being criticized, it doesn't mean you're a bad person or lacking professionalism. Remember, the team's goal is to create the best product possible, and they may have alternative perspectives based on their experiences. Instead of taking criticism personally, view it as an opportunity for improvement. Stay focused on exploring new ideas and testing them to enhance the product's overall quality.

💡Learning #6

Take Responsibility for the Team

Being responsible for your own work is important, but taking responsibility for your entire team is a different level of commitment. Treat your team as a unified unit and take ownership of their progress, whether it's positive or negative. Remember the principle of unity: "One for all and all for one!"

💡Learning #7

Learn from Your Team

When you are surrounded by professionals and experts in their fields, learn! Even if their expertise doesn't directly align with your responsibilities, there is still immense value to be gained. Simply listen, don't be afraid to ask questions, and be open to new knowledge.