Redesign front page and user-facing website

[dabreegster]

Currently abstreet.org lands people on the Github page, which

1) scares off some people, because if they scroll up, they see code 2) is horribly outdated with ancient GIFs and calls everything a "game"

I think https://a-b-street.github.io/docs/ is somewhat reasonably organized for the technical section, and that's about it... user-facing site/docs are tough. Main things a good website should probably do are communicating what we do, why, and how to get involved.

@natesheehan, any thoughts? Or any favorite websites that do a good job of introducing projects that we could model after?

Front page ideas

I imagine the first screenfull of stuff should include:

• the logo
• a quick summary of our 3 principles, which if I had to distill down
  • put planners, government stakeholders, and citizens all on equal footing with the same software
  • open source, public data
  • promote sustainable transportation
• maybe some kind of tag-line, like "inspire/imagine better transportation network, but get specific"
• a media carousel showing off impressive stuff, to hook people in

There are a bunch of different ways of breaking down what we do, and I'm not sure which ones belong.

• By piece of software
  • A/B Street (the main traffic simulator), the 15-minute neighborhood tool, the bike network planning tool, the new LTN tool, 15-minute Santa (an actual game), some tools specialized for the OSM community (I wouldn't even mention these upfront, niche audience)
• By "features"
  • https://a-b-street.github.io/docs/project/retrospective/index.html has a bunch of recent screenshots and GIFs
  • The Streetmix-style road editor, the traffic signal editor, you can simulate agents, you can generate travel demand models in a bunch of ways, the map is a detailed "digital twin" built from OpenStreetMap and other sources, all the dataviz stuff, etc
• By use case (kind of mixed in with grouping by audience...)
  • Telling data-driven stories (individual trips and aggregate trends in the Broadmoor article, showing usefulness of bike network extensions in the new tool)
  • Public communication, feedback (planners -> people)
  • Public engagement / citizen science (people -> planners)
  • Education / research (there are a few undergrads and grad students who've used parts of A/B Street in classes, their projects)

We could also focus on comparing ourselves to related software. If I had to summarize, our niche is rapid prototyping, aiming at a general audience, and being FOSS.

Another way to phrase things, related to use cases, is by problems:

• I have a bunch of examples of gov communicating plans to people in a poor way
• Likewise for people/advocacy groups communicating to gov

https://a-b-street.github.io/docs/project/presentations.html have introduced the project in many of these different ways. I'm not sure what'd be best for a website. The SUMO talk is probably one of the better project overviews.

[dabreegster]

28 got this started

[natesheehan]

Apologies, to not give feedback any sooner! But great job on synthesizing this down Dustin, lots to shout about! I think the general structure you've outlined is sweet, wearing a PM hat II would lean- to breaking down A B Street by "software", with features and use cases being a part of each software.

One biggish question I will ask, although I think you have already pondered about, (ref https://github.com/a-b-street/abstreet/pull/788) do you want this to be a vanilla js site? I think the mapbox example works as an awesome vanilla JS demo (similar to how mapbox do their tutorials (e.g https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-limit-region/). There are a lot of fancy JS frameworks these days, which IMO aren't always as good as they are hyped and take time to master, but they can make help rapid prototyping and other web nuances, with the trade-off (or not) that the website will look like most over websites on the web 🤷

Going forward, we may have to, unfortunately, think about SEO (organic), this would entail a lot of content on the website and might benefit from having some type of markdown generation (I think netlify make this pretty simple)

Websites I like: https://deck.gl/ (and co) feels like a good starting point from a developer perspective https://hydrogen.shopify.dev/ is very fun and informative https://www.mapbox.com/ mapbox homepage is fanchy https://www.common-wealth.co.uk/ Im also a sucker for a minimal design

Happy to assist with any web dev, css and infrastructure tasks!

[dabreegster]

So actually, @trangeriale has just prototyped a design for the front page! Feel free to comment in Figma: https://www.figma.com/file/RX2nOdY2uPaqGGvWPyDvV6/%5BA%2FB-Street%5D-Design-Library?node-id=3547%3A1831

do you want this to be a vanilla js site?

Very good question. I've been imagining this as just a single splash page, so pulling in any framework might be overkill. The rest of the "site" is docs.abstreet.org, generated with mdbook -- which has some notable clunkiness. I would personally be fine with adopting a framework, since it'd let the non-mdbook part of the site grow more readily. Suggestions for which framework very welcome.

https://www.common-wealth.co.uk/ Im also a sucker for a minimal design

I like this one! I was a bit surprised by the cursor effect; haven't seen that kind of early 2000's JS nostalgia in a while.

[natesheehan]

Loving the design @trangeriale, I will leave further comments on the design for that channel.

Suggestions for which framework very welcome.

Meh, to be honest, I agree that if the website is a single splash screen there is little need for any framework. Also, anything I suggest is clouded in the bias of my own usage (node and react). As an aside tho, Mapbox are realsing more demos for using their services with React (https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/ or https://github.com/alex3165/react-mapbox-gl)

haven't seen that kind of early 2000's JS nostalgia in a while.

Haha, retro web design is certainly making a resurgence!

[dabreegster]

35 gets this going again, will file followup issues for specific things