Reviewing new Global section before we begin the build

  1. The ones you’ve created, yes. Tag-page means boxes then discussion. The stats would be moved to its own page. Colour… not sure, I guess light grey is safe and easy.

  2. No, tasks is important. It means that there is a stats tab in the footer, but that one or two key stats would also be subtly on the tag-page (home page for that tag).

  3. I’m not sure. I’ll set up one on our site and send over a screen shot

  4. Perfect… well, a little more :star2: like :yum:

It is going to be hard to add the discussion threads for each one because I won’t be able to fit every line. Is having two lines ok for the discussion threads? Page 3 Part 1 shows what my current edit looks like. Or i might just take a screenshot and just make it look like Page 3 Part 2.

1 Like

Discussion threads instead of stats. Stats is its own tab, although I think placing a single line somewhere with one or two key stats would be good.

1 Like

@aeglobal can you please change the Mission Statement on the homepage to:

The Public Happiness Movement

to bring more kindness, peace and well-being to the world

@MarinaOhNo
We need a Ruby-on-Rails developer who is going to be modifying existing Open-Source Discourse plugins and creating a new Discourse theme from them.

Mission statement has been changed to the one you have requested.

2 Likes

Updated Build Brief

New Theme:

Discourse for Fluid Community Driven Project Management, Utilising Tag-Pages for Navigation and Structure

Overview of Work Needed:

  • Two existing opensource Discourse Plugins modified to work with Tag-pages.
  1. Tag Banner Title
  2. Events Plugin
  • One page (stats) modified to allow filter by Tag. It currently only works by Category.

We’ve already succeeded modifying Discourse Kanban boards to work with tag-pages and the code can be used as a base.

  • Debug plugins used so they work with each other (conflict resolution)

  • A new ‘Tag Navigation’ plugin created which puts tag pages at the center of the user experience. It can be based on the code in this excellent discourse Popular Tag Sidebar

  • A modified version of the normal pages created as a splash landing page (the options in the floating footer will be different, and some of the navigation boxes will be external links. Styling will be the same so its a quick task. either a static page, or a conditional rule to slightly change the 1st page)

  • A floating footer created or modified from this code. The footer buttons simply append the current url the user is on, like, x.com/thispage to x.com/thispage/calendar.

  • Two existing stats pulled into each page. They are available via Discourses API.

  • We also want an improved user homepage, but expect this will be a large task and is likely to built later on.

UX Wireframe Mockup
note: the ‘stats’ is incorrect here and needs updated.

What?

Creation of a powerful new theme which utilises Tag-Pages and existing theme-components to deliver a highly flexible and user adaptive environment for community growth.

Users can be guided down desired routes, but also where users have unprecedented flexibility to adapt and evolve their own environment. Including a floating nav bar with popular team management tools means a user can create a new tag and instantly have access to a powerful workspace with its own kanban board, calendar, stats, and voting area.

Why Drop Categories?

Categories are limited in depth and not suitable for a user led evolving environment. We could keep them and have the tag-plugin only function on the bottom layer of a category, but its probably easier to just switch entirely.

How The Theme Works and New Components needed

  1. Tag-page Navigation Boxes
    The Tag Pages Theme creates boxes just like category boxes, for an admin defined number of the most commonly used tags in each Tag-Page. Admins can exclude tags from appearing in this component either sitewide, or in relation to each tag-page in the admin section to create a defined path to guide new users and customise where needed.
    (for example ‘to-do’ is a functional tag for the Kanban plugin and would be excluded sitewide

  2. Other tags
    Underneath navigation boxes is a bar with links to the next most common tags for quick navigation. This bar is side scrolling and users can swipe to see more tags on each-tag page. It also adheres to the exclusion rules defined for the navigation boxes.

  3. Floating Footer
    To create the evolving and flowing workspace it will include a floating footer which navigates between popular project discourse management plugins/components by adding text to the url for each tag page.

for example:

Tag-Page: tags/reactjs
click ‘Board’
url appends to: /tags/reactjs/l/latest?board=default
Now the user is viewing the Kanban board and tasks to be done related to that Tag-Page.

The same appending url navigation will work for the calendar plugin. For the voting it will combine tags using the ‘Intersection’ feature.

an example of displaying multiple tags:

/tags/intersection/reactjs/vote

Dependency Plugins and Structure

Banner


Tag Banner Title
Tag Banners - theme-component - Discourse Meta

Search bar
Search Banner - theme-component - Discourse Meta

Tag description (if provided) also to add (‘pin’) important links
this functionality is in the category banner, but not the tag banner
Category Banners - theme-component - Discourse Meta

Main Page


Tag-page Navigation Boxes

[most common tag 1] [tag 2] [tag 3] [tag 4] [tag 5]

Other Related Tags Slider
Discourse Popular Tag Sidebar

Discourse posts

Floating Footer


5 theme component pages which link to the tag pages so users can switch between actions on the visible page

[Tag-Page] [Vote] [Stats] [Tasks] [Calendar]

  • Discuss: Standard Discourse threads
  • Tasks: Discourse Kanban for this tag page
  • Calendar: Events Plugin for this tag page
  • Vote: Discourse Voting Voting is enabled on all threads marked with the ‘vote’ tag, enabling governance and decision making to operate on any tag or intersection of tags sitewide.
  • Stats: A modification of the Discourse Meta page, to add Tags as a filter and open the tag currently being viewed by the user

Major advantages to utilising Tag Pages to navigate:

  • New users can be guided along a set path, while including the search bar for those who already know what they are looking for to skip directly to there.
  • Users can easily create their own tags making the platform highly adaptive and user-led
  • There is no depth limit. If Bob wants to make a ‘Bob’s Crazy Friday Group’, he can easily. If
  • Users also have the god-tier ability to combine tags, and the tools in the footer bar still work perfectly. Creating incredibly powerful methods for cross-team collaboration, simply by adding a tag in a post to drop it into their work flow and call attention to it

Recapping whats needed to create the theme

  1. Creation of Tag-Page boxes in the style of category boxes
  2. All dependency plugins working seamlessly together
  3. Tag-page support added to Voting and Calendar components/plugins
  4. Creation of a Floating Footer with Nav Links
  5. Text description added to Tag-Banners component
  6. Search component works with/embeds inside Tag-Banners
  7. Tag filters added to the existing Stats Page
  8. Improve kanban boards functionality
  9. Search bar works with tag page intersections

I will be fixing stats to the discussion now that I have finished my grad dissertation and other things. Also, @Rachel_Carton brought up some good points when she reviewed the prototype screens, especially the part about some of the title names in the filter section. Rachel’s idea was to change a few of the terms to be more recognizable to users, which I agree with her comment for the “Local” page. Also, she did mention the information architecture for page 1 part 2. I think the team should look into that.

I will also draw up a few sketches to show a few of my ideas for the ‘weekly activity 230 (+21)’ for the Tag-Pages.

3 Likes

Any updates @aeglobal?

I added image icons to represent where the logo will be in the prototype. I also made the changes for the two names in the “Local” section. The sketches will be added within the next few days. I found a few design inspirations. However, I haven’t done any sketching yet.

1 Like

Nice. Can I request a small change. Just changing the Summit box on the homepage and putting ‘Happiness Hub’ instead.

Both are cool projects, I think the hub is more likely to be running 1st now.

Oh, and I had an idea that we should add a simple ‘more’ link/button under the 4 main boxes on each page. That way users can explore all the tags, but the main 4 are highlighted

I’ll make the requested changes. I’ll have it done by tomorrow.

I have attached one page with four different visual options. The sketches are mostly data visualization based.

the circles look far smoother, although the up and down arrows suggest a sense of competition/achievement.

i think both are great features …what about circles with an up and down green or red triangle in their upper right or left corner to show growth/decline vs last week/month/year

Is the button supposed to be below the information about Public Happiness Movement?

1 Like

‘More’ is correct. I think we missed each other on Happiness Hub. I meant to replace the #Summit box with a #Happiness-Hub box. Not to replace the search bar with it.

Ah, okay. My bad. I’m editing the prototype now.

Fixed.

1 Like

thats it. oh, and you were right not to add the search bar. my mistake it doesnt show on the 1st page

So, it is ok if I leave it like that? I’m going to be experimenting with the circle visualization and the up and down triangles. I’m going to have one with all the same colors and one with different colors for the four items.

1 Like

i suspect different will look much better, especially if we match it with the colours of the tag-banners. sure check both out though :slight_smile:

1 Like

I’m going to try to finish the different sphere colors by this weekend. The one I previewed I had to make up some numbers in order to make the sizes like that. I’m going to try another program that won’t have the x and y axis. I will work on the smaller number colors for negative and positive.

1 Like