UX

Project page of Simple Project

Design of the company dashboard of Simple Project

On this page

Assignment

Design a new project management tool for startups and medium-sized companies.

Required features

  1. A project manager must be able to create a new project.
  2. A project manager must be able to assign new team members to a project.
  3. A project manager must be able to create and/or edit a timeline.
  4. A project manager must be able to add deliverables to a project and/or a task.
  5. A project manager must be able to change the status of a project and/or a task.
  6. A project manager must be able to group sub-projects under a larger parent project.
  7. A project manager must be able to assign an owner to:
       ◦ a parent project
       ◦ a sub-project
       ◦ a task within a sub-project 
  8. A project manager must be able to assign the following attributes to a project:
       ◦ due date
       ◦ “marked complete”
       ◦ comments
  9. A project manager must be able to indicate dependencies between projects.
  10. A project manager must be able to add an attachment to a task, a sub-project or a parent project.

Required screens

The design must consist of the following screens:

  • A dashboard that gives an overview of all the projects, teams and users.
  • A dashboard specific to one team.
  • A screen for creating new projects.
  • A screen for viewing project details.
  • A screen for managing/editing a project.

Company information

ACME is a large company in the United States, the United Kingdom and The Netherlands and develops enterprise project management tools for large international corporations. Their main product, ACME Enterprise, is a product management tool for managing large projects and is used by many of the world's most know multinationals.
In order to serve the lower end of the market and in order to make it possible for smaller companies to grow more quickly, they have decided to develop a simple, yet effective, open source project management tool for small and medium-sized companies. To express that the software will be effective and easy to use, the software is named Simple Project.

The above company and product information is purely fictional.

Competing products

Overview

Simple Project has the following competitors:

  • Basecamp
  • Trello
  • Taiga
  • OpenProject
Competitors of Simple Project

Basecamp

basecamp.com

Main dashboard

The main dashboard of Basecamp is divided into five sections: a menu, a search bar, a section for company wide messages, an overview of all the teams in the company and an overview of all the active projects in the company.

The menu at the top consists of: a link to the homepage (Home), a shortcut for sending people short messages (Pings), a notification bar (Hey!), a link to the personal log (Activity), a menu with shortcuts to your own files (My Stuff) and lastly a link (Find) that allows you to search the complete website.

Beneath the menu bar is a search bar that enables you to filter the teams and projects.
Great that they have added a section for company wide messages. This could be very useful for manager in a company.

The dashboard also gives a very clear overview of all the teams within a company. The overview works like an organizational chart (but without any hierarchy). There is option to change the view (cards or list), you can pin a team and you create a new team. It all works very easy and straightforward.

The overview of the projects works the same as the overview of the teams. A team is defined as group of people who do the same kind of work and a group is defined as a group of people who work together but have different skills.

The website looks very thought out but has two problems: everything looks quiet small (the text and the icons) and the website is not responsive. Because the website is not responsive, the interface doesn’t scale down and can’t be used on tablets and mobile phones. This is a missed opportunity because more and more people use tablets and mobile phones for work.

Teams dashboard

The web page of a Team Dashboard is divided into six blocks. They refer to the following pages: a message board, a to-do list, a file manager, a chat function, a calendar and a tool with which you can automate the questioning of questions (more about this below).

With the message board you can post different kind of messages: an announcement, a pitch, a question, a general remark (FYI) or just something positive (‘Heartbeat’). The interface is clean and simple. The bar at the top is a bit distracting. The functionality is limited (but probably enough).

The to-do list looks simple but is actually quite powerful: after entering the name of the to-do item you can assign the item to a specific person, notify others, set a due date and add additional notes.

With the file manager you can upload files, create simple text files and connect to a cloud platform. A preview of the file is shown in the file manager. Simple and effective. The space is limited though.

With the chat application Campfire you can chat with your colleagues. It is possible to add an attachment to your messages.

The calendar function works the same as a program like Outlook: you can add an event and the event is then shown on the calendar. I don’t see an option to add a notification.

The last functionality of the Team Dashboard is a bit strange: it gives you the ability to set a recurring question to your team. If a manager has to ask the same question every day this can be useful but getting the same question every day can also become very annoying.

I think the Team Dashboard looks and works very nice! The only problem is, again, that everything looks a bit small. A responsive design, that makes use of all the available space that a desktop screens offers, would be more useful.

Project dashboard

The Project Dashboard looks and functions exactly the same as the Team Dashboard.

Trello

Trello.com

Kanban board

Trello is a Kanban application. This means that all your task are organized in the categories Things to Do, Doing and Done.

The menu at the top has the following buttons: an application switcher, a home button (which brings you to a dashboard with an overview of all the boards), a button to quickly switch boards, a search bar (that allows you to search all the tasks). At the right side you have: an add button (to create a new board or a new team), an information button (which gives information that is similar to a help functionality), a notification button (to get an overview of all the received messages) and with the last button you can view your profile and app settings.

The biggest part of the screen is dedicated to the Kanban board. By default, is has three categories displayed as three columns. At the bottom of every category you have the option to add a new task. When you click on it, you can add a new task immediately. If needed, you can drag and drop tasks between categories.

When you click on a task, a window appears with all the details of the task. In this window you can change or add the following functionality: set a due date, add a description, write a comment, add team members, add tags (labels), attach files, add a checklist and set a cover.

Trello seems very powerful but unfortunately it suffers form the same problem as Basecamp: the text and icons are quite small and the interface is not responsive. The interface could have a much bigger impact when the tasks were bigger and when they were centered on the screen. It should also have mobile view so that it can be viewed on mobile phones.

Taiga

taiga.com

Create project dialog

Taiga offers two interfaces to manage a project: a Scrum interface and a Kanban interface.

The dialog for creating a new project is simple and straightforward. The dialog however suggest that there are four templates to choose from. That’s not true: there are only two templates you can choose from (Scrum and Kanban) and the last two options are just others ways for starting a new project. Because of this, I believe they should be separated visually. The solution is simple: just add some space between the two options above and the two options below. And if you put the last two options side by side, it’s even more clear that they have a different function.

SCRUM
KANBAN

Other options
Import existing project | Duplicate existing project

Backlog screen

When you choose to create a new project with the Scrum interface you are immediately redirected to the Backlog screen. On this screen there is only one thing you can do: adding new user stories to the project. This is surprising because shouldn’t you add an epic first? After all, a user story belongs to an epic.

To present all the user stories as a list is a good choice because the title of a user story can be long and if you place them next to each other you quickly run out of space.

Epics overview

It is possible to add epics to a project but this must be enabled in the settings of a project (Admin → Modules → Epics). Epics are a way to group user stories but probably not everybody uses them. There must be a reason why they are not enabled by default.

The epics overview is very convenient because in one view you can see all the epics and user stories. This is something I surely would like to have in a scrum project management tool!

Issues overview

With Taiga, you can create new issues (bug report, question, feature request) but you can’t assign that issue to a user story. There may be a good reason why this isn’t possible but at first glance this is something that I really would like be able to do.

Kanban overview

Instead of using the Scrum interface it’s also possible to create a new project with the Kanban interface.

The Kanban interface has the same options as the Scrum interface but instead of showing all the user stories in a list they are shown as cards in columns.

The nice thing about Kanban is that it visualizes all the stages that an issue (in our example a user story) goes through. Or in other words: the horizontal alignment of the categories acts as a timeline.

The advantage is clear: you get an immediate overview of all the issues and the stages they are in. The disadvantage is that, if you have a lot of open issues, the board may look disorganized.

The Kanban overview has one user interface error: when you click on the icon to filter all the issues, the corresponding dialog is shown on the other side of the screen (on the left side). This despite the fact there is enough available space at the right side. Another problem is that the same dialog is shown above the Kanban board and that all the issues that are in the column Ready aren’t visible anymore.

The solution is simple: show the dialog at the right side of the screen. Another solution it so to move the whole Kanban board to the right at the moment that the dialog is opened. If this last solution is chosen, the filter icon should be moved to the left side of the screen.

OpenProject

openproject.org

Overview page

The first thing that you see when you open a project in OpenProject is an overview that gives you quick access to the various elements of the project. This dashboard has the following sections: a banner to advertise the project, an area for shared files, a short description of the project, the project status, an overview of all the members, an overview of all the work packages (tasks, features, bugs) and at the bottom an overview of all the milestones (including a Gantt chart).

The need for this dashboard is questionable: on the one hand it’s necessary to give the user a starting point to navigate the application, on the other hand: do customers really use this dashboard? Most of the time I skip a dashboard and immediately go to the screen that I need to be. Dashboards feel artificial to me. Maybe, when you design an application well, you don’t need a dashboard at all?

That being said, the dashboard of OpenProject is very easy-to-use: when you click on one of the sections, an embedded text-editor is opened and you can edit the text on the spot. Why don’t all content management systems work this way?

Work packages screen

The Work packages screen gives an overview of all open tasks, feature requests, bugs and milestones. These issues are presented in a long vertical list. Every issue has the following properties (displayed horizontally): the type of issue, a unique id, the name of the issue, the status, the name of the person to whom the issue is assigned to and finally: the priority of the issue.

In order to show the hierarchy between two issues, the text of the child issue is indented. The advantage of this is that the relationship between the two issues is immediately visually clear.

On the left side of the screen the user has the option to quickly filter the list. If the user wants more options he/she can click on the button Filter (in the menu bar at the top right). With this feature it’s possible to search on every property of an issue.

I think the overview is very well-designed. The only thing that I don’t like is the location of the search bar. I believe the location of the search bar should be somewhere on the left side of the screen because when you are typing in English you write from left to right. It feels weird then to start typing at the right side of the screen. The functionality of the search bar and the Filter button overlap each other and could be merged.

Gantt chart

One of the nice things about OpenProject is that you can also view all the issues as a Gantt chart. In order to get this overview you only have to click on the menu item Gantt at the right side of the screen.

The Gantt chart may be there, it is however, not very useful because by default it shows a monthly calendar and this makes all the events appear too close to each other. The solution is simple: use instead the weekly or daily calendar by default.

Another problem with the Gantt chart is that it’s only shown at the right side of the web page and that it doesn’t offer a quick way to make it full screen. It is possible to make it full screen by dragging the handler to the left side but this is inconvenient. It should be possible to make it full screen by just one click.

In order to change the view of the Gantt chart the user has to click on the zoom in and zoom out buttons. I think however, that it would be better to create a drop-down menu which includes the following options: daily, weekly, monthly and yearly. This way you add semantic meaning to the different zoom levels.

New task window

The window to create a new task has the following fields: a field for entering the name of the task, a field for a short description, a field for assigning the assignee, a field for the person who is accountable, a field for adding the estimated time needed to finish the task, the start and end date, a field to set the progress that has been made so far, a field for setting the priority and finally you have an option to add one or more files to the task.

This window for creating a new task is complete and very well-designed. There is only one thing that seems missing: there is no explicit option to set the due date. This can however be solved by adding a label for the start and end date of the task.

In the screenshot on the left, the window for creating a new task is shown full screen. However, when you open the window for the first time, it is, just as the Gantt chart, shown on the right side of the screen. Because it is shown on the right side, it suffers from the same usability error as the search bar at the top of the screen: because English is written from left to right it feels awkward to start a sentence at right side of the screen. Again the solution is simple: always start a dialog somewhere at the left side of the screen. This should be, in my opinion, a usability rule.

Kanban board

Independent of whether you choose to create a new project with the classic project management method or with the scrum method, it is always possible to show the open issues in a Kanban board.

The Kanban board uses of the following categories: New, In progress, Closed and Rejected. With the Kanban board it is possible to create an issue, delete an issue, move issues between lists, create a new list, reorder the lists and to delete a list. The only option that seems missing is the ability to rename a list.

One feature that’s interesting, especially during meetings, is the ability to show the Kanban board full screen. The last feature that’s interesting is the ability to filter all open issues.

Task board

The Task board works the same as the Kanban board but with the difference that a timeline with the days of the weeks is shown instead of the Kanban categories New, Progress, Closed and Rejected.

I can image this to be really useful for people planning their week. With the Kanban board it’s not possible to rename a list but with the Task board it is!

The design does raise a question though: how does the application know where to put an item when there isn’t, despite the naming of the lists suggests, a date or a time attached to those lists (when you create a new list it’s only possible to give it a name but you can’t add a date or a time to it)?

The first impression of the board is good but after analyzing the board I believe it could lead to all kind of usability errors. This should to be tested in practice however.

User interviews

Goal

The goal of conducting the interviews is to find out what kind of experiences people have with project management applications.

Questions

In English

  1. Which project management tool do you use?
  2. Which project management method does the application use?
    Options: classic project management (PRINCE2), Scrum (Agile), Kanban, etc.
  3. How did you hear about the project management tool?
  4. What was the reason for signing up or buying the project management tool?
  5. What is the main selling point of the project management tool?
  6. Does the project management tool meet your expectations?
  7. What is the most surprising aspect of the project management tool?
  8. What is the most annoying aspect of the project management tool?
  9. Do you use complimentary project management tools?
    If so, which one and why?
  10. Is there anything else that should be mentioned of the project management tool?

In Dutch

  1. Van welke project management applicatie maakt u gebruik?
  2. Van welke project management methode maakt de applicatie gebruik?
    Opties: standaard project management (PRINCE2), Scrum (Agile), Kanban, etc.
  3. Hoe heeft u de project management applicatie leren kennen?
  4. Wat was de reden om u voor de project management applicatie aan te melden of om deze te kopen?
  5. Wat is de hoofdfunctionaliteit van de project management applicatie?
  6. Voldoet de project management applicatie aan uw verwachtingen?
  7. Wat is het meest verrassende aspect van de project management applicatie?
  8. Wat is het meest vervelende aspect van de project management applicatie?
  9. Gebruikt u nog een aanvullende project management applicatie?
    Zo ja, van welke applicatie maakt u gebruik en waarom?
  10. Is er nog iets wat moet worden genoemd over de project management applicatie?

Interviewees

I interviewed the following people:

 

Findings

  1. Which project management tool do you use?
    Two out of four respondents use Jira as their main project management application. One respondent uses Monday and one respondent didn’t use a project management application at all.

  2. Which project management method does the application use?
    Options: classic project management (PRINCE2), Scrum (Agile), Kanban, etc.
    Jira uses the following project management methods: Scrum, Agile and Kanban. Monday doesn’t use a specific project management method. One respondent uses Microsoft Word and Excel to work with Six Sigma and Lean.

  3. How did you hear about the project management tool?
    None of the respondents did choose the project management tool themselves. They all learned about the application at work.

  4. What was the reason for signing up or buying the project management tool?
    None of the respondent did buy the project management tool themselves. The project management tool was bought by someone else before their time.

  5. What is the main selling point of the project management tool?
    The two respondents who use Jira as their main project management tool both said they spend most of their time using the Kanban/Scrum board. The respondent that uses Monday said that the main functionality of the application is creating new tasks and assigning them to different employees. According to this person the centralized nature of Monday creates a very efficient workflow. There is no need anymore to keep sending emails endlessly and people can work together efficiently without speaking to each other.

  6. Does the project management tool meet your expectations?
    The two respondents who use Jira both said that the application meets their expectations. The person that uses Monday said the application was very straightforward and user-friendly.

  7. What is the most surprising aspect of the project management tool?
    The respondents that use Jira both said that the most surprising aspect of Jira is its easy of use. Especially the Kanban/Scrum board is valued highly. The most surprising aspect of Monday is its colorfulness. This makes it very enjoyable to use.

  8. What is the most annoying aspect of the project management tool?
    About Jira: one respondent said he missed the ability to create a Gantt chart and the other said that when you add multiple test results to a user story the interface can become disorderly. About Monday: it is very distracting that you get to see the tasks of all your coworkers. It would be great if could hide those.

  9. Do you use complimentary project management tools? If so, which one and why?
    Two respondents use Microsoft Excel for its diagram capabilities.

  10. Is there something else that should be mentioned of the project management tool?
    One respondent recommended the application Mural for evaluating a sprint and holding brainstorm sessions (Mural is an online whiteboard application).

What I learned

  1. The Kanban/Scrum board in Jira is valued highly.
  2. The centralized nature of Monday creates a very efficient workflow.
  3. The user-friendliness of an application is considered to be very important.
  4. The colours of an application can have a positive impact on the user.
  5. Only show information that’s relevant to the user.
  6. People like having the ability to visualize the information.

Transcripts

The complete transcripts of the five interviews are, if necessary, available on request.

Project methods

Introduction

This chapter gives an overview of the most important project management methods that are used around the world today. This list of project management methods is derived from two articles  on the internet: the article Useful Project Management Tools and Techniques and the article Project Management Methodologies — An Overview. The purpose of the list is to find common aspects in the various project management methods.

Classic project management

The classic project management method consists of the following elements:

  1. Create a plan for the upcoming work.
  2. Estimate the time every task will cost.
  3. Allocate resources (people, equipment, etc.).
  4. Executing the work.
  5. Monitoring the deadlines and the quality of the product.
  6. Evaluate the project.

Waterfall method

The Waterfall method has the following characteristics:

  • Tasks are performed sequentially.
    A new task only starts when the previous task is accomplished.
  • A Gantt chart is used to visualize the tasks and their dependencies.
  • It has the following six phases:
    1. Capture requirements
    2. Create models to analyze the requirements
    3. Design the system
    4. Code the software
    5. Test the software
    6. Maintain the system

Agile project management

The Agile project management method has the following characteristics:

  • A project is divided into multiple short sprints (iterations).
  • The planning is adaptive (i.e. there is no fixed plan).
  • Each sprint is continuously improved.
  • At the end of every sprint a workable project is delivered.
  • Each team is self organized.
  • Collaboration within a team is encouraged.

Principles of agile development are:

  1. Individuals over processes.
  2. Working software over detailed documentation.
  3. Customer collaboration over contract negotiation.
  4. Responding to change over rigid planning.

Scrum

Scrum is a detailed implementation of the agile development method. The Scrum framework consists of three artifacts, six different types of meetings and three distinct roles.

Artifacts

  1. Product backlog
    The product backlog consist of all the user stories (requirements) that needs to be done in order to finish the product.
  2. Sprint backlog
    The sprint backlog is the list of user stories that needs to be accomplished during a sprint. The sprint backlog is part of the larger product backlog.
  3. Increment
    An increment is the usable end-product at the end of a sprint. Synonyms are: milestone, shipped epic or sprint goal.

Meetings

  1. Organize the backlog
    During the project, the product owner is responsible for creating and maintaining the product backlog.
  2. Sprint planning
    Every sprint starts with a sprint planning in which the development team decides which user stories to work on.
  3. Sprint
    A sprint is the actual time period when the scrum team works together to finish an increment. The average length of a sprint is two weeks.
  4. Daily scrum
    The daily scrum is a short meeting where all the members of the development team can tell where they will be working on and voice any concerns they might have about the sprint. The meeting usually lasts around 15 minutes.
  5. Sprint review
    A sprint review is held at the end of every sprint. During the sprint review a demo of the product is shown and the development team reports which user stories are implemented.
  6. Sprint retrospective
    The sprint retrospective is a meeting at the end of a sprint where the sprint is evaluated and documented. The emphasis is on what went well and less on what went wrong.

Roles

  1. Product owner
    The product owner is the person who is responsible for building and maintaining the product backlog and for keeping in contact with the stakeholders of the project (the client, the development team, other business partners).
  2. Scrum master
    The scrum master is the person who is responsible for managing the development team.
  3. The development team
    The development team consists of all the employees that are working on an increment.

Source: Drumond, C. (n.d.). What is Scrum? Retrieved 13 May, 2020, from https://www.atlassian.com/agile/scrum

Lean

The goal of the lean project management method is to cut waste in order to increase the value of the whole production chain. It tries to achieve this by continuously improving all the aspect of the production chain.

The five principles of Lean are:

  1. Define value
    What are the needs of the customer and how much is he/she willing to pay for the product?
  2. Map the value stream
    Identify the features of a product (or service) that adds value to the customers needs and eliminate all unnecessary features (or processes).
  3. Create a flow
    The flow of the production chain can be improved by:
    1. Breaking down the production chain in smaller steps.
    2. Reconfiguring the production steps.
    3. Leveling out the workload.
    4. Creating cross-functional departments.
    5. Training employees to be multi-skilled and adaptive.
  4. Establish pull
    Products are only created at the time (and in the quantities) they are needed (just-in-time delivery). The flow of the stream is from the end user to the production system.
  5. Pursue perfection
    All the steps and processes involved in the production of a product should be improved continuously. Every employee should strive for perfection of the development process.

Source: Do, D. (2017, August 5). The Five Principles of Lean. Retrieved 13 May, 2020, from https://theleanway.net/The-Five-Principles-of-Lean

PRINCE2

PRINCE2 stands for Projects IN Controlled Environments and is a structured and certified methodology for IT projects developed by the UK Government.

The seven principles of PRINCE2 are:

  1. Continued business justification
    There must be a clear return on investment and the use of time and resource should be justified.
  2. Learn from experience
    Project members should learn from previous projects.
  3. Define roles and responsibilities
    Everybody in the projects knows what his or her role in the project is.
  4. Manage by stages
    Divide larger projects into multiple subprojects.
  5. Manage by exception
    Only manage a group of people when it’s needed (e.g. when something goes wrong).
  6. Focus on products
    All stakeholders should focus on the end product.
  7. Tailor to the environment
    Adapt the PRINCE2 methodology to your projects needs. Do not use PRINCE2 dogmatically.

Source: ILX Marketing Team. (2016, September 19). The 7 Principles, Themes and Processes of PRINCE2. Retrieved 13 May, 2020, from https://www.prince2.com/uk/blog/the-7-principles-themes-and-processes-of-prince2

Other methods

Six Sigma

The focus of the project management method Six Sigma (6σ) is on identifying what is and what is not working in a production chain. It tries to find the aspects of a production chain that are stable, expected and have the highest impact on the process. It continuously tries to improve all the steps of a production chain.

Adaptive Project Framework

Adaptive Project Framework (APF) is a pragmatic implementation of the agile development method.

Some aspects of the Adaptive Project Framework are:

  • It’s open to change.
  • Iterative delivery.
  • Deep client involvement.

Rational Unified Process

Rational Unified Process (RUP) is an agile project management method that emphasizes the importance of customers feedback. It incorporates this feedback in their planning.

Program Evaluation and Review Technique

The project management method Program Evaluation and Review Technique (PERT) is used for large and long-term projects when a complex and detailed planning is needed. To visualize the planning and the tasks PERT charts are being used.

Critical Path Method

The Critical Path Method (CPM) is a method to find the longest development path within a project. Critical tasks are task that heavily influences the deadline of a project. The tasks of a project are modeled with a PERT chart.

Critical Chain Project Management

Critical Chain Project Management (CCPM) is similar to the Critical Path Method with the difference that it is more flexible with the allocation of resources (people, equipment, office space, etc.) and focuses more on how the available time is being used. Compared to the Critical Path Method it is less rigid. The technique also emphasizes the prioritization and analysis of the dependencies of the tasks.

Event Chain Method

Event Chain Method (ECM) is similar to the Critical Path Method and Critical Chain Project Management but with the difference that it focuses on identifying and managing the events that impact the development of a project.

Extreme Project Management

Extreme Project Management (XPM) focuses on the human factor of project management instead of any formal methods or planning.

Some characteristics are:

  • Short development cycles.
  • Multiple releases.
  • A project is allowed to change based on changing requirements.

Extreme Project Management can be used when a customer doesn’t know all the requirements at the beginning of a project.

Summary

General project management

Starting phase
  • At the start of a project a plan is made.
    This project plan can be very detailed (Waterfall method) or can be less precise (Scrum).
  • At the start of a project all the resources are allocated.
    Some examples of resources are: people, time, money, equipment.
  • At the start of a project the requirements are captured and analyzed.
    The capturing and analyzing of the requirements can be very detailed (Waterfall method) or less precise (Scrum).
    ◦ Requirements are called user stories in Scrum.
    ◦ Scrum: the user stories are stored in the product backlog.
Development phase
Start
  • If necessary, a project is divided into multiple subprojects.
  • A time period is allocated to the project (and possible subprojects).
  • Employees are assigned to the project (and possible subprojects).
Middle
  • The time period is divided into multiple smaller time periods.
  • During a shorter time period, employees work on one or more requirements.
    ◦ A short time period is called a sprint in Scrum.
    ◦ The number of requirements to work on during a time period can change (Scrum).
    ◦ Scrum: the requirements that are worked on are stored in a sprint backlog.
  • Different teams can work in parallel on multiple features.
End

At the end of a time period the product is evaluated.

Common themes

  • Improve the development process by asking the employees what goes well (Six Sigma, Scrum).
  • Involve the customer in the development of the product (Rational Unified Process, Agile, Scrum).
  • Use visual diagrams to plan a projects (Program Evaluation and Review Technique, Scrum).
  • In order to plan a project, find out what the longest path in the development is (Critical Path Method).
  • Be flexible in allocating the resources (people, equipment, office space, etc.) (Critical Chain Project Management, Agile, Scrum).
  • Find out which events have the highest impact on the development of a product (Event Chain Method).
  • Divide larger projects into multiple smaller projects (Agile, Scrum, Prince2).
  • Use multiple shorter development cycles (Agile, Scrum, Adaptive Project Framework, Extreme Project Management).

User stories

Team management

Create a new team
A project manager should be able to create a new team because all project management methods uses teams to organize people into groups.

Acceptance criteria
• It must be possible to give a team a unique name.
• It must be possible to add one or multiple employee(-s) to a team.
• It should be possible to attach a symbol or an image to a team.

Change the name of a team
A project manager should be able to change the name of a team because during a project he/she can think of a more descriptive name and during a project the function of a team can change.

Change the symbol or image of a team
A project manager should be able to change the symbol or image attached to a team because during the project the function of a team can change and so should the symbol/image. During the project it is also possible that the project manager thinks of a more descriptive symbol/image.

Add one or multiple employees to a team
A project manager should be able to add one or multiple employees to a team because during a project new employees can enter a team.

Acceptance criteria
• When adding an employee, his/her first and last name must be visible.
• When adding an employee, his/her profile image must be shown.
• When adding an employee, his/her role within the company must be visible.

Remove one or multiple employees from a team
A project manager should be able to remove one or multiple employees from a team because during a project employees can leave a team.

Acceptance criteria
• When removing an employee, his/her first and last name must be visible.
• When removing an employee, his/her profile image must be shown.
• When removing an employee, his/her role within the company must be visible.

Delete a team
A project manager should be able to delete a team because he/she wants to be able to clean up his/her administration.

Acceptance criteria
• When deleting a team, the name of the team must be visible.
• When deleting a team, the symbol or image of the team must be visible.
• After deleting a team, all employees should be removed from the team.

View all teams
A project manager should be able to get an overview of all the teams so that he knows which teams exist within the company.

Acceptance criteria
• The names of the teams must be shown.
• The symbols or images of the teams must be shown.
• The number of employees per team must be shown.

Assign a role to a team member
A project manager must be able to assign a specific role to a team member because many project management methods give specific roles to different team members.

Acceptance criteria
• The roles must have been created at an earlier stage.
• If a specific role doesn’t already exist, it should be possible to create one on the fly.

Project management

Create project
A project manager must be able to create a project so that he is able to allocate resources (people, time, equipment, money) to a certain goal.

Acceptance criteria
• It must be possible to enter the name and a description of the project.
• It must be possible to add a banner or a cover to the project.
• It must be possible to add the name of the client to the project.
• It must be possible to set the status (open, in progress, completed, declined) of the project.
• It must be possible to give the project a priority (low, medium, high).
• It must be possible to add one or multiple epics to the project.

Edit project
A project manager must be able to change the details of the project so that he is able to administer the changes that happen during a project.

Acceptance criteria
• It must be possible to change the name and a description of the project.
• It must be possible to change the banner or the cover of the project.
• It must be possible to change the name of the client of the project.
• It must be possible to change the status (open, in progress, completed, declined) of the project.
• It must be possible to change the priority (low, medium, high) of the project.
• It must be possible to remove one or multiple epics.

Archive project
A project manager must be able to archive a project so that he/she can clean up his/her administration.

Acceptance criteria
• The difference between deleting and archiving a project must be explained.
• The location where the archive is saved, must be shown.

Remove archive
A project manager must be able to remove an archived project so that he is able to delete sensitive information.

Acceptance criteria
• A warning must be shown that all the information related to the project is permanently deleted.

Epics management

Create epic
A project manager must be able to create a new epic so that he/she can split up a large project into multiple smaller projects.

Acceptance criteria
• It must be possible to enter a name and a description of an epic (subproject).
• It must be possible to set the priority (low, medium, high) of the epic.
• It must be possible to set the status (open, in progress, completed, declined) of the epic.
• It must be possible to add one or multiple user stories to the epic.

Edit epic
A project manager must be able to change the details of a project so that he is able to administer the changes that happen during a project.

Acceptance criteria
• It must be possible to change the name and the description of the epic.
• It must be possible to change the priority (low, medium, high) of the epic.
• It must be possible to change the status (open, in progress, completed, declined) of the epic.
• It must be possible to remove one or multiple user stories from the epic.

Archive epic
A project manager must be able to archive an epic so that he/she can clean up his/her administration.

Acceptance criteria
• The difference between deleting and archiving an epic must be explained.
• The location where the archive is saved, must be shown.

Remove archive
A project manager must be able to remove an archived epic so that he/she can delete sensitive information.

Acceptance criteria
• A warning must be shown that all the information related to the epic is permanently deleted.

User story management

Create user story
A project manager (or product owner) must be able to create a user story so that he/she can add a feature or a distinct unit of work to an epic.

Acceptance criteria
• It must be possible to enter a name and a description of the user story.
• It must be possible to set the priority (low, medium, high) of the user story.
• It must be possible to set the status (open, in progress, completed, declined) of the user story.
• It must be possible to assign a team to a user story.
• It must be possible to add one or multiple tasks to a user story.

Edit user story
A project manager (or product owner) must be able to change the details of a user story so that he is able to administer the changes that happen during a project.

Acceptance criteria
• It must be possible to change the name and description of the user story.
• It must be possible to change the priority (low, medium, high) of the user story.
• It must be possible to change the status of the user story.
• It must be possible to assign a different team to a user story.
• It must be possible to remove one or multiple tasks from the user story.

Archive user story
A project manager must be able to archive a user story so that he/she can clean up his/her administration.

Acceptance criteria
• The difference between deleting and archiving a user story must be explained.
• The location where the archive is saved, must be shown.

Remove archive
A project manager must be able to remove an archived user story so that he is able to delete sensitive information.

Acceptance criteria
• A warning must be shown that all the information related to the user story is permanently deleted.

Task management

Create task
A project manager (or product owner or scrum master) must be able to create a new task so that he/she can split up a user stories into multiple smaller work units.

Acceptance criteria
• It must be possible to enter the name and description of the task.
• It must be possible to label (bug report, feature request) a task.
• It must be possible to set the priority (low, medium, high) of the task.
• It must be possible to set the status of the task.
• It must be possible to assign a team member to the task.

Edit task
A project manager (or product owner or scrum master) must be able to change the details of a task so that he is able to administer the changes that happen during a project.

Acceptance criteria
• It must be possible to change the name and description of the task.
• It must be possible to change the label (bug report, feature request) of a task.
• It must be possible to change the priority (low, medium, high) of the task.
• It must be possible to change the status of the task.
• It must be possible to assign a different team member to the task.

Archive task
A project manager (or product owner or scrum master) must be able to archive a task so that he/she can clean up his/her administration.

Acceptance criteria
• The difference between deleting and archiving a task must be explained.
• The location where the archive is saved, must be shown.

Remove task
A project manager must be able to remove an archived task so that he is able to delete sensitive information.

Acceptance criteria
• A warning must be shown that all the information related to the task is permanently deleted.

Product backlog management

Add user story
A project manager (or product owner) should be able to add a user story to the product backlog so that he/she is able to record all the work that has to be done during a project.

Add epic
A project manager (or product owner) must be able to add a new epic to the product backlog so that he is able to group multiple user stories into one subproject.

Add user story to epic
A project manager (or product owner) should be able to add a user story to an epic so that he/she is able to group multiple user stories together.

Remove user story from epic
A project manager (or product owner) should be able to remove a user story from and epic because during the project he/she can think of a better way to organize the user stories.

Sprint backlog management

Add user story
A scrum master must be able to add a user stories from the product backlog to the sprint backlog so that he is able to create a log of what has to be done during a sprint.

Add epic
A scrum master must be able to add an epic to the sprint backlog so that he is able to group multiple user stories together.

Add user story to epic
A scrum master must be able to add a user story to an epic so that he/she is able to group multiple user stories together.

Remove user story from epic
A scrum master must be able to remove a user story from an epic because during the project he/she can think of a better way to organize the user stories.

Sprint management

Create sprint
A scrum master must be able to create a new sprint so that he/she is able to create a schedule when the development team should work on different user stories.

Acceptance criteria
• The iteration number should be generated automatically.
• It must be possible to set the start date of the sprint.
• It must be possible to set the due date of the sprint.
• It must be possible to assign a development team to the sprint.
• An empty sprint backlog is assigned to the sprint automatically.

Edit sprint
A scrum master must be able to edit the detail of a sprint because during the sprint he/she can think of a better way to organize and/or schedule the sprint.

Acceptance criteria
• The iteration number should be generated automatically.
• It must be possible to change the start date of a sprint.
• It must be possible to change the due date of a sprint.
• It must be possible to assign a different development team to the sprint.
• A(n) (empty) sprint backlog always keeps assigned to the sprint.

Archive sprint
A scrum master must be able to an archive a sprint so that he/she can clean up his/her administration.

Acceptance criteria
• The difference between deleting and archiving a task must be explained.
• The location where the archive is saved, must be shown.

Remove sprint
A scrum master must be able to remove an archived sprint so that he/she can delete sensitive information.

Acceptance criteria
• A warning must be shown that all the information related to the sprint is permanently deleted.

Use cases

Create company

Create project

Create team

Create user story

Create epic

Create task

Add user stories to epic

Create sprint

Add user stories and/or epics to sprint

Add team to sprint

Visual planning tools

Kanban board

How a Kanban board works

  • The board is divided into three columns: To do, In progress (or Doing) and Done.
  • All the task are written on a card.
  • The cards are places on the board in the appropriate column.

Variations

  • As seen in the above image, a column can be divided into sub columns.
  • More columns can be added (Trello, Taiga, OpenProject).
  • The columns can be renamed (Trello, Taiga).

Scrum board

How a Scrum board works

  • The board is divided into four columns: Product backlog, To do, In progress and Done.
  • The user stories are placed in the column Product backlog.
  • The tasks belonging to a user stories are placed in on of the subsequent columns (To do, In progress, Done).

Notes

  • The sprint backlog is not visible in the above screenshot.
  • The scrum board doesn’t give an overview of all the sprints.
  • It’s possible to add a column that shows the owner of the user story.

Gantt charts

How a Gantt charts works

  • The board is divided into columns and rows.
  • The time is shown horizontally.
  • The tasks are written down vertically.
  • A row shows when a task starts, is in progress and when it finishes.

Notes

  • In the above screenshot the dependencies between two or more tasks are not visible.
  • The progress of a task can be shown as a block (as in the above screenshot) or as a bar (e.g. OpenProject).

PERT charts

How a PERT chart works

  • Write all the task on a card.
  • Write the start date, the duration and the due date on the card.
  • Organize the cards by their dependencies.
  • Order the cards according to their timeline.
  • Place the cards on the board.

Notes

  • Another name for a PERT chart is a Project network diagram.
  • In the above diagram the employees that are working on a task are not visible.

Timelines

How a time line works

  • The time line is presented horizontally.
  • All the important dates of a project are added to the timeline.

Notes

  • Despite its simplicity, a timeline is a very powerful tool to give insight in the structure and process of a project.

Eisenhower matrix

How the Eisenhower matrix works

  • Write down the things you have to do.
  • Decide if an item is important or not.
  • Decide if an item is urgent or not.
  • Place the items on the Eisenhower Matrix according to their importance and urgency.

Notes

  • The Eisenhower matrix is more a tool for prioritization than for planning.
  • When you are an employee, you don’t have the possibility to delegate a task.
  • Why record something that is not important and not urgent?

Moodboard

Design goal

The goal is to create a design that looks modern, professional, and at the same time is playful and a fun to use.

Motivation

The motivation for this design goal is that during an interview one of the respondents said that she liked the colorfulness of the application Monday and that this gave her a positive feeling and a willingness to use the application. She liked the fact that the application didn’t look business-like.

Mood statement

A project manager should feel

  • relaxed
  • enthusiastic
  • confident
  • motivated
  • vitalized

when working with Simple Project.

Visual style

Flat design

  • Clean and modern.
  • Use of a small number of colors.
  • No realistic shadow effects.

Fun and playful

  • Informal and lighthearted.
  • Colourful.
  • May contain elements of fantasy.
  • May contain pictures of a person, animal or a subject.

Initial moodboard

Final moodboard

User personas

Project manager

Software developer

User flow diagram

Conceptual models

The creation of a conceptual model is normally not a part of the UX design process but a part of the software development of an application. Having said that: I believe this step should be a part of every UX design process because the information you can get out of this model is invaluable.

Initial conceptual model

Final conceptual model

Chart experiments

Wireframes

High-fidelity designs

Initial design

Final design

Interactive design

Click on the button below to go to a separate web page with the interactive design.

Tip 1: To get the best experience, view the design on a large screen (a computer monitor or a laptop screen will do).

Tip 2: Click on 'Toggle hotspots' to show all clickable areas.

References

Color theory

  • Chapman, C. (2010, January 28). Color Theory for Designers, Part 1: The Meaning of Color. Retrieved February 4, 2010, from https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color
  • Chapman, C. (2010, February 2). Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology. Retrieved February 4, 2010, from https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology
  • Chapman, C. (2010, February 8). Color Theory for Designers: How To Create Your Own Color Schemes. Retrieved February 4, 2010, from https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes
  • Ferrum College. (n.d.). Color Systems Handbook. Retrieved February 4, 2010, from https://www.ferrum.edu/artsandhumanities/wp-content/uploads/sites/26/2016/11/2014-COLOR-SYSTEMS-handbook.pdf
  • Pejanovic, F. (n.d.). RGB vs CMYK: Guide to Color Spaces. Retrieved February 3, 2010, from https://www.printful.com/blog/rgb-vs-cmyk-guide-to-color-systems
  • MMi Creative. (n.d.). The 60-30-10 rule. Retrived June 26, 2020, from http://mmicreative.com/the-60-30-10-rule
  • Schäferhoff, N. (2019, December 18). 7 Rules for Website Color Schemes. Retrieved June 26, 2020, from https://websitesetup.org/website-color-schemes
  • Soegaard, M. (n.d.). Recalling Color Theory Keywords: a way to refresh your memories! Retrieved February 3, 2010, from https://www.interaction-design.org/literature/article/recalling-color-theory-keywords-a-way-to-refresh-your-memories
  • Tiger Color. (n.d.). Color Harmonies. Retrived June 26, 2020, from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm

Customer Journey Maps

  • Kaplan, K. (2016, July 31). When and How to Create Customer Journey Maps. Retrieved December 10, 2019, from https://www.nngroup.com/articles/customer-journey-mapping
  • Komninos, A. (2019, November). Customer Journey Maps - Walking a Mile in Your Customer’s Shoes. Retrieved December 10, 2019, from https://www.interaction-design.org/literature/article/customer-journey-maps-walking-a-mile-in-your-customer-s-shoes

E-commerce

  • Balke, M. (2017, November 26). AARRR Framework- Metrics That Let Your StartUp Sound Like A Pirate Ship. Retrieved December 7, 2019, from https://medium.com/@ms.mbalke/aarrr-framework-metrics-that-let-your-startup-sound-like-a-pirate-ship-e91d4082994b

Moodboards

  • 99designs. (n.d.). Your visual guide to design styles. Retrieved June 17 2020, from https://en.99designs.nl/designer-resource-center/visual-design-styles
  • Amrutiya, V. (2019, October 10). Moodboard for UI/UX Project. Retrieved January 5, 2020, from https://blog.yudiz.com/moodboard-for-ui-ux-project
  • Ascanio, P. (n.d.). A UX guide to designing better mood boards. Retrieved June 16, 2020, from https://uxdesign.cc/a-mood-board-strategy-for-cohesive-visual-design-5620dec3fed7
  • Gidalevitz, Y. (2016, July 18). Mood Boards In UX Design: Ignite Passion In Your Users. Retrieved January 5, 2020, from https://usabilitygeek.com/mood-boards-ux-design.
  • Hoffman Institute Foundation. (2013). Feelings List. Retrieved June 17 2020, from https://www.hoffmaninstitute.org/wp-content/uploads/Practices-FeelingsSensations.pdf
  • Infographic Design Team. (2019, February 18). A Comprehensive Guide To Graphic Design Styles. Retrieved June 17 2020, from https://www.infographicdesignteam.com/blog/guide-to-graphic-design-styles
  • Prior, E. (2020, May 11). Free printable PDF with list of feelings and emotions. Retrieved June 17 2020, from https://www.professional-counselling.com/list-of-human-emotions.html
  • Sharp, E. (2013, October 17). How a Web Design Mood Board impacts User Experience Design. Retrieved January 5, 2020, from https://www.protofuse.com/blog/details/how-web-design-mood-board-impacts-ux
  • UX Planet. (2017, September 11). Creating Better Moodboards for UX Projects. Retrieved January 5, 2020, from https://uxplanet.org/creating-better-moodboards-for-ux-projects-381d4d6daf70

Online surveys

  • Farrell, S. (2016, September 25). 28 Tips for Creating Great Qualitative Surveys. Retrieved December 4, 2019, from https://www.nngroup.com/articles/qualitative-surveys
  • Farrell, S. (2016, May 22). Open-Ended vs. Closed-Ended Questions in User Research. Retrieved December 4, 2019, from https://www.nngroup.com/articles/open-ended-questions

Project management methods

  • actiTime. (2019, December). Useful Project Management Tools and Techniques. Retrieved May 13, 2020, from https://www.actitime.com/project-management/project-management-tools-and-techniques
  • Do, D. (2017, August 5). The Five Principles of Lean. Retrieved 13 May, 2020, from https://theleanway.net/The-Five-Principles-of-Lean
  • Drumond, C. (n.d.). What is Scrum? Retrieved 13 May, 2020, from https://www.atlassian.com/agile/scrum
  • ILX Marketing Team. (2016, September 19). The 7 Principles, Themes and Processes of PRINCE2. Retrieved 13 May, 2020, from https://www.prince2.com/uk/blog/the-7-principles-themes-and-processes-of-prince2
  • Lucidchart Content Team. (n.d.). Tips and Tools for Visual Project Management. Retrieved 15 May, 2020, from https://www.lucidchart.com/blog/tips-and-tools-for-visual-project-management
  • Westland, J. (2017, August 24). Project Management Methodologies – An Overview. Retrieved May 13, 2020, from https://www.projectmanager.com/blog/project-management-methodology

Typography

  • Baker, J. (2016, February 25). Top 5 sources for open source fonts. Retrieved Februari 2, 2010, from https://opensource.com/life/16/2/top-sources-open-source-fonts
  • Bonneville, D. (2011, March 24). How To Choose A Font — A Step-By-Step Guide! Retrieved January 30, 2020, from https://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface

User interviews

  • Interaction Design Foundation. (2019). How to Conduct User Interviews. Retrieved December 2, 2019, from https://www.interaction-design.org/literature/article/how-to-conduct-user-interviews
  • Kroll, G. (2017, October 25). Questions Designers Should be Asking. Retrieved December 9, 2019, from https://uxdesign.cc/questions-ux-designers-should-be-asking-bc9a6ba87a34
  • Mears, C. (2013, August 15). User Interviews – The Beginner’s Guide. Retrieved December 9, 2019, from https://theuxreview.co.uk/user-interviews-the-beginners-guide
  • Pernice, K. (2018, Oktober 7). User Interviews: How, When, and Why to Conduct Them. Retrieved December 2, 2019, from https://www.nngroup.com/articles/user-interviews

User personas

  • Harley, A. (2015, February 16). Personas Make Users Memorable for Product Team Members. Retrieved December 10, 2019, from https://www.nngroup.com/articles/persona
  • Interaction Design Foundation. (n.d.). Personas. Retrieved December 10, 2019, from https://www.interaction-design.org/literature/topics/personas

User research

  • Raven L. (2019, July 10). How To Conduct User Experience Research Like A Professional. Retrieved December 4, 2019, from https://careerfoundry.com/en/blog/ux-design/how-to-conduct-user-experience-research-like-a-professional/#3-user-interviews
    ◦ CareerFoundry. (2019, March 21). What Is UX Research, And What's Its Purpose? Retrieved December 4, 2019, from https://www.youtube.com/watch?v=6ZvEIdDGy2Q
    ◦ CareerFoundry. (2019, March 28). The UX Research Methods Every Designer Needs To Know. Retrieved December 4, 2019, from https://www.youtube.com/watch?v=gGZGDnTY454
    ◦ CareerFoundry. (2019, April 18). How To Conduct User Interviews Like A Pro (UX Design). Retrieved December 4, 2019, from https://www.youtube.com/watch?v=5tVbFfGDQCk
    ◦ CareerFoundry. (2019, July 3). How To Conduct UX Research Analysis (UX Design Guide). Retrieved December 4, 2019, from https://www.youtube.com/watch?v=zGCRhd3r4fE

User stories

  • Bartlett, J. (2016, September 5, 2016). User Story vs Requirement – What’s The Difference? Retrieved November 30, 2019, from https://blog.testlodge.com/user-story-vs-requirements
  • Cohn, M. (2004, Oktober 8). Advantages of User Stories for Requirements. Retrieved November 30, 2019, from https://www.mountaingoatsoftware.com/articles/advantages-of-user-stories-for-requirements
  • Cohn, M. (2008, November 21). Non-functional Requirements as User Stories. Retrieved November 30, 2019, from https://www.mountaingoatsoftware.com/blog/non-functional-requirements-as-user-stories
  • Domingo, M. (2019, November 25). User Stories: As a [UX Designer] I want to [embrace Agile] so that [I can make my projects user-centered]. Retrieved November 30, 2019, from https://www.interaction-design.org/literature/article/user-stories-as-a-ux-designer-i-want-to-embrace-agile-so-that-i-can-make-my-projects-user-centered
  • Interaction Design Foundation. (2019, November). User Stories - Capturing the User’s Perspective Quickly and Simply. Retrieved November 30, 2019, from https://www.interaction-design.org/literature/topics/user-stories
  • Interaction Design Foundation. (2019, November). What are User Stories? Retrieved November 30, 2019, from https://www.interaction-design.org/literature/topics/user-stories
  • Mountain Goat Software. (n.d.). User Stories. Retrieved November 30, 2019, from https://www.mountaingoatsoftware.com/agile/user-stories

Wireframing

  • Civic, M. (2017, August 11). How to Start Designing for Web with This Easy Inkscape Insider. Retrieved January 13, 2020, from https://bamboolab.eu/blog/how-to-start-designing-for-web-with-this-easy-inkscape-insider
  • Corin Stig, D. (2019, March 22). Recommended Screen Resolution for Web Design. Retrieved January 16, 2020, from https://thewhitelabelagency.com/recommended-screen-resolution-for-web-design