Mockup UI for Teams Index and Individual pages, Moderators

[LanesGood]

Building off the team stats in #198 and starting to think through the user stories for #460 I've created the mockups below.

Teams Index

First, for the Teams Index page I explored a few different options. The teams page should remain a member of the main navigation item list. Moderators should not have a role in the user avatar dropdown, as this doesn't correspond to the types of actions available for this dropdown. The Admin page should be reserved for app-wide settings/back end controls and changes, while Moderator privileges are more public-facing.

Teams Index page options:

• A0) Separate Tables for the teams a user moderates, belongs to, and total
• A1) One table with multiple tabs for these three options
• A2) One table, a column for role/participation in a team, auto-sorted by a member's role
• B) Separate tabs on the Teams page
• C) Separate pages for moderator controls vs. user-facing teams pages

Out of the options explored, I mocked up Options A0, A1, A2 after determining that B) is inconsistent with the rest of the application, and C) creates too many navigation pathways for moderators who wish to both look at team activity and moderator the team.

Mockups

A0 - Separate tables on a single page

A1 - Tabbed table (following app table tab styles)

A2 - Single table with sorted role column (User in this view is Bob Anderson)

My recommendation is view A0 - Separate Tables on Single Page. This allows users to quickly see all teams they are involved in, no matter their role, and also keeps the rest of the available teams in view. The Tabbed Table option keeps other teams hidden, while the single table will present challenges of finding an appropriate and obvious signifier or column for team participation and role.

Teams Page - Moderator View

The individual team page view will be updated for the Moderator. Moderators have an additional "Edit Team" button in the header, as well as promote/demote action buttons in the public-facing team member listing. Clicking "Edit Team" allows moderators to update the team hashtag and description, and add new members in addition to promote/demote current members. TBD on whether these actions should be permissible in the Teams API from downstream apps.

Team Page Moderator View

Edit Team Page

/cc @kamicut @guidorice @geohacker

[guidorice]

@LanesGood Looks great! A couple of ideas:

• Teams Index page options: If a moderator has ability to promote/demote other members, then one state of a team would be to have multiple moderators at one time. In the table view with Moderator heading, then the field could have a comma separated list of names of there is more than one moderator?

• Edit Team Page: If Moderator is the only role that exists, then this table view could simplified by combining Role and Action columns, the header becomes "Moderator", and the field contains a checkbox control for turning the role on and off?

[LanesGood]

@guidorice great suggestions.

• Team index page: yes, absolutely agree. I've replaced the image above with this update.
• Team edit page: I like your suggestion. My thought was that the member role table could be the same component for the team page and the edit page. The "Action" column with buttons would only be visible for moderators on the main team page, and of course the edit page would only be seen by moderators. Perhaps this is redundant? The idea was to save Mods a click by adding promote/demote actions to their initial team page view. Your suggestion could be used here as well; but I also think team members will appreciate seeing who is a mod in the team page view.

One other thought would be to add all editable fields to the moderator's team page view, thus removing the need for an "edit team" view. But, this doesn't follow the patterns we've used elsewhere in the app, and I think moderators would appreciate feeling like the team edit controls are "protected" in a reserved area.

[LanesGood]

Diagram of Teams Integration for Scoreboard via whiteboarding exercise with @kamicut. The green sections represent pages/actions possible via connecting the teams app, and/or being a moderator of a team.

[LanesGood]

@kamicut additional screens in progress here:

[LanesGood]

@kamicut new mockups for Create Team, Edit Team Details, Edit Team Members, and Edit Team Campaigns:

[LanesGood]

@guidorice The simplified mockup for the Team page, which contains only 2 tables: Team stats, which includes user country, and the campaigns assigned for that team.

Edit - updated mockup above 3/24/20

[guidorice]

Closing this issue because the Design mockup part of this is done.

Relates to #504 #548 #549 #503