coralproject/design

Design process and assets for The Coral Project

design's Issues

Updates to the Trust Demo

Here are some of my ideas for improvements to the Trust demo:

• Each of the pages should have a small explanation about what is possible on that page.
• I think the option to Create a Group should exist on the Groups List page.
  -- What about launching a modal when creating a group to ask a user to fill out Group Name, Description, etc. and THEN redirecting the user to the filters page?
• Cards on the Groups List page should be movable so that editors can rearrange their groups in the order they want.
• Offering the users the option of a Cards vs. a List View in the Groups page would also create more flexibility for user preferences.
• The Group List page should have filter options: A to Z, Z to A, date created, date modified, etc.
• The Group Creator page should indicate how many Filters are possible in addition to how many Users correspond to the filters.
• The Group Creator page might also benefit from the option of a List view vs. cards view of users.
• Is there a way to indicate which filters are applied on a group after it's saved without the left panel? I can't help but think that's a lot of valuable real estate a user might not need once their group is created. Perhaps we apply tags and filters to the page's top? With the option to always edit them?
• I think the Users should have light horizontal lines separating them.
• We definitely should downplay the photo on the user view.
• There needs to be a way to remove tags on a user view.
• Once a group is created, group name, description, etc. are all editable so we will need a way to make this clear without weighing down the page with symbols or words.

As a general sidenote, we will need a Style Guide for things like hover states, active states, inactive states, color, typography etc.

Design welcome screen for beta application

Moved (and closed) from Reef Repo Issue coralproject/reef#21

Our Trust beta demo release will require login. The login screen is our best opportunity to provide some welcoming text, messaging and expectation setting.

A few thoughts on what could go here:

A very warm and welcoming graphic/text message
Who to reach out to in order to request an invite
A note saying that this product is still in the early stages of beta, which means things may go wrong, but, more importantly, we're looking for your input to improve it.
Feedback instructions (we can also put this on every page of the demo)
    Email here if you have problems / suggestions
    Join the conversation here
A giant thanks!

And of course the login box floating friendly-like to the side.

Update User Details designs

• De-emphasize photo (or remove completely if we don't have one. We only expect a tiny fraction of our users to have photos.
• Add Notes interface (allow a mod to create a new text note on a User and see the list of notes that were created in the past.)
• Consider ditching the tab design for a more vertical layout

Update User list designs

Add the following features to the User List box:

• a sort feature that allows sorting by the filters that make up the query that produce the list (for the design, use: "# of Comments", "% ModeratorDeleted" and "Reply Ratio")
• pagination
• total number of users

Note that updates to the User Card that makes up the User List box are described in #4

Update User Group List screen

On the page

• Add a Create New Group button
• Add a brief description of what User Groups are

In the individual cards:

• Add counts to user groups
• Make nice looking buttons for View Group and Edit Group

Update User Card design

Update the User Card to:

• Show stats from the filtered query (for the design, use: "# of Comments", "% ModeratorDeleted" and "Reply Ratio")
• If this view is filtered by a dimension (aka, Editorial section), we want to show the numbers from within that dimension and the total. For example, a user with 4 comments in editorial and 42 overall could read: "# of Comments 4 (42)"
• Show the tags that the user has (possibly with colors or other easily scannable way?)
• Small, visually impactful, visualization to replace the circle with the letter

Note: User Cards are shown in the User List component #3

Userflows

When using Trust, here are a few examples of user wants/needs which I will be using to elaborate what a user will see and when. The names following each task correspond to our primary personas.

• A journalist who would just like to see commenters on a particular article
  --- Every time they arrive on the site, they would just like to track their latest comments on their most recently published article. This is one place where searching for one URL in particular is relevant. (Sidney)
• An editor who would like to create groups of different sections specifically so they can see a high-level view of commenters across the site (Mark)
• A moderator who would like to group their best commenters across multiple articles and verticals (Margaret)
• A moderator who would like to group the worst of the worst trolls across multiple articles and verticals (Dev)

Update Group Creator screen

• Add the ability to save a description