---

Note: latest ux/ui posted to wiki/UI Mockups

---

• Overview
• Landing and Sign On
• Directory
• Account Settings
• Build
• Build Visual
• Assess
• Levels / Milestones
• Help
• User Roles & Issuer Settings

Overview

Here is the most up-to-date wireframes for Badgekit.org. As we make modifications, edits and iterations we will edit this wiki so that it reflects the most recent thinking.

These first wireframes give a brief overview of the entire flow, from badge creation to assessment.

Act 1 - Create a new draft

Act 2 - Define and Publish

Act 3 - Monitor badge activity in directory

• note: Most issuers will display available badges using the API or an embed widget. Action menu could offer link or embed to display a single badge. Discuss top here: #60

next in this flow would be Assess below

Sign On

Directory

Templates (First Use)

• Would be great to have groups. "Moz spring collection" ... "Our orgs"

Drafts

• Includes Create New Button

Published

• Includes metrics and all the actions
• Share would offer embed code and link to share with potential earners.
• Top of view includes link to info on how to share the whole bunch of badges.

Sort

• Sort list of badges below

Actions

• Summary of all actions available on badges

Mini Metrics

• Stats and sparklines. maybe revealed on menu:hover

Preview

• preview of a draft, template, or published badge.
• permalink would be nice to share a draft for a viewer among collaborators.

Applications

• queue of applications.

See Assess wireframes below

Awarded

• list of awardees

Archived

• much like published, but fewer actions on badges

Account Settings

Build

Learn more about Build here

Main page / / /

Provides a non-linear approach to building a badge.

• Borders on the visual-metaphor-as-menu could indicate progress.
• A couple of strong examples would be very helpful.

Description / / /

• Core info required by the spec
• I've split description
• i would lock these elements after a badge is published

Options / / /

• Includes options to facilitate badgekit (e.g. groups)
• Includes options that could be elevated later into the spec (e.g. time)
• Note sure if @carlacasilli wants Limits or Unique
• I wouldn't lock these items after a badge is published

Criteria / / /

• Enables more granular criteria
• Each bit of criteria has some info attached
• Issuer can set more flexible overall requirements

Menu / / /

• Collapses nav filters of directory into hamburger
• Should this link back to visual metaphor instead

Visual / / /

• Visual side of things still needs more exploration
• Wireframes coming sooon...

Publish / / /

• Final preview

Build Visual

Design a badge visuals.

Navigate

Shape & Background

Text

Banner

Image

Image disabled

Icon

Icon select

Icon adjust

Color

Assess

Learn more about Assess here

Sort - Applicants

Sort - Date

Levels

• This system is still TBD

There are two sides to a Level:

• Level Badge - a meta badge of sorts, automatically queued or issued after someone earns points associated with support badges
• Support Badge - a badge that fulfill the Level's Criteria
• Note: these names are not final

Define Level in BadgeKit Studio

Level Badge

• Define Level Badge

Level Support Badge

• Set Level points to a standard badge to support Levels

Applicant Level Progress

• Mentor/Assessors view of Badge Applicants and their progress toward Levels
• MVP!!

Help

Help landing page

Help Article

User Roles & Issuer Settings

Admin Overview

Issuer Profile

Program Profile

Program Users

Add or Edit User

User Profile

Issuer Participants