Design Archive

[shea-fitz]

Hello! If you're new to our "Archive" section, here's an explainer:

While Community Development's programs supported by Maker Foundation come to an end, the "Archives" issues provide insight to project/programs that the team had worked on. Perhaps you're interested in starting a project or program like this of your own, or perhaps you're just curious. Either way, our team members have collected documentation and relevant Github issues/threads for anyone to read about it.

Motivation

In Spring 2020, Comm-Dev began migrating its documentation portal off of GitBooks and onto its own tech stack. The new portal needed a visual redesign itself, but more broadly, it sparked the need for a Comm-Dev visual identity to reflect the spirit and goals of the community and create cohesion across Comm-Dev-generated content.

Summary

Since Comm-Dev has been part of MakerDAO, but operates independently with its own goals, Comm-Dev contributors wanted a visual identity that is in conversation with the core Maker brand (futuristic, clean, soft gradients), but with its own spin – a bit more casual, inviting, and humanized, with greater emphasis on community engagement.

The Portal

To decide on a visual direction for the portal, three options were presented on a community call to gather rough consensus. Once a theme was decided, it was applied to an existing design system (in both light and dark UI modes, utilizing semantic design tokens) and full page layouts. Community illustrator Richard Rosa also created custom illustrations for the home and landing pages, as a well as a library of 20+ spot illustrations that can be used modularly in presentations, social graphics, etc.

Building Out and Refining the Brand

After V1 of the portal launched, there remained a desire for the brand to mature (less 2D, cute, hand-drawn feel, a bit more adjacent to the Foundation brand). In early 2021, an updated collection of brand assets was created to address this need and provide templates for a wider array of content beyond the portal.

Roles

• Visual Designer(s) - helpful to have comfort/general familiarity in graphic design, UI design, design systems/component libraries, and best UX practices
• Illustrator

Related Links

• Portal - Mock-ups of the Comm-Dev community portal, V1 (shipped August 2020). Includes component library, home and landing pages, search results, and full collection of character illustrations.
• Blog - Mock-ups of the portal's blog (shipped February 2021)
• Brand Assets - Graphic templates, themes, and styles as of early 2021.
• MakerDAO Art Contest Flyer - Example of Brand Assets "in use," adapting motifs from the above template to create one-off promotional graphics
• PowerPoint template (Figma and Slides - 2021 version, 2020 version)
• Dai UI - scroll to the bottom right to select "Maker Community Theme"

Font Installation

NOTE: You need to have fonts installed locally on your computer in order to use them in Figma.

The font used in the above Figma files is the trial version of FT Base Pro. Download it here, then restart Figma, and you should be good to go.



Maker also has a license to the non-trial version of FT Base Pro. You can find these files in this repo in community/static/fonts.

If you can’t use FT Base Pro, use a default sans-serif font like Roboto or Arial.

Lessons and Recommendations

What worked?

• Weekly syncs with devs and PM and ongoing communication with devs
• Direct feedback on designs from teammates via Figma comments
• Quarterly check-ins with members of the Maker Foundation design team (mainly Henry, but also Jordan, Adrian, and Philip) to make sure 1) existing resources in the Maker ecosystem were being leveraged and 2) the Comm-Dev brand interacted with the Foundation brand appropriately

What didn't?

• The condensed timeline of the V1 portal launch left little room for brand exploration at the outset, and its initial identity felt rushed.
• The design system for the portal was too atomized and didn't provide enough layout guidance or templating to content creators. This led to a lot of inconsistent styling and misused components across pages. In the future it would be helpful to provide content creators with full-page templates, instead of tasking all content creators to jigsaw decontextualized components.
• The work here is largely focused on visual design (e.g. UI components, brand identity) and less on UX (e.g. user flows, information architecture), and while the two are, of course, fluid and inextricable in practice, it would have helped to have more UX-focused support throughout the Portal process (though shout out to Ryan for a full content audit in Spring 2020 and Lesa Moné for user research in Winter 2020).

Questions? Reach out to Shea via Github (@shea-fitz) or email ([email protected]).