With the new design of the project page and the dscout home, I tackled the design of adding collaborators to a project.

In the old version, adding collaborators wasn’t a clear experience. There was lots of fine print on the modal, and ultimately, it was hard to tell when you succesfully added people to your project.

Objective

  • Re-design the experience of adding collaborators to a project

Key results

  • The new experience is clear, fixing the complicated old experience
  • The new experience uses and benefits from our new design system

Before the engineering kick off meeting where we discuss how a feature is going to be built, I iterated on different designs during the design sprint.

The following are old versions which I iterated on through during the sprint.

The design below only has one main action button “Add to Project”. When a researcher adds a person to the project, they show up on the table on a green row, so it looks like they perhaps are already added. What happens if a researcher tries to exit and they have queued up people on the table? We couldn’t open a modal on top of this modal.

Adding project collaborators - Concept

The design below separates viewers from members. While this keeps the distinction between the two kinds of user types, it makes the experience confusing by having one input that adds people to two different tables. This also has the same problem from the design above, where a researcher can queue people and try to exit the modal.

Adding project collaborators - Concept

The design below has two different tabs depending on user type. This design carries the same problem of the design above, managing users in two different tables in one modal. Researchers would also have the problem of exiting the modal with people queued on the tables.

Adding project collaborators - Concept

Lastly, I tried a design more close to Google Docs. A researcher can include a note to who they are inviting and they can set the user’s permissions at the modal, and provide people a link to the project. Unfortunately, setting a user permission type only happens in the Account Management page, and we’re also not technologically ready for generating a project link that can be accessed by a member and a viewer. However, this design helped me think for the final iteration.

Adding project collaborators - Concept

For the final design, I was inspired by my last design iterations and Google’s method of sharing a file with collaborators.

A researcher can only exit the modal by clicking on “Done”. People are queued on the input instead of on the table, so its clear that they are not on the project yet. When there are people on the input a user can either “Add” them or Cancel, at which point the modal returns to the “Done” state.

Adding project collaborators
Adding project collaborators
Adding project collaborators
Adding project collaborators

Viewers and members are visibly different on the table and on the input.

Adding project collaborators

When people are succesfully added to the project, the researcher receives a notification, at which point the modal return to the “Done” state, with the table open to show the newly added collaborators.

Adding project collaborators

Below, I used our Pill React component on CodePen to generate the new different pill designs that we have throghout our platform.

See the Pen Pills by Jules (@jsimplicio) on CodePen.