Design Mockup Creation

From crowdresearch
Jump to: navigation, search

Introduction

This section contains tasks associated with the design of a basic front-end for requestors and workers. The goal here is to have Visual/design aspects decided and implemented. Designers and people with UX experience are especially welcomed!

Tasks

  1. Create forms for the requestors to input their tasks.
  2. Create user friendly interface where workers can see list of tasks
  3. Create user friendly Requestor DashBoard
  4. Create user friendly Worker Dashboard
  5. Include the link to GitHub for implementation

Technology

  1. Bootstrap
  2. HTML
  3. Angular

GitHub

https://github.com/crowdresearch/crowdsource-platform/tree/develop2

StoryLine

StoryLine for the demo

* A requester visits the site -> Registers -> Views the Dashboard -> Posts the Image Labeling Task -> Gets back the Results 
* A worker visits the site -> Registers -> Visits the Dashboard -> Searches for the job -> Selects Image Labeling Job -> Submits the results


1) Single Page Landing

* Header: Name of the platform Logo & Punch Line
* Storyline Sliders with 3 Images describing task categorization  (Tab for Worker & Requester), Registrations & Login
* Flow and Roadmap for Workers, Requesters, Tasks
* Testimonials: 1 Requester and Worker 
* Footer: Social Media and About us


2) For a new worker: Registration for the Worker

* Ask for skill sets  


3) For a new requester: Registration for the Requester

* Ask for the operational area


4) A Worker Logs in

* The worker's home page highlighting completed & in progress tasks, deadlines 
* Link to the Task search page 

5) Requester Logs in

* The requester's home page highlighting current tasks, status, completion records, payments made and budget available   
* Link to the Task search page 

6) Worker want to find job

* Task search page highlighting tasks based on the worker's skills 
* Various filters to select tasks 

7) Requestor wants to create & post the Job

* Task categories 
* Image Labeling task 
* Dashboard 
* Comments 
* Post the task

Front End Engineering Angular Js & Design Teams

Directly-Responsible Individual (DRI) Rohit Nistala Front End Engineering Angular Js

Member CodeModule Link to the Git
Vishnu
Neil Gaikwad Ranking front end back end SerializationRESTCompatible
Bita
Rohit

Deadline: Friday, 24th 9am PST

Angular JS Tasks

- Build modules as per provided design end to end - Add routes, UIRouter and any other necessary components

Design Tasks

Directly-Responsible Individual (DRI) Neil Gaikwad Front End Design

Member Page Link to Git
Neil Gaikwad Landing Page SerializationRESTCompatible
Neil Gaikwad Registration SerializationRESTCompatible
Neil Gaikwad Ranking SerializationRESTCompatible
Neil Gaikwad Design for the Demo2 Wiki
Gaby Profile betzy-Model-turingUI
Christopher Diemert
Achal Varma
Jsilver
Asmita
dlytton


Targeted Modules & Focus

  • User Management
    • Login
    • Create Account
    • User Roles
    • User Profiles
  • Dashboard for workers
    • List of Available jobs
    • Selecting a desired job.
    • Executing & Submit the job
    • Profile with list of jobs completed and payment accumulated.
    • Publish tasks
  • Dashboard for requestors
    • Create Project & design Tasks
    • Create Qualification
    • Publish Tasks
    • Review Results
    • Mechanisms for viewing the jobs that workers executed.
    • Profile with list of jobs that were requested and the amount of money spent on each.
  • Mockup Designs supporting above functionalities

Landing, Registration, Ranking

CrowdResearch
CrowdResearch
CrowdResearch

Information Flow

'Flow NEIL

  • Crowd will visit NextGenCrowdSourcingDOTorg
  • USER MANAGEMENT: Who is the crowd?
    • Random surfers or General People who are curious about crowdsourcing
    • Requestor, who wants to post the job
    • Worker who wants employment
    • What will the crowd see?
      • LANDING PAGE DESIGN: 1) Clear Description of the Platform, 2) Success Stories of Requestors & Workers: How platform changed their business and lives 3) Login, Registration option
  • REQUESTOR DASHBOARD; If a user is requestor
    • We will need LANDING PAGE FOR THE REQUESTOR i.e. DASHBOARD
Fig 1. Requestor Activity Sequence

Below is example Sequence. For this and next week we focus on 1) ONBOARDING 2) TASK DESIGN and IGNORE REST.

Fig 2. Requestor Activity Sequence
  • WORKER DASHBOARD If a user is Worker
    • We will need LANDING PAGE FOR THE WORKER i.e. DASHBOARD
Fig 3. Worker Activity Sequence

Below is example Sequence. For this and next week we focus on ONBOARDING and TASK SELECTION and IGNORE REST.

Fig 4. Requestor Activity Sequence

Design 1

  • NOTE During the INITIAL STAGE our goal is to finish basic forms. Below example of dashboard can be used as a first starting step toward achieving that goal. We don't need to target any drag and drop controls, instead we can follow the idea: MORE TO BE ADDED


REQUESTOR DASHBOARD WORKFLOW


Dashboard Dashboard Dashboard Class Class


Dashboard

Task Design Dashboard: Task Categorization & Selection

Dashboard Dashboard Dashboard Class Class

Lego Blocks for designing the complex crowdsourcing tasks

Dashboard

Task Design Dashboard: Task Creation

Dashboard Dashboard Dashboard Class Class

Class

Task Design Dashboard: Expert Workforce Management

Dashboard Dashboard Dashboard Class Class

Class

Task Design Dashboard: Task & Trend Analytics

Dashboard Dashboard Dashboard Class Class

Class