Product Requirements Document community call

--- tags: community call slideOptions: center: false --- # Product Requirements Document community call 18 February 2021 ---  ###### **Welcome**<a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Hello! We're excited to show you what we have planned for publiccode.net. ---- ###### **Welcome**<a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Presentation Overview 1. Introduction 1. The Product Requirements Document 1. Illustration evolution 1. Initial wireframes 1. Comments and questions ---  ###### <a href="#/Welcome">Welcome</a>**Intro**<a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Introduction We are building an increasingly dynamic hub of information, a living record of activity, and a beacon for international, public sector open-source collaboration, which will grow as a gateway to a rich and varied ecosystem of ideas, resources, and communities. ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a>**Audiences**<a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Audiences Publiccode.net is our front door for the world. As such, it serves a variety of audiences, but not all audiences are equally important to us. As a new membership organization, this is our current audience prioritization. ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a>**Audiences**<a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Audiences #### Higher priority * People at a public organization interested in membership * People at public organizations who want to work with us *(e.g. have a codebase or want to develop one in the open)* * People who want to support us philanthropically * Journalists who would like to tell the world about us # #### Mid-priority * People at a public organizations who want to learn more or understand * People who work at a related non-governmental organizations who want to work with us *(like a think tank or academic research center)* ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a>**Audiences**<a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Audiences #### Lower priority * General public * Fans and casual contributors * Potential staff # #### Not prioritized for now * Current staff * All other user groups listed in the [Value proposition hypotheses](https://about.publiccode.net/activities/value-and-impact/user-mapping/) ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a>**Stories**<a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## User stories These are examples of representational user stories based on discussions and feedback we’ve received. We believe these are the main goals of people who come to our website. If this doesn’t reflect your needs, please [raise an issue](https://github.com/publiccodenet/publiccode.net/issues) or [contact us](https://about.publiccode.net/organization/contact-details.html). ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a>**Stories**<a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## User stories #### Higher priority example *As an employee of a public organization curious about membership* I want to explain the benefits of public code and membership to colleagues So that I can persuade them that our organization should join ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a>**Stories**<a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## User stories #### Mid-priority example *As an employee of a related non-governmental organization* I want to see high quality, meaningful work So that I can rely on the Foundation for Public Code in my own work ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a>**Stories**<a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## User stories #### Lower priority example As a fan of open source or public code I want to understand how I can contribute to the Foundation So that the Foundation’s mission succeeds ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a>**Goals**<a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Goals *(1/2)* * Increase membership inquiries from potential member organizations. * Support reuse of codebases under stewardship by new public organizations. * Increase visibility of and downloads of the Standard, and include social proof of its increasingly widespread use. * Enable our community to make the case for public code to their colleagues, friends and family. ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a>**Goals**<a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Goals *(2/2)* * Establish our position as thought leaders with open source activists, government technology and digital transformation experts, other domain space influencers, political decision makers and philanthropists. * Grow traffic to key sections: Membership, Codebases, Stewardship, Background *(and other fundamental explanations)*, Events and Communications calendar, Join us, and Standard for Public Code *(and related marketing pages)* * Increase site utilization: lower bounce rate, while increasing page depth and visit duration — overall, and specifically for intra-site page visits. * Become a beacon for open and transparent process. ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a>**Actions**<a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Actions *(1/2)* * **To increase membership inquiries**, we will showcase engagement by other (potential) members to lend us credibility, testimonials from member orgs/codebases, and success stories about codebases under stewardship. * **To support reuse of codebases under stewardship by new public organizations**, we will make it easy to find basic info about codebases, their functionality, their community, their maturity level and potential. * **To increase visibility of the Standard**, we will show where and how it’s in use, highlighting successes, and invite community building around it. * **To enable our community to make the case for public code**, we will provide a layman’s explanation, backed by targeted evidence to help non-technology experts understand its advantages and disadvantages *(for example, business cases for financial decision makers)* ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a>**Actions**<a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Actions *(2/2)* * **To demonstrate our position as thought leaders**, we will showcase our broader open source community engagement and participation by showing who we share stages with, which publications/platforms we have access to, our high value press mentions, and references to us in official documents. * **To grow traffic from the homepage**, we’ll feature engaging content with clear calls to action and straightforward user journeys. * **To increase site utilization**, we will tailor content and architecture to better accommodate our various audiences, and use lightweight web analytics to see in detail where we are losing people, and what areas may benefit from more obvious navigability. * **To become a beacon for open and transparent processes**, we will build upon the existing site’s idea of a seamless fusion between communication and tools and publicly demonstrate the value of this way of working. ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a>**Content**<a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Content types on publiccode.net There are 2 types of content pages on publiccode.net: * **Generic** - Easy to create and maintain, using the most basic elements of [Foundation for Public Code’s Jekyll theme](https://github.com/publiccodenet/jekyll-theme/), though may contain Liquid functions * **Custom** - Meant for more specialized content, characterized by novel page layouts and functionality ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a>**Content**<a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Content types on publiccode.net ### Generic pages * [Individual staff biographies](/who-we-are/team/alba-roza.md) * [Section introduction page](/careers) *(an index)* * [Long form text](/background) # ### Custom pages and page types * [Homepage](/index.html) * [Codebase stewardship explanation](/codebase-stewardship) * [Individual codebase overview](/codebases/signalen.html) *(a templated custom page)* ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a>**Technical**<a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Technical and functional requirements ### Technology and architecture * **Open and public** - Aim for 100% open-source and public domain languages and tools. Temporarily fall back on closed tools only when there is consensus on the benefits. * **Simpler and fewer** - Use common, established tech whenever possible. For example, CSS > SCSS, avoid Javascript. * **Easy expansion** - Beautiful design should not interfere with or overly complexify the process of adding and editing content. Templatization and continued automatic ingestion of markdown is essential. * **Unified content, flexible display** - Few sources of info serving multiple endpoints. Continue to use Jekyll, Liquid and CSS to enable one content set to serve web, multi-device, and print/PDF. * **Rich content** - Enable embedded video, social and GitHub hooks ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a>**Technical**<a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Technical and functional requirements ### Experience * **Presentation modes** - Information should be accessible via desktop and mobile web browser, social media, email, and pdf (digital or print) * **Human accessible** - [WCAG 2.1 Level A](https://www.w3.org/WAI/WCAG21/quickref/) (minimum). Accommodate the vision-impaired with screen-reader friendly, high contrast design. Avoid absolute text size units. Ensure proper keyboard-based navigability. * **Linguistically accessible** - Speak to an international audience by using standard, non-colloquial English. Speak to a non-technical audience by avoiding jargon, or defining it when necessary and helpful. * **Technically accessible** - Tools, languages and implementation style should prioritize procedures and code that is relatively easy to grasp and collaborate on. ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a>**Technical**<a href="#/Design">Design</a><a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Technical and functional requirements ### Practices * **Visible process** - Bring tools and communication closer. Select for technologies which broadly facilitate viewing, insight, understanding, sharing and participation. * [Dogfood](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) - Contribute to open source tools, practices and culture by avoiding closed/commercial platforms (even if they are arguably more powerful). * **Invite and reward feedback** - Create and bond with collaborators by responding to their ideas, incorporating the good ones, and visibly crediting them. * **Document well** - As the new site is built out of the old, align on agreed-upon best practices, and document these patterns as part of the process. Enable future collaborators (and forgetful selves) to understand past decisions. ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Basic process * Gather initial ideas and goals from team via workshops * Reference existing Github repos * Assemble product requirements * Create initial wireframes * Present to team, board and public * Refine wires and socialize until quorum reached * Design and build site updates * Review code, communication and design via standard Github process * Test hypotheses and document * Iterate ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Concepts * **Modular:** Design with flexibility in mind, facilitating closer parity between organizational needs and website structure * **Transparent and Traversable:** Keep communication connected to the work by using tools that blend them *(like GitHub)* and heavily using links to enable fluid traversal of the ecosystem * **Central and Extensible:** While the site will be an increasingly capable hub of information, activity, and identity, it will perform best not as a self-contained, all-inclusive structure, but as a gateway to a rich and varied ecosystem of ideas, resources, and communities. It should be designed to share roles and responsibilities with other tools and efforts *(like outreach, meetings, social media)* ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Voice * Optimistic, but cognizant of the challenges * Earnest and open * Not: Superior, ego-centric ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Design language considerations * Informationally and functionally-focused. Flashy marketing moments have their place, but should be used minimally, and generally take a backseat to the real work of organization, collaboration and information. * Machine and system-savvy, focused on people impacted by the work * Not: Computery as superficial visual motif * Text-focused (but not ‘brutalist’ or abstracted) * Future-looking (but not futuristic) and a bit timeless * Synthesis of digital (process), architectural (physical civic infrastructure), and organic (humanity), to reflect the work’s central medium in its physical and human contexts * Pops of color and purposeful photography to help bring it to life ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Design language considerations * Imprintable. A neutral/monochromatic design foundation enables others to see themselves, their orgs and communities in our work. Heavy branding can interfere with this. * Not: Generic, white-labelable * Intimacy at scale. Bridge the gap between human scale and civic/global implications. * Key elements can feature simple interactivity and animation, to bring the site subtly to life * A simple symbol/color design language could be developed to assist in wayfinding, which also acts as a sort of functional branding ---- ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ## Design approach ### Design references * [Illustrations.publiccode.net](https://illustrations.publiccode.net/) * [Illo.tv](https://illo.tv) (Super approachable graphics, simple forms, given life through animation) * Excellent API documentation: [Twilio](https://www.twilio.com/docs/usage/api), [Stripe](https://stripe.com/docs/api) ----  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ----  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ----  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a>**Design**<a href="#/Wires">Wires</a><a href="#/Questions">Questions</a> ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a>**Wires**<a href="#/Questions">Questions</a> ## Wireframes We are starting to explore an updated site structure, based on the PRD's parameters. This will be assembled and discussed in wireframe form, filled out and updated over the next weeks, after which we will iteratively roll out updates to the site. Novel elements and functionality will be designed and rolled out at the same time. [Link to the in-progress wireframes](https://www.figma.com/file/Mcz4evZVI4rRwv3quXtKGC/Publiccode.net-Wireframes-2021?node-id=177%3A0) ---  ###### <a href="#/Welcome">Welcome</a><a href="#/Intro">Intro</a><a href="#/Audiences">Audiences</a><a href="#/Stories">Stories</a><a href="#/Goals">Goals</a><a href="#/Actions">Actions</a><a href="#/Content">Content</a><a href="#/Technical">Technical</a><a href="#/Design">Design</a><a href="#/Wires">Wires</a>**Questions** ## Questions?!? * What do you use publiccode.net for most? * What doesn't work for you, what does? * Does this center our community enough? * And by contrast, is it slick enough? * One of our goals is to always invite people more deeply into our community. Are these plans accessible, hackable and inviting enough? * Is this process transparent enough? * What have you seen work elsewhere that we should consider? # ### Further reading * The full [product requirements document](https://github.com/publiccodenet/publiccode.net/pull/169) <style> /* add padding to top of slide, making room for h6 nav */ .reveal .slides > section, .reveal .slides > section > section { padding: 60px 0; } .reveal { font-size: 1.9em; } /* align main things to the left - no more centering! */ .reveal h1, .reveal h2, .reveal h3, .reveal p, section div { text-align: left; } /* partial progress number indicators */ .reveal h2 em, .reveal h3 em, .reveal h4 em { opacity: .4; font-weight: 400 !important; } li { margin-bottom:.5em; } h6 { /* reserve h6 for nav bar */ position: absolute; top: 20px; font-weight: 400 !important; left: -.5em; } h6 strong { /* highlight current (bolded) label */ font-weight: 400 !important; padding: 0 .5em; } h6 a { /* diminish other (struck-through) labels */ opacity: .4; text-decoration: none; padding: 0 .5em; } .markdown-body h6 { /* hide h6 in markdown view */ display: none; } </style> ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.