⭕📑👥 Integration of Projects and Teams into Dashboard

[jancborchardt]

This is a follow-up of our original plan of the Dashboard as per #20930, especially the second mockup with the navigation.

Notes from the design meeting with @juliushaertl @Clementine46 @Nyco:

Tentative roadmap

Just so we do things step by step:

1. Ability to switch Projects as they are now, user-specific and not connected to other people.
2. Add collaborators / sharing / people to the Projects feature. Need to check on how the Circles move to core goes, ref Circles, contact groups and user groups #13478
3. Think about possible further development like templates, customization of what widgets show, etc.

Switching projects/teams

• Projects/Teams switcher somewhere on the top e.g. as "Teams & projects" button next to the weather indicator.
• The switcher could have an indicator like a red dot if there’s anything relevant for you in another project – just like Instagram and Twitter do when you have multiple accounts configured.
• Opens a modal or popover with list of teams & projects:
  • Teams subheading with + button
  • Design team
  • Engineering team
  • …

  • ---

  • Projects subheading with + button
  • Project X
  • Customer A
  • Customer B
  • …
• Teams/Projects should be sorted by relevance for you, e.g. recency of activity, and maybe we need some sort of "Favorite"/"Pinning" functionality.
• Each Team/Project could have a subline with info relevant to you, e.g.

  Design team
  3 mentions & 2 assigned tasks

Projects view of Dashboard

• The view specific to a Project or Team would also be focusing on what is relevant for you, e.g. @-mentions, events where you are invited, etc.
• The difference between the main Dashboard view and the Project/Team specific view would be:
  • Main heading text shows the team name instead of "Good morning, …"
  • The avatars of the collaborators also show in the header somewhere, e.g. below / next to the heading text, or in the same row as Status, Weather and Switcher?
  • The widgets are probably different (see below for the templates suggestion)
• The "Projects" feature could do both Projects and Teams like Basecamp (Basecamp has both Teams and Projects which are basically the same thing, but it helps to separate to give people an idea about what this grouping can be used for.)
• We could have templates or examples for widget sets for Teams/Projects. If some of these like integration with Twitter, Mastodon, Discourse etc. are not enabled yet, they could still be advertised there:
  • Standard: Recommended files, Talk mentions, Important mails, Upcoming events
  • Marketing team: Talk, Deck, Twitter, Social, Mastodon, Discourse, Recent statuses (of people in this team), …
  • Engineering team: GitHub, GitLab, Zammad, Recent statuses (of people in this team), …
  • …
• Already existing projects would simply show with the relevant widgets for whatever elements are connected into this project already, e.g. Files, Talk and Deck.
• If for example only 1 folder or 1 Talk conversation are connected to a project, the widget should directly show the contents of the folder and the messages of the conversation.

Access control

The biggest technical question is how we do access control.

• What happens if people are added to a project?
  • Do they get access to all the linked resources?
  • In the case of files, where do those show up – in their root folder?
• For each group created in user management, we could automatically create a Project/Team?
• Possibility of an admin/moderator system for projects? (Have to think if it’s needed, can still add later, like in Talk.)
• Would be useful to be able to add guests to projects/teams, e.g. external partners, community contributors, etc.

Additional considerations from our meeting

• Feedback of which elements were added in the linking modal
• Make sure link function of each type (file, conversation, etc) has a create function
• 3-dot menu to link elements into "Customize" modal?
• Files widget: needs more thinking about the flow of what happens when pressing the "+" button
  • Show a modal to pick a file to link from the cloud
  • "+" button inside the modal gives the ability to upload from device as well
  • Too confusing as we are mixing 2 things?
• Talk widget:
  • I the case of 1 conversation, there would be a direct input field. Do we have a + button there?
  • In the case of multiple conversation
• For Calendar e.g. there’s no confusion
• Consideration about the wording of the Dashboard context switcher – which naming is appropriate to communicate that there’s both teams/projects in there as well as the ability to go back to your personal Dashboard.
  • Possibly different naming of the button when you are in a team or project: not "Teams & projects" but "Personal, teams & projects"
  • Back button? Would be a bit confusing possibly as it’s not really subcategories

[sunjam]

Could be worth involving the new Collectives app, which is an extension of Circles.
Documentation for users, admins, and developers
Here is their Gitlab repo
Here is a request for developing a Collectives Dashboard widget

    Collective and non-hierarchical workflow by heart: Collectives are tied to a Nextcloud Circle and owned by the collective.
    Collaborative page editing like known from Etherpad thanks to the Text app
    Well-known Markdown syntax for page formatting

[Spartachetto]

I find the proposal really intriguing.

Some additional suggestions up to your evaluation:

1. Graph with Timeline of the single project
   (Have a look here for reference about interactive graph of timelines). It could show the events of the project. Ideally I would include everything (file added, changed, calendar item, deck deadline, ...) with the possibility for the user of selecting only one thing (files, calendar items, ....)

2. Overall Graph with Timeline of all the projects
   graph with much less details just to show which are the most active projects in different periods

3. Use of tags
   This is more complex and probably long term. A similar target display in the dashboard but linked to the selection of one or more tags. Probably useful for an activity less rigidly defined; I mean: it is not a clear project but something less strictly defined

[Clementine46]

Dashboard mockups

Dashboard homepage

A "Teams&Projects" switcher button is added. Once clicked it shows a drop-down menu so the user can access all the current teams and projects dashboards.
The "customize" button is moved to the right-hand corner for more visibility, similar to a parameters button.

Teams

The "Teams" page shows all of the teams the user belongs to. The overview shows the title and the users pictures.
A big "+" button allows the user to create a new team easily.

Creating a new team

The creation of a team starts by choosing a name and looking for users.

The user adds members to the team and gets feedback.

After that, the user has access to a modal to add different types of files to his team.

The user can add one item in each category and comes back to the main modal.

A feedback appears for each element that's been added. Once ready, the user can finish by clicking on "create".

New team created

The user is then directly taken to his new team's page. The team members show on the right of the title (there should be a limit of possible pictures, if the number is above that, the last picture shows how many members are left).

The user can keep on adding items by using the "customize" buttons and add widgets.

Each widget gives the option to add/create new content thanks to the "+" button on the top right corner.

Here is the complete dashboard for the user's Marketing team.

The user can go to any other page using the "Teams&Projects" switcher.

Some issues pointed out by Jan are still unresolved but any feedback is appreciated :)

[Clementine46]

Here is an interactive version of the mockups :
https://marvelapp.com/prototype/237i8946/section/1142750

Not everything is clickable, only the main user flow which is as follow :

Going to the Team page > Create a new team > Add an events and twitter widget > Add some files > Go back to the Team page

(If you do not know where to click, click anywhere on the page and a blue highlight will show you where to click).