search

V-Squared / V-Squared.github.io

Initiative for Modular and Upgradable Mini and All-In-One PC. Standards — Know How — Blueprints — Trailblazer Products
http://v-squared.github.io/
Other
2 stars 1 forks source link

Add Progress Batch to V²Home Page #8

Closed VillageHubertChen closed 8 years ago

VillageHubertChen commented 8 years ago

User Story

As a new Reader of the V² Home Page I was originally put off that most of the places I navigated to were not very developed and almost wanted to abandon V². But now after the introduction of Progress Batches I get it: This is an Open Source repository for the Community to both create and to look up Know How. If I am in the business of looking up Know How, I know that I will find little when the progress batch says "Incubating". And the more the progress batch moves to the right, the more Know How in the better presentation I can expect. Now browsing the Home Page does not make me frustrated anymore. Thanks guys!

Illustrating Progress

Two Types of Progress

Development Progress

This is intuitive and it's inside what it says on the label. Since years we stage development internally into 4 stages: 1) Incubation, 2) Development, 3) Beta Testing 4) Production. Actually we have a fifths stage, which is 5) Archived. But at the time of publishing V² to the public as a new Standard Organization it is not the right moment to talk about archiving standards when we have not even published our first one.

Move to GitHub Progress

This is was not so intuitive at first. Lets look at an example problem: ViCase. Development is complete and it is already in production. Yet on GitHub you can see nothing yet, because all work is still done on the internal server. By adding the "Move to GitHub" Progress Badge we can make two statements:

So even the visitor can't see anything yet, he gets the idea that soon he can see a lot, as all that need to be done is moving the content from one server to the other.

Color and Shape Codes

We minimized the user of color and shapes. Each remaining color and shape have a coded meaning. This makes it easier for the visitor to scan the page and to get an overview of Development and Move Progress.

Placement indicates Function

Progress Bar under the Project Poster

This is very common and intuitive.

Move to GitHub Progress as Corner Ribbon

It has become a habit to place a "Fork on GitHub" Ribbon in the top right corner, Ribbon Color in GitHub Green. Our design shows the "Move to GitHub" status in the same way.

Staged "Move to GitHub" Progress

Four Stages of "Move to GitHub"

  1. Off: Development is currently happening off GitHub. It will be moved to V² GitHub soon.
  2. Next: This project is next in line to be moved to a V² GitHub repository.
  3. Hot: We are moving this project right now to V² GitHub!
  4. On: This project is on our V² GitHub.

    Design as CSS Corner Ribbon

Example Corner Ribbon

New Stage Name Old Stage Name (on previous server)
Create Incubation
Develop Developing
Beta Beta
Make Production

Design as Stacked Progress Bar

VillageHubertChen commented 8 years ago

Find shorter Words for:

Shorter Words for Stages:

Tasks

VillageHubertChen commented 8 years ago

New Progress Bar Implementation

Tasks

VillageHubertChen commented 8 years ago

Yeah! :tada: