WordPress.org

Making WordPress.org

Opened 5 months ago

Last modified 19 hours ago

#3046 assigned task

WordPress.org/about page outdated

Reported by: melchoyce Owned by: mapk
Milestone: Priority: high
Component: General Keywords: neso ui-feedback ux-feedback
Cc:

Description

The contributors in the sidebar of https://wordpress.org/about/ are outdated. The sidebar should be updated to reflect the current leadership team.

Change History (33)

#1 @karmatosed
5 months ago

+1 to this.

#2 in reply to: ↑ description @chanthaboune
6 weeks ago

The content on that page in general could use an update. Also some more modern styling of that page overall couldn't hurt.

#3 @chanthaboune
6 weeks ago

  • Owner set to mapk
  • Status changed from new to assigned

#4 @obenland
4 weeks ago

  • Keywords neso added
  • Priority changed from normal to high

If those new sites were added to the wporg-main theme first, it would make it easier to share them with Rosetta sites later (in case we decide to do that). It also wouldn't be terribly hard to convert those page templates into static files if needed.

This ticket was mentioned in Slack in #meta by obenland. View the logs.


10 days ago

#6 @mapk
10 days ago

  • Keywords ui-feedback ux-feedback added

I've put together some thoughts and design work to run by everyone.

Information Architecture & Content

I wanted to organize the content in the whole About section, but that might be further out. So for now I envisioned the About page as a way to talk about both the technology AND the community. These two are what makes up the whole of WordPress. I propose 3 sections: Our Mission, Our Story, the Bill of Rights.

This page is geared to engage new people learning about WordPress, and strengthen the purpose of WordPress for those already active in the community. By splitting into two sections of Technology & Community, I hope to guide people into their sections of interest.

Our Mission - Talks about Democratizing Publishing.
Our Story - Talks about how we got here.
Bill of Rights - Talks about the 4 freedoms.

The two cards in the Our Mission section (ie. Technology & Community) will guide readers to:

  • Technology -> Downloads page
  • Community -> Get Involved page

Feedback

  1. Are these the right pieces of content to show on the About landingpage?
  2. I need help with the wording of "Technology" & "Community." I think "Community" works well, but I'm struggling with the correct wording for the software.

Wireframes

Mobile view
https://cldup.com/8baKUmoNgI.png
Desktop view
https://cldup.com/7qNc8xtpR1.png

#7 follow-up: @mapk
10 days ago

Moving forward into mockups.

Design thoughts

I wanted to stay inline with the current redesign efforts and styles, but I also want to introduce something a bit brighter to engage people emotionally. The content does much of that, but I've attempted to try some color variations and animations as well.

Colors

We have a base set of colors listed here: https://make.wordpress.org/design/handbook/design-guide/foundations/colors/

I thought about creating analogous colors off of each of the base colors for some brighter variety. These don't all have to be used, but I wanted to experiment here and see where it lead me.

https://cldup.com/50YGh10xlE.png

Mockups

The mockups incorporate the analogous colors, add some geometric shapes, and play with animations. The shapes, in a way, was an effort for me to show two things (technology & community) overlapping, or integrating, to create one common thing. It's represented in the color and shapes.

  1. The header uses the lighter blue in our base color set, but adds some angles as well.
  2. The header also includes some text as a nod to the freedoms.
  3. Our Mission is a compilation of existing text and some new wording.
  4. The two skewed rectangles link off to their respective pages as mentioned in my earlier comment.
  5. Our Story includes both existing text and new text sharing some of the history.
  6. The screenshots of the Editor and the dial on the right side are animated on scroll. As the reader scrolls down the dial turns from 2003 to 2018. Each time the dial hits a new year, the screenshot of the Editor changes to show that year's editor. I think it's a fun way to show the history of WordPress and how far we've come. The last screenshot flip ends with Gutenberg in 2018.
  7. Finally the Bill of Rights, which I believe is hugely important, is displayed on the page in a way that is dynamic and interactive. On click of one of the freedoms, I was thinking, would then expand to show more links to pages that either talk about that, or something. It's an interactive tree on desktop, but static in mobile.

Mobile mockup
https://cldup.com/tjc179ces8.png

Desktop with 2003 dial
https://cldup.com/5nSUomW-sf.png

Desktop with 2018 dial
https://cldup.com/tzFpNCosDs.png

Feedback

  1. How do you feel about the colors and shapes?
  2. Do you have any edits for the content? Does the tone and voice feel right?
  3. Is anything missing that you think should be included on the About landingpage?

#8 follow-up: @obenland
10 days ago

I like the shapes and most of the colors, though I think I'd prefer the header blue to be the same color as the rest of the page we redid recently, for consistency. Happy to experiment with shapes and a second color though.

I really like the idea of a dial, though we should make sure to have relevant screenshots for each year. We also need to keep in mind that that will be something that will need to be updated and maintained.

Would he hijack scroll to move the dial only when hovering over the dial, or similar to a parallax effect when scrolling the page?

What will The Technology and The Community pages look like?

#9 follow-up: @karmatosed
10 days ago

First up, exciting to see this take shape.

I have a few thoughts on seeing this basing around the feedback you ask for:

  • Colors: I'd be a little careful about how analogous we go as it can cause visual issues with a lot of people. I am sure we can balance.
  • I think that light blue on header needs to go back a little to be readable, right now unless you have amazing vision that's a little light against the text.
  • I'd note the same point above on 'community' and the green. We can be bright and legible.
  • Do you have an example of that dial working somewhere? In seeing it on a flat mockup I am having some negative experience reactions. I would like to judge as close to an example as possible to be fair to it as a concept.
  • I feel as the design goes towards the bottom the potency of it fades. Maybe revisit the freedoms section?
  • Please can we not hijack any scrolling ever, even on dials. That's not a great experience for anyone. I am sure we can do better.

#10 in reply to: ↑ 9 @mapk
10 days ago

Thanks for this feedback!

Replying to karmatosed:

  • Colors: I'd be a little careful about how analogous we go as it can cause visual issues with a lot of people. I am sure we can balance.

I'd love to balance this more... any help is appreciated.

  • I think that light blue on header needs to go back a little to be readable, right now unless you have amazing vision that's a little light against the text.

I totally agree. A11y needs to be adhered to. I need to double check the color contrast here.

  • Do you have an example of that dial working somewhere? In seeing it on a flat mockup I am having some negative experience reactions. I would like to judge as close to an example as possible to be fair to it as a concept.

I don't have a prototype yet. I can try to get one soon.

  • I feel as the design goes towards the bottom the potency of it fades. Maybe revisit the freedoms section?

I've tried several variations of the freedoms section. I can post those for comparisons.

  • Please can we not hijack any scrolling ever, even on dials. That's not a great experience for anyone. I am sure we can do better.

I'm totally against scrolljacking. My proposed animation doesn't hijack any scrolling at all. We're safe there. Again, I can probably get a prototype up in the near future.

#11 follow-ups: @melchoyce
10 days ago

Super fun. Excited to see where this goes.

The shapes are an interesting evolution on the brand, though a bit trendy at the moment. My only concern is it might look a little dated in a year.

FYI, have you seen the Accent Hues at the bottom of https://codepen.io/hugobaeta/full/RNOzoV/? They're also pretty bright, and work well with the blues. I think we should stick with those rather than making new colors, if we can.

#12 @karmatosed
10 days ago

I'm totally against scrolljacking. My proposed animation doesn't hijack any scrolling at all. We're safe there. Again, I can probably get a prototype up in the near future.

Good to hear. Maybe over a prototype do you know of anything similar like in a CodePen or another design?

I've tried several variations of the freedoms section. I can post those for comparisons.

Yes, I would love to see those. There is a loss of the pace as it gets to that point.

#13 @karmatosed
10 days ago

FYI, have you seen the Accent Hues at the bottom of https://codepen.io/hugobaeta/full/RNOzoV/? They're also pretty bright, and work well with the blues. I think we should stick with those rather than making new colors, if we can.

I would +1 this as source of colors.

#14 in reply to: ↑ 11 @mapk
10 days ago

Thanks Mel!

Replying to melchoyce:

The shapes are an interesting evolution on the brand, though a bit trendy at the moment. My only concern is it might look a little dated in a year.

This is a good point. I thought about it as well and took a stab anyways. I figure anything that pushes the envelope or makes a hard design stand has more tendencies to become dated quicker. I could return to something less so?

FYI, have you seen the Accent Hues at the bottom of https://codepen.io/hugobaeta/full/RNOzoV/? They're also pretty bright, and work well with the blues. I think we should stick with those rather than making new colors, if we can.

I'll double check those colors. If we can find something bright in that palette, I'm all for it. And sticking with something pre-existing is a plus.

#15 follow-up: @joyously
10 days ago

When I was reading your description of the animation and shapes overlapping, my mind saw them as the parts of the W in the logo. If they actually move to come together to form the W, that would look cool. As I read further, I thought the "technology" part could be the W and the "community" part is the circle around it, forming the logo.

#16 in reply to: ↑ 7 ; follow-up: @chanthaboune
10 days ago

Replying to mapk:

  1. Do you have any edits for the content? Does the tone and voice feel right?

I would like to take a second look at the copy for clarity, tone, and content.

  1. Is anything missing that you think should be included on the About landing page?

I think there might be a thought or two from the current page that would be good to include. A big question that I have is about where the current subnav will go.

#17 in reply to: ↑ 16 ; follow-up: @mapk
10 days ago

Replying to chanthaboune:

Replying to mapk:

  1. Do you have any edits for the content? Does the tone and voice feel right?

I would like to take a second look at the copy for clarity, tone, and content.

Excellent, thanks!

  1. Is anything missing that you think should be included on the About landing page?

I think there might be a thought or two from the current page that would be good to include. A big question that I have is about where the current subnav will go.

Great question. Yes, this page was intended to be a landingpage that guided the reader into either the technology or the community side of things, in which case those sub-pages would have the smaller header and a subnav. If this isn't the case anymore, some thought should be done around which 'about' pages we can eliminate and which ones can be combined to help make the subnav more manageable. I'm happy to create a navigation system for this page to the others if needed.

#18 in reply to: ↑ 15 @mapk
10 days ago

Replying to joyously:

When I was reading your description of the animation and shapes overlapping, my mind saw them as the parts of the W in the logo. If they actually move to come together to form the W, that would look cool. As I read further, I thought the "technology" part could be the W and the "community" part is the circle around it, forming the logo.

Very creative! In the mockup the shapes are containers for content, so I'm not sure how that would ultimately work with the 'W', but the concept is interesting!

#19 in reply to: ↑ 17 ; follow-up: @melchoyce
10 days ago

Replying to mapk:

Replying to chanthaboune:

Replying to mapk:

  1. Is anything missing that you think should be included on the About landing page?

I think there might be a thought or two from the current page that would be good to include. A big question that I have is about where the current subnav will go.

Great question. Yes, this page was intended to be a landingpage that guided the reader into either the technology or the community side of things, in which case those sub-pages would have the smaller header and a subnav. If this isn't the case anymore, some thought should be done around which 'about' pages we can eliminate and which ones can be combined to help make the subnav more manageable. I'm happy to create a navigation system for this page to the others if needed.

I agree that it looks like most of the pages can be split up into either Community or Technology — and additionally, this also seems like an opportune time to audit all the "About" content. It would be great if we can pull in some copywriters to help out with rewriting, reorganizing, and adding anything new.

#20 in reply to: ↑ 19 @chanthaboune
9 days ago

I agree about a content audit in general (I think Mark did a high level one), but I think our current step is getting the About page to look a bit fresher.

Replying to melchoyce:

Replying to mapk:

Replying to chanthaboune:

Replying to mapk:

  1. Is anything missing that you think should be included on the About landing page?

I think there might be a thought or two from the current page that would be good to include. A big question that I have is about where the current subnav will go.

Great question. Yes, this page was intended to be a landingpage that guided the reader into either the technology or the community side of things, in which case those sub-pages would have the smaller header and a subnav. If this isn't the case anymore, some thought should be done around which 'about' pages we can eliminate and which ones can be combined to help make the subnav more manageable. I'm happy to create a navigation system for this page to the others if needed.

I agree that it looks like most of the pages can be split up into either Community or Technology — and additionally, this also seems like an opportune time to audit all the "About" content. It would be great if we can pull in some copywriters to help out with rewriting, reorganizing, and adding anything new.

#21 @mizejewski
8 days ago

I really like the architecture @mapk with Mission, Story, etc. presented in a clear and appealing way and everything else falling under the pillars of Technology or Community.

Those headings might benefit by losing the article "the" which feels repetitive and unnecessary.
The Technology: Learn about the software
The Community: Learn about the people

I also really like the use of angles in the mockup header design.

This ticket was mentioned in Slack in #design by mapk. View the logs.


8 days ago

#23 in reply to: ↑ 8 ; follow-up: @mapk
8 days ago

Replying to obenland:

I like the shapes and most of the colors, though I think I'd prefer the header blue to be the same color as the rest of the page we redid recently, for consistency. Happy to experiment with shapes and a second color though.

It looks like this might happen since a11y isn't working here.

I really like the idea of a dial, though we should make sure to have relevant screenshots for each year. We also need to keep in mind that that will be something that will need to be updated and maintained.

Great point. I'd be happy to stay on top of this.

Would he hijack scroll to move the dial only when hovering over the dial, or similar to a parallax effect when scrolling the page?

No scroll jacking. I was trying to think this through as well. Do we first change the dial with the user's page scroll, but if the user clicks on the dial, they can override that and just change the dial as they please? Once they do this, there's no more scrolling with the page scroll until the page is reloaded. Yes? No?

What will The Technology and The Community pages look like?

As of right now, these will just by linking to existing pages.

Tech --> Downloads page
Community --> Get Involved

If we're not doing a lot with the subpages of this section, I need to figure out a way to get to those pages now. This will take more time.

#24 in reply to: ↑ 23 ; follow-up: @chanthaboune
4 days ago

Replying to mapk:

If we're not doing a lot with the subpages of this section, I need to figure out a way to get to those pages now. This will take more time.

@mapk Is this a blocker for starting work on the page as it stands?

#25 in reply to: ↑ 24 @mapk
4 days ago

Replying to chanthaboune:

Replying to mapk:

If we're not doing a lot with the subpages of this section, I need to figure out a way to get to those pages now. This will take more time.

@mapk Is this a blocker for starting work on the page as it stands?

Yes. I haven't explored an alternate option to solve this problem, and the solution may change a portion of the page layout.

This ticket was mentioned in Slack in #meta by netweb. View the logs.


45 hours ago

#27 in reply to: ↑ 11 @mapk
21 hours ago

Replying to melchoyce:

FYI, have you seen the Accent Hues at the bottom of https://codepen.io/hugobaeta/full/RNOzoV/? They're also pretty bright, and work well with the blues. I think we should stick with those rather than making new colors, if we can.

I explored some options from Hugo's color palette for wporg.

I first tried some darker blues and greens that are still a11y with white text. Using those colors, this was the closest I could get and still adhere to a11y color contrast guidelines.

https://cldup.com/gd4q6wMGLp.png

I wasn't too happy with those colors, so I explored some lighter colors.

https://cldup.com/EM_q7HBvUE.png

There's a definite lack of electricity or vibrancy here, but if we're sticking with these colors, I prefer the lighter palette in these instances.

Any other thoughts?

Last edited 21 hours ago by mapk (previous) (diff)

#28 follow-up: @obenland
20 hours ago

As much as I like order and adhering to rules, I think one should also know when to break them. I don't know how your original colors hold up against the darker blue of the header, but if that harmonizes I personally think it would be okay to think of these parallelograms as unique design elements and give them a unique color.

#29 in reply to: ↑ 28 @mapk
20 hours ago

Replying to obenland:

As much as I like order and adhering to rules, I think one should also know when to break them. I don't know how your original colors hold up against the darker blue of the header, but if that harmonizes I personally think it would be okay to think of these parallelograms as unique design elements and give them a unique color.

Here's an example of how that would look.

https://cldup.com/sP7Xi77J7p.png

Unfortunately, the green here fails a11y. I need to revise that color.

#30 @obenland
20 hours ago

With the header, maybe the lighter color palette might work? Is the contrast big enough on that?

#31 follow-up: @melchoyce
19 hours ago

@mapk Would you mind if I tried out some color combos?

#32 in reply to: ↑ 31 ; follow-up: @mapk
19 hours ago

Replying to melchoyce:

@mapk Would you mind if I tried out some color combos?

I would love some help! Thanks.

#33 in reply to: ↑ 32 @melchoyce
19 hours ago

Replying to mapk:

Replying to melchoyce:

@mapk Would you mind if I tried out some color combos?

I would love some help! Thanks.

🙌

Can I grab your source file or codepen?

Note: See TracTickets for help on using tickets.