KE

Project Management Web App

UX Research | UI Design

Client:

Personal project. I visualized this client as one that wants to create a simple project management web app to complement their large-scale project management tool. The new tool will be free and easy to use.

Role:

User experience researcher, user interface designer.

Tools:

Sketch, Adobe Comp CC, InVision, Milanote.

I. Discovery

Inspiration

I love time management and task-tracking tools, both digital and analog. Every December, I carefully choose my planner for the following year, and my phone is bursting with all sorts of productivity and organizational tools: apps for note taking, calendars, list makers, scheduling tools... I just love the feeling I get when I check off a box after accomplishing a task. That is why I decided to design my own project management tool. I have my biases, obviously, so I wanted to conduct thorough research to define my users, create personas and develop a tool that favorably compares to exisiting ones.

Market Research

First, I researched other business within the same market. I researched five tools, some I have previously used and some I was not familiar with.

I relied on heuristic methods and a spreadsheet to compile and compare my data.

Market Research
  • Trello: This is a great free tool for collaborative work. It relies on boards, lists and cards to show information at a glance. Its simple interface gives the user the ability to upload attachments, enter comments and define due dates. It provides cloud-based integration with outside services and syncs accross devices. However, it relies heavily on "Power-ups," which puts it at the mercy of third-party apps for additional functionality.
  • Basecamp: Powerful tool for established businesses. It combines project management and chat tools to deliver increased accountability and efficient communication within teams. It is a robust tool, but smaller teams might find it overwhelming and cost prohibitive.
  • Trello: Excellent tool for team projects and individual projects that require tracking of task deadlines. It provides efficient project visualization and timeline tools to create a calendar-driven experience. The interface is beautiful, with a great layout and good utilization of screen space. A premium version is available for those teams that outgrow the free features.
  • Jira: A tool used by Agile and software teams that helps them plan, track and release software. Useful features include version control, visual reports and integration with developer tools. It is a paid tool with a free trial period. The components available can be overwhelming and are not as intuitive for the user.
  • Thrive: Excellent tool for team projects and individual projects that require tracking of task deadlines. It provides efficient project visualization and timeline tools to create a calendar-driven experience. The interface is beautiful, with a great layout and good utilization of screen space. A premium version is available for those teams that outgrow the free features.

Market Research Findings

I found that some project management tools are specifically marketed toward a particular segment (Thrive for freelancers, Jira for software developers, Basecamp for businesses), and others are more versatile and designed for general use (Trello and Asana). Different price points might limit choices, or availability and functionality of free features. These elements were common accross the board:

  • Boards, lists and cards
  • Workflows
  • Drag-and-drop fucntionality
  • Integration and syncing across devices
  • Team work and collaboration
  • Comments, attachments, due dates

Consumer Research

My next task was to define the needs of users of web-based project management tools and narrow down a target audience. I hypothesized that users will gravitate toward a web-based app that is free, easy to use, visually appealing and that can be tailored to fulfill general project management needs or specific ones.

When I looked for participants to interview at this stage, I looked for people who have used a project management tool in the past or are currently using one, who intend to use one in the future, or simply someone with familiarity with web-based apps. Ideally, a group of people with a mix of traits.

My initial research questions included:

  • When you work in teams on a project, what tools do you use to communicate?
  • When you work in teams or on your own on a project, what tools do you use to manage, plan and assign tasks?
  • What are needs that are not being met by you current communication and/or project management tools?

I screened candidates using a simple Google Forms survey, and found six potential subjects who have used project management tools in the past. I interviewed them, dug deeper and figured out their needs, their preferences and thoughts about project management tools.

I asked them to rate their satisfaction level with the following features:

  • Ease of use
  • Navigation
  • Integration with third-party apps
  • Calendar integration
  • Email notifications
  • Comments
  • Team collaboration
  • Flexibility to fit your needs
  • Team collaboration
  • Layout and visual design

Aided by the information gathered through my initial survey and my interviews, I had an idea of my potential user personas. I relied on good old sticky notes to organize my information.

Personas

Personas

I used the organizational tool Milanote to craft my personas.

The first is Barbara, 29, a marketing director at a creative agency. She leads a team of five young people. She is tech-savvy and is always looking for new tools to incorporate into her workflow to be more efficient.

She has used Basecamp to manage projects in the past but realized that it has too many features she has no use for. She is practical and efficient, she knows when to delegate tasks and values energetic personalities.

  • Goals and needs: Tracking her team's progress in real time and efficient collaboration.
  • Ideal experience: A tool that allows to set due dates and individual assignments to better meet client deadlines and make sure her team completes tasks in a timely manner. Overview of her team's progress in one screen.
  • Pain points: She becomes frustrated when deadlines are missed, so she values the ability to assign due dates to specific tasks within a project management tool.
Barbara
Barbara, 29.

Next is Zach, 32, a law firm associate and the youngest member of his three-person team. He has gradually become the go-to "tech" person among his colleagues.

He has used project tracking tools in the past, particularly for group school projects, but does not use one currently for his work.

He values efficiency and always has in mind the billing structure at his firm, where revenue is measured in billable hours. He is assertive and does not mind taking on a teaching role.

  • Goals / Needs: Help his team transition toward using a project tracker to replace the simple Excel spreadsheets they are currently using, which are not flexible or interactive.
  • Ideal experience: A project tracking tool that is simple to use that he could successfully pitch to his colleagues.
  • Pain points: Older colleagues are reluctant to incorporate new technologies into their workflow.
Zach
Zach, 32.

And we have Bill, 52, a former journalist who recently transitioned to a career in public relations. He is used to taking notes by hand but is willing to learn new technologies and tools.

He is aware that his job security depends on his ability to keep his skillset fresh, and he plans to leverage his tech knowledge for career advancement as he eyes retirement within the next ten years.

He is organized, loyal, a team player and a quick learner.

  • Goals and needs: His team will incorporate the use of a project management tool for an upcoming assignment.
  • Ideal experience: Ideally, it will be a simple tool that is intuitive and easy to figure out.
  • Pain points: He has never used a project tracker tool before.
Bill
Bill, 52.

Moodboards

Again, I used Milanote to organize my moodboards. I organized them under mood words, colors, textures and shapes,layouts, typography and elements.

Moodboards
Moodboards.

II. Design

Sketches

With the help of my moodboard and user personas, I began to sketch my ideas for the app experience.

Sketch
Sketch
Sketch

User Flows

My user flow for the initial prototype would include five screens:

  • Main dashboard
  • Create a new project
  • Add team members
  • Project view (edit a project)
  • Task view (edit a task)
User Flow

To map out all of the screens a user will interact with, I used the iPad app Adobe Comp CC and used my sketches as a starting point to create low-fidelity wireframes.

From the main dashboard, the user will be able to hover over project cards to activate the overview section at the bottom of the screen. This overview section at the bottom will include details such as due dates, comments and attachments.

The right-side bar contains the list of team members. The idea at this stage is to allow the user to drag and drop team members into each project card at any point.

Individual project cards provide an overview of the project's title, descriptions, the number of tasks and whether they are overdue, small icons for team members, and the number of attachments. A new project card or button is available.

Wireframe

When the user creates a new project, a new project form will appear (not shown here) and the user will be asked to enter a project name, descriptions and to drag and drop team members. If team member profiles have to be created, the user can refer to the right sidebar to do so.

Once inside the project view, the user will have the ability to add tasks under three pre-made categories: to do, in progress and done. I will explore the possibility of giving the user the option to add more categories at this point.

Wireframe

Finally, the task view will contain an editable title, description and due date, a WYSIWYG text box, comment threads and the attachment area. The comments section will have its own scrolling function, with a preview of the comment and the ability to click to read the full comment, reply and create threads.

Wireframe

Wireframes

At this point, I jumped on Sketch to begin designing. After several iterations of the different screens and revisions of my user flow, I fleshed out a black-and-white mockup of my project management tool.

Sketch Dashboard View
In the dashboard view, the user can see all projects at a glance, in addition to a list of upcoming individual tasks and a feed with the latest comments across all projects.
New Project
After the user clicks on the Create a New Project button, they will see this intake screen.
Sketch Project View
The project view includes at the top a scrolling list of each task within that project, with columns for team members, due dates and tags. The bottom portion displays the user's tasks and the comment feed for that project.
Task View
The task view allows the user to edit the tag for that task, add or edit team members, attach and view files, add a due date and a description or note.
Team View
The team sidebar is always available to the user on the right side. From there, they can add or edit team members so they can later drag and drop them into individual projects or tasks.

III. Usability Testing

Prototype Testing

I decided to use the UMUX method (Usability Metric for User Experience) at this point, because the simplicity of this test would allow me to correct course if the reactions from my users as they interacted with my prototype were negative.

The UMUX method calls for two positive and two negative items, and I decided to use a five-point scale. The four items are:

  • [This system’s] capabilities meet my requirements.
  • Using [this system] is a frustrating experience.
  • [This system] is easy to use.
  • I have to spend too much time correcting things with [this system].

If this were a large-scale project, I would have scored and reported my results with percentile ranks for each item and perhaps a quadrant display, and asked users to compare my tool with others in the market. Because this was a personal project and I did not have the resources to conduct large-scale surveys and tests, I limited my reporting to notes and impressions. I'm happy to report that my participants had a positive reaction to my prototypes. All said the tool met the requirements they expect of a free project management tool and the system seemed easy to use. None said that the experience was frustrating or that they spent too much time correcting course to find the desired path.

In addition to the UMUX test, I asked my users the Magic Wand question: If you had a magic wand and could change one thing about this project management app, what would it be?

The feedback I received to the Magic Wand question was:

  • "Is a permanent sidebar for team members justified? Most of the time, team members are added to the project and there is rarely a need to edit the team mid-project. I would rather that space be utilized differently.""
  • "Will there be a tutorial for new users upon the creation of a new project? I would add one.""
  • "On the task view within a project, the table feels crammed and not very legible. I would give the rows more breathing room."

I found this feedback very helpful and I am currently incorporating those changes. A new iteration of my prototype will be finalized soon.

This project is a work in progress.

Home Next Project »