Design Brief and benchmarks for build.webmaker.org/design

[xmatthewx]

All issues filed under the milestone mozwww

Project Brief

Summary: improve the design page on build dot webmaker dot org

• [x] What problem are you trying to solve?
  • increase effectiveness and efficiency of design team by creating a shared living document
  • easy access to assets
  • speed up
  • kickoff ramp up
  • handoff
  • enable non-designers
  • improve staff onboarding
  • increase understand of what design can do thru out mofo
  • clarify our shared principals and process
  • clarify and improve our process thru this tasks process
• [x] Who has this problem? Do you have research or user stories?
  • primary: design team
  • secondary: project/product managers
• [x] When do you plan to launch your solution? How long will it remain active? Describe opportunities, constraints, phases.
  • launch this week. a living document in perpetuity
• [x] What features does an MVP solution include? How will your audience use it?
  • a list with links to assets, brief, process, templates, guidelines, tools, "visual center",
  • a wee bit of visual interest
• [x] What is the value to your audience? How many people will be served?
  • team efficiency, design impact, quality of deliverables. 12 people will be served
• [x] How will you market and distribute the solution? What channels will drive the audience to it? (ex: FF Tiles, Facebook Ads, Hive Network)
  • via TPS, via Demos, all @ email, product kickoffs
• [x] How will you measure success? What are the needs and opportunities for...
  • [x] user testing
  • [x] analytics
  • 100% increase in traffic
  • 7+ unique visitors, return visits
  • [x] field research
  • see briefs posted
  • requests for additions
  • organic use by us
  • every member of design team can update
• [x] Who else in the field have addressed similar problems for similar audiences? What benchmarks serve as good reference?
  • twitter bootstrap
  • Mozilla assets site
  • U.S. digital services playbook
  • Material Design guildlines
  • Mailchimp voice & tone
  • Mozilla style guides
• [x] What Mozilla properties or style guides should inform the design?
  • This should serve as that guide for other designs
• [x] If you overheard someone describing their experience with your project, what would you love to hear? Include 2-4 adjectives that summarize the spirit of the experience.
  • "that was easy! helpful! so quick! i feel empowered!"
  • "it cut thru the complexity like a knife in butter!"
  • inspiring, transformative, intuitive, comprehensive

    Details

• [x] Project location (URL, repo, print)
  • initially: http://build.webmaker.org/design
  • best destination TBD (ex: build.theopenweb.org)
• [x] Required regions for localization
  • n/a
• [x] Visual content (existing assets & requirements)
  • prior artwork in mixed locations,
  • style guide within webmaker app
  • promo guildelines
  • logos, iconography
  • etc
• [x] Written content (existing assets & requirements)
  • https://github.com/xmatthewx/Mofo-Design-Handbook/tree/master/Process
• [x] Other requirements or restrictions (ex: consent to terms)
  • naming conventions

[xmatthewx]

Next steps:

• [ ] improve design brief process: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/29
• [x] whiteboard ideation
• [x] gather benchmarks
• [ ] write user stories: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/27
• [ ] identify design values: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/28 <-- edit by @cassiemc: I don't think this is a blocker for this ticket.

[cassiemc]

Documenting some feedback from @k88hudson: "From this brief, I know what the problem is that you're trying to solve but I can't actually tell what you're building."

Response: That's okay. This is not a functional spec, it's a creative brief so meant to meant to be a little bit open.

[sabrinang]

[xmatthewx]

Next steps:

• @lovegushwa @cassiemc
  • share document benchmarks
• @sabrinang @flukeout
  • list all content
  • wireframe
• @vazquez
  • UI

[cassiemc]

Our benchmark thoughts:

• twitter bootstrap Seemed like a different kind of context than the overarching container problem we are trying to solve. Also, a very straightforward sandwich site layout.
• Mozilla assets site Seems unfinished. Not enough information about each type of asset or how to plug to a process or design ethos. Has the start of the visual appeal of a grid layout but isn't there yet, and unsure how that will grow when all the product assets are plugged in.
• U.S. digital services playbook Too text-heavy. Nice to read but leans toward a one-time use.
• Material Design guidelines – Closest to what we thought we wanted, but seemed one step ahead – more at the brochure / wrapper stage than at the initial documentation work stage we are in. A good demonstration of what exciting documentation could feel like. Ultimately, not reflective of the collaborative, community culture that we want to embody. A great speaker who is not nice in person.
• Mailchimp voice & tone A little old school but nice the way the content was accessible in LH column; felt like a real tool. Nice the way the content focused on the user and explained both the why with a clear example of what and how. Focused just on copywriting.
• Mozilla style guides Out of date but in terms of structure it does represent the most basic assets and in that way is very accessible.

[cassiemc]

Next steps:

• [ ] UI for our design page: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/30
• [ ] illustration for our design page: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/31
• [ ] Gather links and copy for existing resources: https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/32
• [x] Prioritize content that we need to add to round out the design process docs

[sabrinang]

list of content: https://docs.google.com/a/mozilla.com/document/d/1aby1ntPPbIqhZLBd7MLDz3gAT83v3TYFOFh1ZnrV_pw/edit?usp=sharing

[cassiemc]

@vazquez Have you submitted a pull request for the updates to build yet?

[vazquez]

Do you mean if I've coded the page yet? No, I only got to the design yesterday. I was hoping to iterate with the team on the design today.

On Friday, June 26, 2015, Cassie McDaniel notifications@github.com wrote:

@vazquez https://github.com/vazquez Have you submitted a pull request for the updates to build yet?

— Reply to this email directly or view it on GitHub https://github.com/MozillaFoundation/Mofo-Design-Handbook/issues/21#issuecomment-115802389 .

Ricardo Vazquez UI Designer, Webmaker Mozilla Foundation @iamrvazquez http://twitter.com/iamrvazquez IRC: ricardo

[cassiemc]

This ticket is getting unwieldy. Many other tickets have been filed as follow-up work, so I am going to rename this to reflect what it really accomplished – documenting the design brief and the benchmarks - and close. Moving forward we can use the `July 17 milestone`` to check on our to-do list. Thanks all!