Document / synthesize findings from moodboard exercises

[cassiemc]

All the moodboard links are here: https://github.com/MozillaFoundation/Design/labels/design%20principles

Notes from each presentation:

Grassroots

by @lovegushwa Source: https://www.pinterest.com/lovegushwa/grassroots/

• skews toward protests / activism, not what we want exactly. bottom-up
• conceptual, pointed graphics; often using humor, sans serif, bold, coarse; utility & efficiency, stark
• FF is activist product; mozilla is change agent
• folk arts, murals –> more about community
• attractive, unfinished quality. Not slick. Often handmade. Momentary / timely.
• radical is perhaps on a scale: positive vs. dystopian; feeling of discomfort.
• this about how this relates to open ... community gardens?

Open

by @flukeout Source: https://docs.google.com/a/mozilla.com/presentation/d/1BpzXkHqQZltDMUrW6WjEjDcIiPRc9iwhCW6n5wTlAXY/edit?usp=sharing

• agency, participation
• exposing / celebrating individual stories and accomplishments
• gridded photographs: sense of community.
• Easy to get started; easy to know where you are. Timelines. Historial access generally easy
• Kickstarter: participation through endorsement.
• Sometimes gamified
• customizeable
• generic, reusable UI?

Opinionated

by @natalieworth Source: https://docs.google.com/presentation/d/1umVz8C-v-KiPgX2gvC6Iip2ZIP1POEFeko7p7ELBx2Q/edit#slide=id.g1062aeecb2_0_0

• art is a good example, strong opinions; more so than design
• design always considering a user, so there is a care in what you say
• more mediums to express artistic opinions
• design hides an opinion; less important for art to please
• art's history means people understand its place better; maybe not using typography or layout the same way to communicate in design
• bold type & colors, highly stylized
• good at refining and communicating what they're good at
• content will have huge effect. we already are opinionated, eg., "open" is hugely opinionated
• typography – reinforced by every element of the design.
• offers opportunity to think about how msging has always been communicated, and invert that.
• infographics: you choose upfront how to display something; similar to 'open' it is built into the content, ia, etc
• editorial (not necessarily journalistic)
• takes a point of view
• more examples: anti-smoking ads (or other ad campaigns)
• 1-2 bold headlines

Coherent

by @sabrinang Source: https://www.pinterest.com/sabotage/design-principle-coherence/

• visual systems, brand systems: coherent shapes but expressing many ideas
• palette & illustration
• throughout mediums
• expansive in that it can be both serious or playful; versatility
• FFOS is a good internal example + Mozilla India illustration examples
• can tie together individual campaigns
• language can be consistent by itself
• netflix: visual stack: endless, flexible
• often a use of patterns; reuse of elements. elements work on their own and at all scales
• doesn't have to be complicated (e.g. netflix)

Meaningful & Effective

by @kristinashu Source: https://docs.google.com/a/mozilla.com/presentation/d/1z1KR7Jz5xrICVWHgd4NxJJIzRpPhqSS0Sr-PzJmdN1A/edit?usp=sharing

• accessibility as a means to effectiveness
• spread quickly w/o advertising; speaks for itself
• using stats / logic to address a specific need
• http://eyeheartworld.org/ meaning through copy
• brought value to the user
• how can it be brought forward visually + how can ui/ux reinforce it
• maybe two diff. moodboards
• Information is appeasing, calms people down, gives them a reference point
• impact on ppl's lives: educational bootcamps, training, fitness: transformative
• are testimonials common? actors?
• personal; context matters. who the audience is matters.
• From @kristinashu: To me, meaningful means the site makes the user feel an emotion (either through the look and feel or through copy). If the user feels the emotion then the site is effective. Site should also be memorable ie have some personality (not cold and sterile), be accessible to everyone, and be impactful. Sites which met this criteria tended to tell a story or be educational.

Delight & Playful

by @vazquez Source: https://docs.google.com/a/mozilla.com/presentation/d/1eIX_HfJCeakjiiMdErBjFTSpefNBevfzfMusTbRY7t4/edit?usp=sharing

• found in frustrating or monotonous moments in time, ie. sign in. e.g. button language.
• often found in the details
• doesn't have to be complex – similar example to play / pause button: https://dribbble.com/shots/1623679-Open-Close
• unexpected, sensible details can become utilitarian, ie. favicon color changing
• animations
• playful doesn't have to have meaning, but can be useful (delightful) interesting point
• illustrations
• time/ location: insightful about yourself
• boring things are often what people don't care about, so design has an opportunity to do something more interesting
• can be time-consuming. how to know when to invest the effort?
• "cool" – relationship to other contemporary illustration; sunglasses and skateboard
• an ecosystem of decisions

[cassiemc]

I'd like to have some kind of working document that becomes part of a mofo-wide style guide. Thoughts about format / implementation? @vazquez @flukeout @sabrinang @kristinashu @natalieworth @lovegushwa

[vazquez]

In regards to implementation, we could make a site with this simple layout:

[natalieworth]

Yah, I think a site that housed everything could work well and be easily accessible for reference. I also really like Font Shops/ Frontify brand guidelines if we want to elaborate in the future on stylings/ type (after our principles): https://www.fontshop.com/styleguide/globals or https://brand.frontify.com/d/qAiubNBytHKf/style-guide#/style-guide/icons-and-illustrations I'll look for more examples of principles this week

[cassiemc]

I totally missed these two comments, thanks @vazquez and @natalieworth. I do think this should be more of an inspirational doc rather than a working guide, but they could definitely relate. @vazquez @natalieworth How do you want to proceed? Are either of you up for doing a higher fidelity mockup based on Ricardo's sketch? I could do some writing for this for sure and synthesize those bullets into more coherent paragraphs.

[natalieworth]

@cassiemc @vazquez I'd be up for helping out with this! It could be a fun/ good project to work on after the Encryption campaign slows down. Not sure about the timing for this though or when we'd want to implement?

[cassiemc]

Timing not super critical. Maybe as a first step this heartbeat (if time, note it's a P2) would be good to turn the sketch into a v1 UI.

[cassiemc]

@natalieworth Any update here?

[natalieworth]

@cassiemc Didn't have time last week due to Gear Store/ encryption P1's. I should have time this week though to make some progress on it

[cassiemc]

That's cool. Will update the milestone

[natalieworth]

Update on this: was hoping to gather/ refine any content for the principles before building wireframes.

[cassiemc]

Started a doc here: https://docs.google.com/document/d/1XTtShU5TRWVIa216PXEhNMtgXQekd6H3egxOQyRrVj8/edit#

[natalieworth]

@lovegushwa @xmatthewx @flukeout @kristinashu @sabrinang @taisdesouzalessa We could pick this up again in March possibly? I feel like I'm struggling a bit with the new brand direction and image generation?

[taisdesouzalessa]

@natalieworth Sure! I have been saving some inspirational images in an InVision board and we can all brainstorm ideas together. Fun!