Initial design plan

Workers design planning

Here we’ll discuss the initial plan for the design of the Built with Workers site. This document was put together by @adamschwartz and @signalnerve with help from @remyguercio and based on research and input from the broader Workers team.

Terminology

Project – a website, API, service, etc. built partially or wholly with Workers.
Feature badge – a feature of Workers (e.g. Workers KV) that a project may use, displayed in a way to associate it with the project.

High-level goals of the site

Each goal is listed in a rough priority order. Meaning, for our MVP, we seek to achieve goal 1 stronger than goal 4. Note though that these are somewhat overlapping goals, and design is an art as well as a science, so it’s OK if we’re not strict here.

Answers the question “What can I build?”
- Directly answers this question for anyone interested in Workers.
- Gives Sales and Support the power to answer that question when it comes.
Showcases real projects
- (As opposed to examples say in the docs which would be more for learning and thus stripped down and not necessarily live production apps/services.)
- Bonus: a featured project can function as a sort-of case study, perhaps containing quotes or other supporting material to make a stronger case.
Provides a consistent experience with the Workers homepage
- Intuitive and coherent navigation between the two helps synthesize concepts, particularly when deep linking between the two occurs. (For example, the item view page for a project built with Workers Sites linking to the Workers Sites landing page.)
- Begin to mature and solidify the Workers brand.
Helps people “put the pieces together”
- e.g. How do I use Workers Sites with HTMLRewriter?
- Bring clarity to complex docs by telling a coherent story.

Features

These are also sorted in rough priority order. Same lack-of-strictness applies.

Listing page
- Default to manual sort (e.g. via order property similar Cloudflare Apps)
- Listing page item
  - Project title
  - Project image
  - Feature badges
    - Icons
  - Project source
    - Avatar (user/company) image
    - Link
  - Featured boolean
  - Difficulty level?
- Allow user-enabled sorting (date added, alphabetical, popularity [claps])
Individual project page
- Everything from “Listing page item” above, plus:
  - Project description
  - Optional image gallery
  - Optional quote
  - Claps¹
  - Edit link to GH issue with prefilled content
Open-sourcing the Built with Workers site itself

[1]: We’re particularly excited about using Workers KV to build this (and showcasing that as Built with Workers itself will likely be a featured project of the site—yes, how meta of us).

Not doing (for MVP)

Here are a few of the things we considered building but decided against for the MVP. By no means should this list be considered exhaustive. We are happy to consider them after we slap down a v1.

Feature pages (KV, HTMLRewriter, Wrangler)
- Hero art
- Descriptions
Examples of features of an app you can build (a login flow, a redirect, an optimized image)
- Live code feature examples with preview
- Code as reference
Admin author display (“signalnerve edited 4 hrs ago”)

Potential list of feature badges

We think feature badges are going to be really fun. But we’re not sure exactly how they’ll work. We may have categories of these which could be distinguished e.g. by color.

Workers features (proper badges) (orange)
- Workers KV
- Workers Sites
- HTLMRewriter
- WASM
- Cache API
Things that supercharge you (blue)
- workers.dev
- Github Action
- Wrangler
Tools to help you build with Workers (purple)
- React
- Gatsby
- Svelte
- etc.

Content

We plan to take a content-driven approach for the initial design. This is generally a solid approach to design, but it’s especially critical when designing a site whose content is generated by someone other than the designer.

Projects

The main content of course are the projects. So, with the help of @remyguercio we generated an initial list. If you know of know of any projects we missed, please let us know!

Mockups

I know y’all want to see pretty pictures. I promise, they will soon exist. However, at this stage we feel it’s more important to share the plan, get feedback, and build consensus before drawing a bunch of rectangles.

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

codewithkristiancommented, Oct 30, 2019

my gut says that Tutorials would be an explicit non-goal for this site. Of course we can always link from say the description of a project to anywhere (including a tutorial living in the docs), but I think we should scope out anything more involved than that

yes – this will live on workers.cloudflare so it should be thought of as conceptually different than tutorials/docs content generally. i think the docs redesign is a better spot to iterate on tutorials/how-to content for our audience

0reactions

adamschwartzcommented, Nov 22, 2019

While we didn’t quite get to everything here, most notably “feature badges”, I’m closing this for now since it’s not particularly actionable. We should still continue to use it as a reference post-MVP GTM but we shouldn’t consider not completing everything above as a blocker for release. Instead we’ll create individual issues as needed.