Per this prior forum post seeking community interest in updating the website, which promised the community a decision gate of sorts after the design phase, I’m sharing a largely complete design framework for feedback and a vote. The reason for this decision gate was to ensure a popular reaction to the design work before build.
You can find a Google Drive folder of designs for the proposed new marketing site and app site here. The full Figma file is here (view inside red box). While we believe the designs to be in an advanced state of completeness, pending a positive vote, a few small things could change between now and launch - as we optimize and finesse further.
The lead designer is @mestigoit and the credit here is due to him. I have simply project managed the process - and will continue to do so with @Defijesus, if this decision gate is positive and we move to build phase proper.
Background and context
There’s quite a bit of background and context to communicate here and some things have moved around inside and outside of the project since conception.
1. Values to respect (DNA, culture, style)
After @mestigoit surveyed the community, we used this balance of values to inform the design direction.
In appreciation of the survey work and @mestigoit’s analysis of the responses I commented this, which I think is also helpful context:
“I was also very interested in the fault line between edgy, crypto brand with dank memes and buttoned up, respectful crypto asset manager you can really trust with thousands/tens of thousands of your hard earned savings. I’m biased towards the later with fun brand accents which still show hints that we’re quite cool - and were definitely cool in college
I also think we can have a deep, core brand framework, which we can slightly lean left or right from depending on the context. Eg landing page for institutional investors vs Twitter cards/assets for individual investor DeFi natives.”
Part of your assessment of the design output here should be on its alignment with our DNA and values.
2. Establishing the initial framework
We aimed to establish a website design framework which would be strong to stand today on its own, but also on top of which we could later add extra design assets and ideas too. For example, we knew we wanted to have a brand mascot - Cooper the Owl - but creating a 3D Cooper for use in a range of web and digital locations, like Salesforce’s Astro, would potentially take more time and delay moving forwards.
So you can think of these designs as wanting to be strong enough to launch as they are presented, with other nice to haves coming in time - to build out our overall design execution and brand personality. @Defijesus commented in the #Design channel a few weeks ago that he felt the designs were a tad bland compared to some more out there crypto projects - this is a little purposely the case, though we hope 3D Cooper and other such touches to come later can add sufficient personality, and a nice overall balance. (Small detour: @codeMathics is leading this 3D Coop project with very able support from @Earth2Travis. Recent commentary regarding this is in the #Design channel in Discord here).
Please bear this context in mind when voting - we hope the designs are pretty great, with the potential to become even greater.
3. Learning from best practice
As DeFi matures, some digital marketing and web best practices are emerging - some not entirely new. One that we noted, and partly inspired by fintech too, is having a ‘marketing site’ where people read about your product and are convinced, before clicking into an ‘app site’ where they convert and buy your product. This often appears as a larger marketing site and more simple, core app. Uniswap’s information architecture respects this thinking and was one of the nicest examples we saw of this in DeFi. Thanks for the inspiration Uni - please pump soon for $DPI 
4. Limitations on engineering resources
When this project was being debated and agreed core engineering resources were identified as a resource to conserve and protect. As such, we’ve sought to plan the aforementioned marketing site which, pending a successful vote, will be fully built out using Webflow to power the webpages and Contentful to power the blog and research sections. This means webpages can be built out without needing core engineers’ time - efficiency and scale we especially need as a fast growing, global DAO. Also, the functionality of certain marketing web pages has been scaled back in ambition to least impact engineering. For example: no price charts in the marketing site’s product pages. (We’ve taken the slight liberty of building a few test pages in webflow, but the community’s decision is required to complete this work - and there’s a huge amount more to do in the event of a positive vote).
The app site will be a React app and has been planned to be very simple, and very similar to the current website’s core functionality, to minimize engineering work. This app site’s maintenance - and update and improvement - will involve more engineering time and will need to be weighed against other future demands on these valuable engineering resources. (If we had more engineering resources available at this time, we would have brought one or two of the product designers in the DAO more deeply into this project to plan and design a more ambitious app, with dashboard, trading tools, etc - something we hope we can do later).
To help minimize the engineering team’s impact, @Defijesus has been tasked with being the tech liaison to this project - him and I have been working hand-in-glove to select and set up Webflow (and other tools) and will need to continue doing so from here to ensure successful project delivery. This partnership cannot be overstated.
Web page wireframes
Let us give you a quick run through of the wireframes you can find in the Google Drive folder here and the Figma file here (inside red box) to add more context. You will see light and dark versions and often mobile versions too.
Marketing site: Homepage
Perhaps the most important page of all, we hope the wireframe aligns with our DNA and value, while also communicating the most important things to our audience. We have also scaled back some ideas for having live data, or scrolling price information, in this page. We tried to deploy more social proof - the Coop has come a long way since the initial homepage - and use the homepage as an on-ramp into the community (see calls to action at the bottom of the page).
Marketing site: About us page
We’ve sought to articulate in more detail who we are, what we do and why it really matters - before also having this page function as an on-ramp into the community. The trinity/triangle metaphor is inspiration from @mestigoit and given its physical properties of strength and simplicity seemed apt.
Marketing site: Product pages
We present wireframes for DPI and MVI but would seek to use a similar architecture for the FLI series of products, and other new products in the works. You’ll note no chart above the fold, a decision to preserve engineering resources. We hope this wireframe shows something clean, elegant and high functioning - but which we can also build out a little more with more engineering resources in time. I personally really like the accordion feature.
Marketing site: Methodologists’ page
This is a page we don’t currently have, but given the crucial role of methologists in the DAO this seems a gap we should fill. We sought to make this page something of a call to arms, while also having fun with the owl meme (kudo to @caf and @Static121 for the meme). Naturally, we can experiment with the copy, but we hope the page can act as an efficient on-ramp to methodologists - even if they didn’t know they were a methodologist before they arrived, which some will not.
Marketing site: Institutions’ page
We do have this page in the current site, but it was a quick-fix project to get something up before BDWG hit BTC Miami. As such, Martin has applied his design mind to this, seeking to include more information, social proof and general institution-friendly content. Thank you to @Metfanmike and @fallow8 for input and copy - invaluable guidance.
Marketing site: Error page
While we don’t have a complicated existing site or hopefully too many broken links, these things do happen in time and we need a web page to serve this. Martin has designed a simple 404/error page with the old owl emoji, a simple message and some important links to get back on track. This web page is a good example of one where we’d look to upgrade it quickly once 3D Cooper is ready - swapping out the emoji for a 3D image inspired by @codeMathic’s work here.
App site: Product page with chart
This page is intended to be a fuller product page experience, with charting and more underlying product data, before a browser is convinced to buy. In time, we hope to bring some of this functionality to the marketing site and reduce the need for this page in the app. There are trade offs in this decision, but to protect engineering resources we think they are worthwhile.
App site: Trade widget page
Very simple; informed by our current web site’s trading app; does what it says on the tin.
App site: Vote page
While also seeking to remain simple and inline with the current app page, this page seeks to add a little more elegance with a few user-friendly touches. For example: bifurcating between passed and live votes.
App site: Liquidity mining page
Again, seeks to mirror the current app page, but with some design improvements that fit within this overall framework. Essentially nothing of the page functionality is changed, to keep engineering requirements to a minimum.
App site: Rewards page
To repeat myself one final time, this wireframe seeks to mimic existing app page functionality, but improve the design execution.
Hopefully you will be able to see, and enjoy, @mestigoit’s design framework for the marketing site and the app site - they’re slightly different but relational (relational mainly via colours), to signify to the user they have moved from one environment to another and that they do different things in each one.
It’s time for your feedback and vote
It’s taken a while to get here (2.5 months), lots of hard work (especially from @mestigoit!), and we’ve made lots of learnings as well. Thank you to all the other designers which have offered feedback and advice too.
Executing such a project in a DAO has been educational - no history working together meant rapid integration of thinking, communication and styles; more opinions and perspectives to harness; and a few operational inefficiencies along the way. We also had the European Football Championship affecting European productivity too! ( 
actually not at all!)
But now we’re here at the decision gate - excited and a little nervous to learn the community’s mind. So please ask any questions, share your feedback and cast your ballot.
Thank you.
- FOR building new website with this design framework
- AGAINST building new website with this design framework
