Redesigning the Official Node.js Website

[bnb]

Something the Website WG has discussed for quite a while now is the need for a redesign (ref: #1375, #1338, #1075, #1074, #508, and many others).

@hackygolucky and myself had a discussion with @leo a while back to try to understand the state of the former redesign (living at https://github.com/nodejs/nodejs.org-new) and came to the understanding that we need to have the discussions around a redesign and rework this in the open, rather than in private - the goal being to enable everyone to participate and engage in the work and discussion around the direction of the website.

So, I'd like to kick that discussion off.

There are many issues, both minor and major, with the current website. It's functional for downloads and docs, but we can do better. I'd like to propose that we don't rush this, as we don't just need a redesign - we need a restructuring.

Here's my proposal for how we move forward:

• Site Structure
  • Assess current site structure, see what's needed and what's not.
  • Call for feedback on what the current site is missing in terms of content.
  • Propose a suggested site structure that we can pass to designers
• Design
  • Begin the process of conceptualizing design.
  • Enable multiple people to work on the design from a base. Do not enable a single user / individual to implement the design - we've attempted this in the past with io.js and Node.js, and haven't had success.
  • Apply design to the site structure and begin implementation
• Implementation
  • Figure out what kind of implementation will enable more collaborators and contributors to come into the project
  • Begin implementing design and site structure with code

That's a very crude outline, and I'd truly appreciate any feedback/suggestions on how it can be improved or changed to fit the needs of this project moving forward.

I'd also like to share an article by Adam Miller (@amiller-gh), Redesigning Nodejs.org, in which he did a significant amount of work in assessing the strengths and weaknesses of our website currently - and an impressive assesment of sites with a similar purpose. This article stemmed from discussions at the Node.js Interactive 2017 Collaborator's Summit.

[bnb]

Pinging a few people I can think of that I've talked to over the past ~year who've expressed an interest in helping out with this:

@skllcrn @codetheory @darcyclarke

[fhemberger]

I've been talking to @gtewallace on how to align the theme of foundation.nodejs.org with the general website as well. We'll be working on it starting next year.

And wow, @amiller-gh did an amazing job with his blog post, so many great ideas! I'm sorry we're still stuck with that outdated design. I hacked it together in 2015 as quick adaption of the old Node.js website and what we had in place at iojs.org. Everybody back then was like "yup, works for now" and it grew so quickly and there was too much other work. So it somehow ended up permanent …

I think first steps would be indeed to find a common ground for a new site structure (also how to integrate the Foundation pages and docs) and a general voice and tone for the site. Some parts are too technical and dry reading, not very suitable for beginners.

Mailchimp has some great examples:

• https://styleguide.mailchimp.com/
• http://voiceandtone.com/

[bnb]

Added cc-agenda label because we've discussed this in the past in Community Committee meetings, and it's probably good for the CommComm to discuss it again.

[ghost]

fyi - discussion is underway to organize this as a commcomm strategic initiative over at nodejs/community-committee#203

[JonahMoses]

@pup When the time comes for implementation I'd be happy to raise my hand to help.

[maddhruv]

hey, @pup I also want to contribute to the redesigning of the website!
Can you involve me?

[skllcrn]

Been talking with @bnb about this and would love to take part in the project, helping out with the design. If I'm needed it would be great to know a little in advance so that I can plan.

[phillipj]

Really happy to see a new redesign initiative and love the goal of getting discussions into the open, much appreciated!

A good friend of mine has been wanting to get involved for a while. We would be very lucky if we were able to get his talents onboard 🤞

@jestho wink wink 😉

[jestho]

@phillipj appreciate the confidence in me 😅

But yeah – I've been wanting to contribute to the open source scene for a while, and this seems like a great project in a friendly community!

I think the proposed plan is a great start, and that case study by @amiller-gh is golden.

I'd love to contribute with design, UX and implementation 😃

[amiller-gh]

@fhemberger, @jestho, thank you – It was fun to write! The current site has definitely done its job and done it well, but I'm very excited to watch this redesign project evolve! 😄

I see three things we need to have relatively locked down before we can move on to UI design (let me know if I'm missing something!):

1. Site IA
2. Voice and Tone
3. Draft of Site Content

The list item not mentioned in previous comments is #3, a full draft of site content (emphasis on draft). However, I believe it is the most important item in the list!

The type of content we want to provide will drive the new site design – not the other way around – so in my mind its important to give any UI designers who want to dig their teeth in to this project an exhaustive doc of content we want to display! Once drafted and structured we can all continue to wordsmith while the UI folks work their magic and provide feedback.

Nailing down site IA and V&T guidelines will provide us the scaffold to flesh out with content, and must be done first.

@bnb, @pup, should we get a VC working group breakout session organized to kick off this site IA / V&T brainstorm? I think the face-to-face would do wonders to kickstart the redesign 😃

[ghost]

@amiller-gh we should definitely do that! the first priority here would be seeing who wants to help build the website. we've had multiple people interested, but i think we should split it up in two main groups:

• strategy (e.g. content, user experience, facilitation)
• implementation (e.g. writing code, doing design)

so far i think most of the volunteers have been for the second group (which is cool, we need as many hands as we can get!), if anyone is interested in facilitating the redesign at a higher level, please do tell me!

the first group should form the Website Redesign Strategic Initiative, and we should start meeting regularly and creating a repository for the redesign and additional discussion to live in. a standing invitation exists for @nodejs/website working group members and collaborators to join this strategic initiative and help us coordinate the redesign, since you were (and are) the ones to build up this whole thing ❤️

[franciscop]

I was going to offer help with redesigning the docs when I saw @amiller-gh article (which is great). I am polishing details and bugs out of my Node.js library docs, do you think something like this might be fit for Node.js docs and fit within the new ideas being talked about?

https://serverjs.io/documentation/

I can get some proof of concept done, but wanted to ask whether it might be a good idea or not before investing the time. Node.js has done so much for me that of course I want to help back if I can 😊

[fhemberger]

@pup Please sign me on for the strategic part as well. 😊

[emilypmendez]

I am also on board for strategic UI/UX implementations @pup, specifically regarding content & user experience, as @amiller-gh referenced above. 😃

[maddhruv]

Hey, @pup include me also for the development of the framework for the website.

[bnb]

Wanted to let y'all know that @pup has finalized the Redesign Project as an official Strategic Initiative of the Community Committee: nodejs/community-committee#205

What this means? The redesign effectively has a project owner (@pup) and has direct accountability to the Node.js Community Committee. This will hopefully enable us to push this entire project to completion, from Information Architecture to shipping the new design to production.

Looking forward to this!

🎉🎉🎉

[ghost]

@fhemberger @emilypmendez @amiller-gh @jestho @skllcrn @codetheory @darcyclarke @bnb i've created a repository for this initiative: https://github.com/nodejs/website-redesign i'll start drafting a readme and organize a kickoff meeting for it soon, until then, you can watch the repository!

@mhdawson can you create a team called website-redesign, give it write permissions for aforementioned repository, invite me and all of the people i've mentioned, and make me a team maintainer (or whatever it's called)?

[franciscop]

@pup can I join as well please?

[bnb]

@pup I can create that team, since @mhdawson is on vacation 😄

[bnb]

@pup done - all members have been invited to the group, and the ones who weren't in the org already were invited to the org. As an administrative task, we need to add them to the nodejs/members team once they've accepted.

[maddhruv]

@pup please add me too on the team!

[pierreneter]

@pup I want to be part of this redesign team, I can code.

[fhemberger]

Almost all remaining issues in this repo could be addressed during the strategy phase of the redesign. To get a better overview, I added them to a project:
https://github.com/nodejs/nodejs.org/projects/1

@pup We should probably reference this in @nodejs/website-redesign once we get started there.

[ghost]

@fhemberger sounds good! i'll try and schedule a meeting today

[shahzeb1]

@pup I'd like to join in on the redesign effort as well! 👍

[vj-msft]

@pup I am interested in joining the team as well. I work as a front End developer.

[maddhruv]

@Viru1988 please check
https://GitHub.com/Nodejs/website-redesign

[ismay]

Hi, I am a member of the metalsmith team and the maintainer of metalsmith-layouts, which is used to build (the static part of) the current website. I was just taking a look at this repo and saw that there’s help wanted with this issue.

I’d like to contribute back to node, is metalsmith something you’re considering for the new build tooling? If that’s the case let me know, I’d be happy to help!

[fhemberger]

Hi @ismay, thanks for the offer! We're currently in the planning phase for the relaunch (structure, content, design, etc.) and haven't decided on any technical implementations yet.

You can follow the progress in the issues here:
https://github.com/nodejs/website-redesign/issues/

[ismay]

Cool, I’ll keep an eye on the issues there, and feel free to ping me if there are any questions/jobs where I could contribute (if it does become part of the stack).

[mariapesm]

@pup I'd like to take part for the redesign as Front End developer.

[fhemberger]

Locking this issue, as all redesign discussions happen in https://github.com/nodejs/website-redesign/issues/