Design Hub Idea (Fedora.next website redesign)


So a couple of weeks ago we talked about a proposal for the new Fedora website that Ryan Lerch, Matthew Miller, and myself came up with. The feedback we’ve gotten thus far has been overwhelmingly positive, so I’ve put some time into coming up with less vague and hand-wavy ideas as to what a particular sub hub on the Fedora ‘Community Hub’ might look like. Remember, this thing we talked about:
diagram_communityhub_subhubs
We’re talking about what one of those individual little hubs might look like. The theoretical examples above are very Fedora team-centric; I would like us to follow a model a little more flexible than that in the spirit of Reddit. E.g., it should be easy to break out a new subhub for a specific topic, or a cross-team collaboration / project, etc. So the sub-hubs won’t necessarily be along team lines.

A Sub-hub for the Design Team

sub
Okay, okay, not that kind of sub. (I have a sandwich graphic too, just waiting for its opportunity. 🙂 ) I understand pretty deeply how the Fedora design team works, the workflows and processes we’re involved with, so I figured it’d make the most sense to mock up a subhub for that team. The lovely Tatica volunteered to be the subject of this mockup. 🙂
This is going to be an obnoxiously big one. We’ll walk through it. Here goes:
design-hub-idea_notes

Alert Box

The first thing that should hit you is the purple alert box. (I think the color should probably be customizable from a pre-selected set of choices on a per-sub hub basis.) From looking around at various online communities and forums and chatting with folks, it seems a common meme for organizing online communities is having a set of guidelines for how the community is run. The idea with this box is that the community owners / mods can set the message, and it’ll be display to newcomers to the hub or to everybody (if it is ever updated.) It can be dismissed and won’t show up again unless the content is changed. It also links up to a fuller set of community rules and guidelines.

Moderator Box

This is kind of a meta help box. It’s in right sidebar, towards the top. It has a list of the group owners / mods; you can click on their names to get more info about them. It also has a link to the community rules & guidelines (helpful in case you closed out the alert box.) One idea we’ve been kicking around is letting people notify the mods of any issues from this widget; the tension there is making sure it doesn’t become a spam outlet.

Custom subhub banner

Following Reddit’s lead, there’s a space below the main navbar designated for the subhub’s branding. Some of the subreddit artwork I’ve seen isn’t the best quality though. We’ll probably offer a design team service to design the banners for different subhubs in the system. We can also provide a precanned set of nice backgrounds that teams can choose from. The way we’re thinking the banner will work is you can set a repeatable background tile, and then set a graphic that will be displayed left, center, or right.

User / profile config center

This isn’t mocked up yet; the vision there is that it would let you visit your profile page and would also provide a lot of the functionality you have in the FAS2 website today: change your password, change your ssh key, location, etc., as well as manage your group memberships.

Messaging center

This one is also not yet mocked up. It will likely be getting its own blog post soon. There’s a lot of different types of messages/notifications a user could get, so I think we need to sit down and catalogue the ones we know about before mocking anything up. I think it might also be cool to have a place to save/store stuff you like; like a favorites list you can refer back to later.

Nav bar

Okay, so here’s the idea with the navbar. It’s another Reddit-inspired thing. Users logging in for the first time with fresh FAS accounts by default will have a few select hubs in their navbar – perhaps ‘front,’ ‘planet,’ and ‘announce.’ (‘front’ could be maybe some kind of aggregation of the most popular content; planet would be a hub that basically repeats Fedora planet maybe, announce would basically mirror the Fedora project announce-list.)
Once a user joins different FAS groups – or if they are already a member of FAS groups – the hubs associated with the groups they are a member of could appear in their navbar. So here, you see Tatica has ‘designteam,’ ‘ambassadors,’ ‘marketing,’, and ‘LATAM’ subhubs in her navbar, as an example.
You can customize your nav bar by hitting the ‘edit’ button on the far right side of it. Maybe there could be a directory of subhubs across the system when you click on the ‘hubs’ logo in the upper right, and you can add them to your nav from their as well.

Subhub meta bar

This is the topmost widget in the right-hand sidebar. It gives you an idea of how many people are ‘members’ of the subhub (analogous to how many people are members of the FAS group it’s assocaited with,) and how many people follow the hub (‘subscribers.’) It also provides a mechanism for you to subscribe or unsubscribe from the hub.

Example Hyperkitty post

There’s an example post, ‘Fedora Design Github org,’ that I posted to the design-team mailing list a few days ago. This is mean to show how a post from Hyperkitty could appear in this system. The thought / hope is that we could use the Hyperkitty/Mailman API to send comments, or at the very least simply display them and link back out to Hyperkitty for replying and reading other posts.
Alternatively, we could just have a widget for the design-team mailing list, and not integrate posts into the news stream on the hub. We could instead show some of the Hyperkitty widgets currently displayed on list overviews, like the most active threads list or the most recent threads list. That’s another way to go. I’m not sure what’s best yet. Maybe we give subhub owners a choice, depending on how much they actively use the mailing list or not in their particular community.

Glitter Gallery post

We have another example post below the Hyperkitty one; this one is an example Glitter Gallery post. You can view the artwork and make comments on it, and the comments should get sent back to Glitter Gallery.

Example blog post

Further down the main news feed area we have a small snippet of a blog post to show how that would look in the subhub context. The idea here is that the design team has a subplanet on planet.fedoraproject.org associated with it – planet.fedoraproject.org/design – so those posts could show up in the chronological news stream as well.

Chat widget

Another idea in the right-hand sidebar – inspired by waartaa and ideally driven by it – a little chat client that connects to #fedora-design on freenode IRC, where the design team tends to hang out. I do not think the backlog should be blanked on every page load – I think there should always be at least a few hundred lines of backlog stored with the subhub so anybody coming in can follow the conversation from before they joined that they missed out on. It’ll let folks catch up and participate. 🙂

Nauncier widget

This is just a simple little widget to show that widgets don’t have to be complex – this one drives users who haven’t yet voted on the Fedora supplemental wallpapers to go and vote!

Ticket Widget

The design team has trac queue where we accept requests for artwork and design from across the project. It might be nice to inspire folks to help out with a ticket by having available tickets listed right there. It might be some good motivation too – if someone finishes a ticket or posts something to a ticket – that would be shown in the feed too. When you do good work and complete something, or submit something and are looking for feedback – you’d get more exposure by having that broadcast to the subhub news feed.

Some thoughts

Okay, so hopefully that little tour through the mockup made sense. What do you think?
Overall, I would like to point out that as with Hyperkitty, the design principle here is the same – we do not want to displace folks who are already happy with the tools they use and force them to log into this web system and use only that. If someone posts a reply to a mailing list post through this hubs system, the reply should get send back to the mailing list as a reply and should be perfectly readable by folks using only a mail client to receive postings by email. If someone sends a message in the chat, folks using a traditional IRC client in that channel should be able to see that message and communicate with the sender without issue. The hope here is to bring things together to make it easier and less intimidating for newcomers without sacrificing anything on the current contributors’ side.
I’d love to hear your thoughts in the comments!

17 Comments

  1. Eduard Gotwig says:

    WoW! I didnt knew the Fedora team had such great designers!
    I like your designs, please realize them ASAP :D!

  2. Just wow!
    Minor nitpick: if hubs are going to be shown in a navbar-like layout, perhaps “hubs” should be at the left (or right for RTL) of that navbar and not in the main header.

    1. mairin says:

      Well – I was thinking the hubs on the navbar-like bar are actually not hubs but the user’s hubs – does that make sense? But if you want to access all hubs – whether or not they are on your favorites list or whatever – then you’d click the main title ‘hubs’ logo. Does that make any more sense, or still problematic?

  3. […] you seen Máirín Duffy’s post on the Fedora Design team’s next-generation design for the Fedora Project website? It’s a brilliant design based around the idea of a “sub […]

  4. […] You (probably don’t, but) may remember an idea I posted about a while back when we were just starting to plan out how to reconfigure Fedora’s websites for Fedora.next. I called the idea “Fedora Hubs.” […]

  5. […] The dream is real – we are cranking away, actively building this very cool, open source, socially-oriented collaboration platform for Fedora. […]

  6. […] here is how everything was so well documented – not just the code, but I could also find blog posts and videos which helped me see the inspiration behind the project and put forth the points of […]

  7. […] here is how everything was so well documented – not just the code, but I could also find blog posts and videos which helped me see the inspiration behind the project and put forth the points of […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.