Notes: Moloch DAO Website Strategy

--- tags: RaidGuild --- # Notes: Moloch DAO Website Strategy These are notes from our call with Travis on Wednesday, November 17th. ## ===== PROJECT OVERVIEW ===== ### Deliverables ### 1. [Visual Design System](https://www.figma.com/file/nnlRI5IUZ8VXZvMuKfkpOn/MolochDAO-Design?node-id=0%3A1) (that can also be used for marketing) 1. Create brand assets guide like: https://uberhaus.webflow.io/ 2. New Website 1. [Sitemap & Content](https://docs.google.com/document/d/1tOZoijsPFYK2lP-G6wQpZpVHt7mVnTUY9kY0XCqWmCA/edit) 2. Wireframes 3. Website Pages 4. Handbook 5. Grant Pipeline Procedures 6. Blogs - [Moloch DAO](https://medium.com/ethereum-cat-herders), [Ethereum Cat Herders](https://molochdao.medium.com/), and [Death Guild](https://medium.com/@traviswyche) ### Team Task List * **John** * Map out pages, structure, and content -- [Google Doc](https://docs.google.com/document/d/1tOZoijsPFYK2lP-G6wQpZpVHt7mVnTUY9kY0XCqWmCA/edit) * **BorrowLucid** * Write page content with John and anyone else interested * **Kenny** * Create [visual design system / guide](https://www.figma.com/file/nnlRI5IUZ8VXZvMuKfkpOn/MolochDAO-Design?node-id=0%3A1) * Create wireframe * Design pages * **Brendan / Killmonger** * Figure out the tech stack (Next.js, Docusaurs, etc) * Code the site * **JP** * Helped setup the Uberhaus sites and can be a tech resource for us on this project ## ===== WEBSITE OVERVIEW ===== **Status of current website** [Old Home Page](https://molochdao.webflow.io/old-home) - All information is outdated - Hosted on Webflow so no integration with handbook - Way too many clicks to serve up info - Way too bloated - Fonts don’t match throughout the site - Bunch of content that needs to be migrated - New sections for Moloch Report and Community **Objective of new website** - Serve the goals of the 4 target users in as few clicks as possible - Convey the essential information from our grant pipeline procedures: https://molochdao.gitbook.io/handbook/introduction/wtf-is-moloch - The DAO team needs to preserve existing flow with GitHub **Who is the website for?** - Grant Applicants - Looking for info and how to apply, restrictions, what type of projects they fund, procedures for applying - New Members - How to become a new member, flow, process, what it means to be a member, tech procedures for how to apply (relay this info in the Handbook) - Existing Moloch DAO Members - Recent grant recipients who just became members - Keep up to date on community, events, culture, how to use the DAO to further the outreach of the project - Veteran Moloch DAO Members - Have been around for a while - Come to the website to funnel into the DAO Haus app - Great to give them a brief TLDR that Moloch DAO is active - On the main page show latest blog and recent announcements - Doesn’t need to be gated, can be on the main website **Website Pages** - Have separate pages specifically for the 4 target users to view everything on that one page for their specific needs - Make the site as stripped down and elegant as possible - But if people want to they can explore supplemental content - Need to discuss with the report team how their content will be conveyed - Follow standard website layout structure **MetaGame Site** - Wiki.metagame.wtf/docs - All info in a wiki format (Travis likes this, but we don’t have to follow that model) - Likes how there are a bunch of buttons that take people out to sources **Long form vs short form content on site** - Short form - Headline with couple of sentences to direct people - Then the handbook and annual report details the stuff in long form content - All the blogs will be long form - Website should be as simple and elegant and concise as possible - Current site feels too cluttered and like a wall of text - Travis wants to integrate a strong visual element with rich imagery and fonts - Lots of open space with succinct text and cool visuals (could be chaotic and noisy) - Spike covered leather jacket imager? Collage of fabrics. - Dark and scary, but not serious ## ===== DESIGN NOTES ===== **Molochdao.webflow.io/old-home** - Old V1 DAO stuff doesn’t have to be migrated **Moloch Brand Guidelines** - Model after what Uberhaus has in Figma - Would be needed for the other project teams - Internal facing visual design systems - Have wireframes before the site is built - Decentralize the project so people can come and go - Then have a Brand Guide as a secondary deliverable for the marketing people - Doesn’t need to be hosted for public view - Can be turned into a Sketch or Figma file - Wants symbols created **Design Inspiration** * Uberhaus [Website](https://uberhaus.club/) | [Brand Assets](https://uberhaus.webflow.io/_) * The DAOist [Brand Assets](https://www.thedaoist.co/brand) * Prime DAO [Brand Assets](https://www.prime.xyz/brand) **Design Preferences** - Dark and highly constrained - Black background and multiple shades of red - Maybe create a mood board? Kenny will do this and put together colors and fonts - Travis is giving us full creative freedom to explore - go as crazy as possible - Aesthetically - experiment wildly - Design must be easily iterative so future contributors can build off of the design - Kenny can take the lead on the visual design style **Home Page Design** - Richly designed, creative - Sections that link off to other pages and content - Social links like Uberhaus (also include launch App button) **Moloch Handbook** - Design as part of the website (like what Uberhaus does) ## ===== WEBSITE SECTIONS NOTES ===== **Funded Projects Section** - Collaboration with Annual Report team - Create archive all of projects they have funded - This layout is open to however we want to design it - Every project should have a profile page (links should be inside profile page) - Better considered - Outlines why Moloch DAO funded them, importance to eco system - Also needs to include all the new projects from the last round **Research Reports** - Needs to link to the handbook - Proposal submission process (most current info is in the handbook) - The new procedure in in the handbook - not a web form like it is now **FAQ Content** - Should probably be integrated into the handbook in a new section - Doesn’t need to be on the website **Forms** - Multiple forms - Proposals in the DAO are for big funds - The smaller form is for smaller grants - Status update - already funded projects (can ditch this all together) will be handled internally - Rework the existing Typeforms (or reconsider the process how it flows) - Simplify before putting memberships on chain - Discord forum for soft consensus - Better than inviting people to put proposals onchain **Blogs** - Create multiple blogs for the new site (get rid of Medium) - Moloch DAO Medium (primary for announcements and outreach) - Death Guild Medium - EthereumCatHerders.com - They have their own blog with technical updates - Would be nice to provide space on the Moloch DAO site for them as well - Not sure how that would work - but would need to think about adding that to the blog or a research section that is an archive - Opportunity for users to add content **Email Newsletter** - Currently using Mailchimp - Add opt-in section on the website ## ===== DEVELOPMENT NOTES ===== **High Level Need:** - Git Contributor Workflow for getting that content into the site - The DAO team needs to preserve existing flow with GitHub **No specific constraints** - Can use whatever software - But needs to know how hard it will be to update in the future (okay to leave Webflow - but need to know how many hours it will take to update) - Ux concerns - Clear pull requests for changes to the handbook - Need info for how to pull GitHub content into the site - Set up the infrastructure as much as needed so that a dev is not needed long term and only the content would need to be updated **Only need Docusaurus or Next.JS - only need 1 of them** - Docusaursus is commonly used in the DAO space - Requires a lot of customization, but faster to set up - Has a Git Based workflow - Can use any mark down files in folders (static site generator) - Uses CSS modules for styling out of the box for the home page - Also uses react components and patterns to use and people can easily make updates like they would on a react site - Git workflow is a bit draw for this - For contributor work flow for pull request publication - Not much flexibility for blog templates, but can use MDX for functionality - But not lots of super deep customization for page templates - Next.js - More powerful and flexible, but would require more time to set up at the start **Kenny and JP can discuss the tech side in more detail** - Since Moloch DAO already has the Git based workflow, it probably makes sense to use Docusaurus - Can explore other tech to include with this **JP - whirlwind wizard** - Helped setup the Uberhaus sites - Can set up a Docusaurus site (possibly next.js) - Can be a resource for us for this tech set up