Close icon
Case Study

Workflow App—Designing a productivity app for individuals

Overview / Venture for entrepreneurship course

Role / Sole designer on team of 4

Tools / Figma

Timeline / 8 weeks

Workflow App screenshot

Problem

Professionals and students have to keep track of multiple platforms to plan what needs to be done, by when. They may use a calendar for scheduling, agenda or to-do list for personal tasks, project management tool for team coordination, and notes app to capture their thoughts. With all the context switching and cross updating, more time is spent planning how to work than getting the work done.

Context switching between work management tools leads to more time being spent planning how to work than getting the work done.

Goal

Boost productivity and free more time for individuals by reducing the time and effort it takes to manage work.

Primary KPI

Total amount of time spent on project management tools per user per day

Target Users

Professionals and students work in both personal and team contexts, often requiring the use of multiple tools. A software developer, for example, often switches between multiple tools to manage their work, such as Github to track issues, the team’s project management tool to view assigned tasks, and their personal notes or to-do list.

The target users are working professionals and students.

Competitive Analysis

Notion

Notion screenshot

Strengths

Limitations

Asana

Asana screenshot

Strengths

Limitations

Research

To scope the problem, the team and I conducted interviews with fellow coworkers and classmates, with the goal of understanding their daily workflows including the current set of tools they use for task tracking in teams, and their experiences with personal productivity apps.

Questions Asked

Pain Points

It takes too much effort and time to update productivity tools.

It’s difficult to prioritize and choose what to start working on.

Takeaways

Tools used for team project management are often not viable or too complex for personal use.

Task tracking and notes are two important functions of daily work.

Design Considerations

Projects and tasks have different scopes and requirements. For example, a task to add a new feature to an app would have a much larger scope and timeline than a personal task such as buying groceries. The app must be able to account for this by allowing multiple project management methods.

The app should be a single source of truth for all the tasks that the user is responsible for. To accomplish this, the app must support integrations with project management tools used by teams such as Trello and Asana. For students, this means that the app must sync with popular education platforms, such as Google Classroom or Brightspace by D2L.

HMWs

Work management tools take effort and time to maintain. On top of that, long lists of tasks can feel overwhelming and discourage users from choosing one to start.

How might we reduce the effort required to update project boards and to-do lists?

How might we help users prioritize tasks?

Design Requirements

Wireframes

Wireframe 1

Workflow wireframe 1

Design Features

Limitations

Wireframe 2

Workflow wireframe 2

Design Features

Limitations

Wireframe 3

Workflow wireframe 3

Design Features

Limitations

Design Options

Option 1

Workflow design option 1

For this early iteration, I explored using customizable widgets in the sidebar, with the pomodoro timer and notes as examples. While the modular sidebar allows for customization, it would potentially detract from the experience as more setup would be required. A feature such as notes also needs far more space than the widgets allow for. These considerations led to the next iterations below.

Option 2

Workflow design option 2

This second option introduces a calendar component showing upcoming due dates to help users with task prioritization. When tasks in this calendar component are hovered, the corresponding card in the kanban board should lift off the screen with a subtle animation. The red pills signify the amount of time left before a task is due, while the colored tags for tasks represent the category that the task belongs to. The logo in certain tasks indicates that it was synced/imported from an external platform. I also designed the sidebar to include a dedicated notes section, following after familiar note-taking desktop apps such as Apple Notes and Evernote.

Option 3

Workflow design option 3

For the latest iteration, I designed the sidebar as a floating card to increase contrast with the background and more clearly distinguish it from the main content on the screen. As one of the pain points from the user interviews was that task tracking tools are time-consuming to update, I explored potential ways to make using the tool as effortless as possible. Through the input field below “Project Board”, users can quickly create new tasks complete with tags and due dates simply by entering prompts similar to the placeholder text (“English essay due Nov 16 :english:”).

Prototype and Flows

Arrow right

Branding

To ensure consistency in the visual design process and create a strong brand for users, I created a logo and established branding guidelines.

Logo

Workflow logo

The logo is inspired by the pomodoro timer as well as the cross section of the pomelo fruit (I originally called this project Pomelo!). In the early stages of the project, the pomodoro timer was a big inspiration which led to further thinking on how to help people be more productive.

Visual Guidelines

Workflow branding guidelines

Landing Page

The goal of the landing page is to capture signups and clearly explain the value proposition of the app.

Workflow desktop landing page
Workflow mobile landing page
Workflow mobile landing page

Reflection and Next Steps

While the design process for the first version of the app is complete, there is a lot more work to be done. For one, the development of an MVP is essential for high fidelity usability testing which would be used to iterate and improve upon these designs. As the app relies on integrations with other apps, the flows for each integration will also need to be explored and designed. Finally, productivity features such as a pomodoro timer or a "focus mode" which clears away distractions are also on the roadmap.

More Projects

Creating a space for Quora's trending content

Picture of Quora Explore page

Redesigning the Shopify Flash Sale experience

Picture of Frenzy app