mozilla
The Coral Project
Design Processes and Artifacts
Get Involved!

Introduction

Some background on The Coral Project.

1. Introduction 2. Contribute 3. Design Process 4. Personas * Primary * Secondary * Tertiary 5. Roadmap 6. Core Product Overview 6. Core Product 1.0.0 6. Core Product 1.1.0 6. Core Product 1.2.0 6. Core Product 1.3.0 7. Install

The Coral Project

On The Coral Project, we are creating open-source tools and resources for publishers of all sizes to build better communities around their journalism.

Throughout this project we will collect, support, and share practices, tools, techniques and studies to improve communities on the web.

This static site is still very much a work in progress as I add content and more structure to it over the next few weeks.

Contribute

Get Involved

Want to help out with the design? Reach out on our community site to participate in the discussions or to lend a hand where ever you think you would be a good fit.

  • visual design
  • information architecture
  • user research
  • user experience design
  • interaction design
  • prototyping
  • data viz design
  • accessibility
  • content strategy
  • HTML / CSS
  • SVG

Contributions are always welcome!

  1. Create an issue to discuss about your idea (here is the guide)
  • Fork the repository (here is the guide)

  • Clone to your machine

    git clone https://github.com/YOUR_USERNAME/design.git

  • Create your feature branch

    git checkout -b my-new-feature

  • Make your changes

  • Commit your changes

    git commit -am 'Add some feature'

  • Push to the branch

    git push origin my-new-feature

  • Create a pull request ([here is the guide]https://help.github.com/articles/creating-a-pull-request/))

Contribution Requirements:

  • Contributions must be appropriately licensed using an open source license.
  • Contributions occur through Github pull requests.
  • Code must work in all supported browsers.

Design Process

End to end design process.

Design Process

This is a breakdown of our current design process, methods, and, techniques which we can employ in order to properly assess user needs and frustrations so that we can properly ensure which products to build that will satisfy our user's goals and hopefully add an additional value proposition to everyone's experience beyond just solving the problem definition.

This deliberate process is especially useful when we want to:

  1. make a decision based on observational or subjective data.
  2. gather behavioral and attitudinal insights from users.
  3. map intent to behavioral cues through user and mental models.
  4. facilitate design thinking and understanding across the company.

These are our major areas of design and some of the activities required in each. While they are in sequential order, there is a lot of iterating back when we come across new findings.

Stakeholder Interviews
Gather requirements, research, KPI’s, and a wish list of features.

User Research & Analysis
Identify user needs, frustrations and behaviors through exploratory research, and then model them.

Information Architecture
Define the navigation, taxonomy, terminology, metadata, findability, and searchability.

Interaction Design
Create the interaction model, flows, and prototypes.

Content Strategy
Content planning, development, and management.

Visual Design
Define the brand, identity, color palette, and type.

Usability
Planning and running cognitive evaluations around ease of use, and learnability.

User Testing
Attitudinal and behavioral evaluations of hypotheses.

User Research

Interviews

Qualitative data gathered over the past year from exploratory conversations with more than 300 people in over 175 organizations from more than 25 countries.

Task-focused follow-up interviews are currently being planned for our first product.

Needs Analysis

Needs analysis based on interviews from the exploratory research phase.
Trello board with needs by role.

Features Breakdown

Feature brainstorm and affinity session based deliverable.

Feature brainstorm

Hypothesis driven design process flow
  1. Conceptualize idea.
  2. What assumptions can we make from this concept?

  3. What hypothesis can we formulate from these assumptions?

    e.g. If [action] then [outcome] because [user need/problem has been addressed]

  4. What experiment do we plan and conduct to test this hypothesis?
  5. What did we learn?

  6. What will do next?

Personas

Personas are currently ongoing and will require a new set of interviews for validation and insight.

alt tag

Persona name

Journalist

" To see community as potential contributors. "

Archetype
Sage
Orientation
Primary Orientation
Social
Secondary Orientation
Order
Traits
Motto
The truth will set you free
Core Desire
Seek the truth
Goal
Utilize intelligence and analysis to understand the world
Greatest Fear
Ignorance, being misled
Strategy
Seek information and knowledge externally and internally
Weakness
Pendantic, can fail to act
Talent
Wisdom and intelligence
Also Known As
Scholar, thinker, and philosopher

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

alt tag

Persona Name

Moderator

" Would love to have tools to pass on knowledge about active trolls, top commenters, etc within the system so that user behavior can be understood in context, and so that institutional knowledge isn't lost if someone leaves. "

Archetype
Ruler
Orientation
Primary Orientation
Order
Secondary Orientation
Ego
Traits
Motto
Power isn't everything, it's the only thing
Core Desire
Control
Goal
Create a prosperous, successful family or community
Greatest Fear
Exercise power
Strategy
Chaos
Weakness
Authoritarianism, inability to delegate
Talent
Responsibility and leadership
Also Known As
Leader, aristrocrat, politician, or manager

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

alt tag

Persona

Engagement Editor

" Likes to encourage good commenters to stick around so that the best contributors keep adding value to the site. "

Archetype
Caregiver
Orientation
Primary Orientation
Social
Secondary Orientation
Freedom
Traits
Motto
Love your neighbor as yourself
Core Desire
To protect and care for others
Goal
To help others
Greatest Fear
Selfishness and ingratitude
Strategy
Doing things for others
Weakness
Martyrdom and exploitation
Talent
Compassion and generosity
Also Known As
Saint, parent, helper, supporter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

Roadmap

Design roadmap of upcoming features and events.

Project Roadmap

Project roadmap for initial phase of project. Project Roadmap 9.2015

Current project roadmap

1.16 - Iteration 1.3.0

  • Dashboard refactor
    • Hypothesis: TODO
  • Object Manager refactor
    • Hypothesis: TODO

2.16 - Scenario and usability prototype testing for 1.3.0 and 1.2.0

  • Target roles: EE, Mod, Journalist
    • Scenario: TODO

Project Success

  1. Users' distinct concerns are met with a personalized value proposition which is attractive and engaging.
  2. The platform is simple to understand and pleasing to use.
  3. The platform accurately meets the goals of the users.

Project Failure

  1. Users have not had their needs properly identified nor met.
  2. The platform is unintuitive, cumbersome, and adds complexity or frustration to their workflow.
  3. The platform fails to meet the goals of the users.

Iterations

Previous and current iterations

Core Product

1.3.0 Wireframes & flows

Core Product

1.2.0 Wireframes & flows

Core Product

1.1.0 Initial Wireframes

Card Game

Cards Against Humanity

Personas

User Models

Core product 1.0.0

Initial dashboard concept

Brand and Identity

Logo, color palette, and type

Feature set breakdown

Brainstorming exercise

Artifacts

Deliverables and templates available for download.

Coral Presentation Templates

Coral Project Logo Source Files

Install

Instructions for cloning and/or forking this repo.

Install

Fork this repo:

Or clone and refactor for your own use:

mkdir somedirectory
cd somedirectory
git clone https://github.com/coralproject/design.git

Dependencies

Install dependencies with npm (TODO: full dep list)

npm install

Build

npm run build

Dev

npm run dev

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.