Redesign / Reimplement CDP Org Website

[hawkticehurst]

Idea / Feature

Redesign and implement a v2 of the public-facing CDP website.

Use Case / User Story

TBD

Other Notes

Copy pasta notes from Slack.

Okay here's some of my initial thinking on what a website v2 could look like/be about. The below thoughts represent a visual, content, organizational, and technical overhaul to the current CDP website.

• Move to SvelteKit
  • Lots of reasons for this change––I can explain more if desired
  • Still should be able to host via GitHub Pages
  • Could also deploy to Heroku if we want to do fancier server stuff for whatever reason
  • SvelteKit can do SSR (server-side rendering)
  • How to use Heroku for free
  • If this is done could also change repo name to cdp-website to match the convention of other repos
• councildataproject.org
  • Homepage content/design overhaul
  • Svelte + Markdown-based
  • Refine CDP branding/messaging
  • The homepage would be a lighter/high-level introduction to the project
  • Could leave extra details on other pages
  • Visual overhaul
  • Hawk can work on some Figma designs potentially
  • Potentially move away from Mozilla Protocol in order to create a unique visual language for CDP org website
    • Should still use Protocol for actual CDP app though
• councildataproject.org/instances
  • [Maybe] Break instances section out into separate page if we start to get a lot of them
  • Svelte + Markdown-based
• councildataproject.org/onboarding
  • [Maybe] Create a dedicated page for helping to onboard new contributors
  • Would be a one-stop-shop to point people to
  • Information about contributor roles (dev, design, pm, etc.)
  • Information about how to get set up (dev env, GitHub project management, Figma, etc.)
  • Could also contain a general overview of the major repos and their architectures
  • Svelte + Markdown-based
• councildataproject.org/new
  • [Maybe] Create a web-based form for CDP instance creation
  • Is there a way to tie web form into GitHub bots/issue creation?
• docs.councildataproject.org
  • Collect all backend, frontend, infra docs, etc. into one place
  • Svelte + Markdown-based OR use an open-source doc generation project
  • https://docusaurus.io/
  • https://redoc.ly/redoc/
  • https://docsify.js.org/
  • https://codehike.org/ (if we want to have some fancy tutorials)
  • ALTERNATIVELY:
  • Could just have a simple webpage that links out to the doc sites that already exist
  • The big idea is just that there is a central place to find all of our docs
• design.councildataproject.org
  • A website to display the available assets from cdp-design
  • Resolves this GitHub issue
  • References/inspiration
  • https://microsoft.github.io/vscode-codicons/dist/codicon.html
  • https://htmlcolorcodes.com/color-chart/flat-design-color-chart/
  • https://ionic.io/ionicons
  • https://moon.io/

[adrmac]

hi @hawkticehurst, I talked to @JacksonMaxfield at the recent DL hackathon about potentially redesigning the home page. I have a background with marketing / web design / interactive and that kind of thing. thanks for these detailed notes, I'll take a look and see if I can help.

[adrmac]

@hawkticehurst reviewing this I have a few high-level thoughts --

1. I see two main user pathways here, one is users (duh) like professionals/activists looking for council data in their city, the other is developers looking to contribute to the project and/or establish a new instance.
2. There should be a clear call to action for each of these groups in the above-the-fold section of the home page. For example:
   • Choose your city
   • Don't see your city? Establish an instance. (or 'become an instance manager')
3. Just about everything else on the home page could be moved to an About page or a Developers page, or otherwise pushed much further down the hierarchy.
4. If there is more content on the home page after the two main calls to action, I would highlight user stories. Just making up some examples:
   • Hannah M., journalist -- "I used CDP to research my story about actions the city council is taking on homelessness. I loved feature XYZ.'
   • Jake L., activist -- "There's so much data produced by the city, and so much of it is hard to access. I use CDP on a weekly basis.'

Let me know if what I'm saying makes sense.

[hawkticehurst]

Thank you @adrmac! I'm in complete agreement on all your thoughts!

As I've been thinking about this work, the two intended user groups have also been CDP users and CDP contributors.

Also love the idea of having separate CTAs above the fold for each group.

On a similar note, I would also love some help creating an above the fold hero tag line for the project that better captures what CDP is about using simpler language.

My best attempts thus far have landed on "An open-source platform for making city council actions searchable." But I'm sure there's plenty more rounds of editing until that is final.

Also agreed that all the current content can and should be moved off to other pages.

I also love the idea of having a testimonials section! I had been playing around with the idea of letting the homepage mostly contain feature swim lanes that give a quick summary of the cool parts of CDP and think testimonials are a natural addition to that kind of storytelling. :)

[hawkticehurst]

Would love to schedule a time to meet and chat about this more whenever you have a bit of free time.

cc @sarahjliu