HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2012T2 box.us UI & Video"

From IS480
Jump to navigation Jump to search
 
(21 intermediate revisions by 2 users not shown)
Line 56: Line 56:
 
|}
 
|}
  
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''Problem and Solution'''  </span></div></p>=
 
  
{| class="wikitable centered"
 
  
 +
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''Screenshots'''  </span></div></p>=
 +
 +
'''Landing Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide1.JPG|350px]]
 +
|[[Image:BUSlide2.JPG|350px]]
 +
|[[Image:BUSlide3.JPG|350px]]
 +
|-
 
|-
 
|-
|'''Problem'''
+
|[[Image:BUSlide4.JPG|350px]]
|colspan="2" |
+
|-
Empact is a newly startup social enterprise who just celebrated it's first birthday on 22 January 2013.
+
|}
Empact serves to work as a "middlemen" to their volunteers, Social Enterprises and NPO clients by matching the skills sets that the volunteers have to the tasks that the Social Enterprises and NPO clients need.
 
  
The problem that Empact is facing is that its business processes ranging from the recruitment of volunteer, to the matching of volunteers for the specific skills based task is very manual(ie looking at google docs and filtering via the requirements).
+
'''Volunteer Management Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide5.JPG|350px]]
 +
|[[Image:BUSlide6.JPG|350px]]
 +
|[[Image:VolMGmt.jpg|350px]]
 +
|-
 +
|}
  
On top of that, Empact also offer their services to their Social Enterprises and NPO clients through their hotline service where Empact will try to answer their clients' queries as much as possible or Empact will contact their volunteers who have the respective knowledge first before getting back to their cleints. In addition, clients would ask the same questions, hence time would be wasted when Empact provide the same answers to the different clients who approach them for answers.
+
'''Task Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide8.JPG|350px]]
 +
|[[Image:BUSlide9.JPG|350px]]
 +
|[[Image:BUSlide10.JPG|350px]]
 +
|-
 +
|-
 +
|[[Image:BUSlide11.JPG|350px]]
 +
|-
 +
|}
  
 +
'''Task Details Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide12.JPG|350px]]
 +
|[[Image:BUSlide13.JPG|350px]]
 +
|[[Image:BUSlide14.JPG|350px]]
 +
|-
 +
|}
  
 +
'''Matching Volunteers'''
 +
{|
 +
|-
 +
|[[Image:BUSlide15.JPG|350px]]
 +
|[[Image:BUSlide16.JPG|350px]]
 +
|-
 +
|}
  
 +
'''Empact Questions Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide17.JPG|350px]]
 +
|[[Image:BUSlide18.JPG|350px]]
 +
|[[Image:BUSlide19.JPG|350px]]
 
|-
 
|-
|'''Solution'''
+
|}
|colspan="2" |
 
  
 +
'''NPO Questions Page'''
 +
{|
 +
|-
 +
|[[Image:BUSlide20.JPG|350px]]
 +
|[[Image:Slide21.JPG|350px]]
 +
|-
 +
|}
  
 +
'''Volunteer Task Page'''
 +
{|
 +
|-
 +
|[[Image:Slide22.JPG|350px]]
 +
|[[Image:BUSlide23.JPG|350px]]
 +
|-
 +
|}
  
As such, box.us is helping Empact build a Volunteer Matching Application to solve the above issues:
+
'''Dashboard'''
# An integrated interview form within the application to keep interviewing details with the potential volunteers
+
{|
# A matching system to match volunteer's skill sets to the tasks which needed these skill sets.
+
|-
# A "question" page where Empact,Social Enterprises and NPO clients can post their queries and get volunteers with the required skill sets and expertise to answer.
+
|[[Image:Slide25.JPG|350px]]
# A timesheet tied to each task where volunteers can input their volunteering hours.
+
|[[Image:Slide24.JPG|350px]]
# A consolidated volunteer timesheet where volunteers can get to see their personalised volunteering history
+
|-
# A dashboard for both the 3 users of the system (Empact, Volunteers, Social Enterprises and NPO clients)to have an overview of the whole system.
 
 
|}
 
|}
  
 
+
'''More'''
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''Personas''' </span></div></p>=
+
{|
 
+
|-
'''Primary Persona''' (Representing Empact)
+
|[[Image:Slide26.JPG|350px]]
 
+
|[[Image:BUSlide27.JPG|350px]]
* Name: Peter
+
|[[Image:Slide28.JPG|350px]]
* Profession: Working Adult
+
|-
* Age: 35
+
|}
* Location: Singapore
 
* Attitudes: Passion in volunteering and exploring more ways to increase volunteering in individuals
 
* Activities: Volunteering in events
 
* Influencers: Passion in bringing volunteering to greater heights
 
* Workflows: Conducts interviews with potential volunteers and Social Enterprises and NPOs, matching volunteers to the tasks which fits volunteers skill sets, answering Social Enterprises and NPOs questions
 
* Pain points and frustrations: Repeating answers for the same questions asked by Social Enterprises and NPOs questions, manual matching of volunteers skill sets with the tasks at hand
 
* Goals: Reduce manual matching of volunteers skillsets and the available tasks , avoid answering the same questions
 
* Relevant technology used: Laptop and Mobile
 
 
 
 
 
 
 
'''Secondary Persona''' (Representing Volunteers)
 
 
 
 
 
* Name:Sophie
 
* Profession:Working Adult
 
* Age:26
 
* Location:Singapore
 
* Attitudes:Enjoys volunteering
 
* Activities:Volunteering in many activities organised by Social Enterprises and NPOs
 
* Influencers:Passion in volunteering
 
* Workflows:Goes to work from Monday to Friday. Volunteers during free time
 
* Pain points and frustrations: Do not know all the volunteering sessions available. Only know when contacted
 
* Goals: To volunteer in as many tasks as possible, as volunteering is a meaningful activity
 
* Relevant technology used: Laptop and Mobile
 
 
 
 
 
 
 
 
 
'''Third Persona''' (Representing Social Enterprises and NPO clients)
 
 
 
* Name:Sally
 
* Profession:Working Adult
 
* Age:28
 
* Location:Singapore
 
* Attitudes:Loves organizing activities
 
* Activities: Takes part in the activities organised
 
* Influencers: Love and passion for organizing activities and involving in volunteering personally
 
* Workflows:Goes to work and think of activities to be organized
 
* Pain points and frustrations:Do not know people who have the skills to have her organise her activities. Not certain of some important areas regarding law, accountancy, design, IT skills etc
 
* Goals: To be able to have volunteers with the required skills to join in my activity
 
* Relevant technology used:Laptop and Mobile
 
  
 
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''Web Application Prototype'''  </span></div></p>=
 
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''Web Application Prototype'''  </span></div></p>=
Line 221: Line 235:
 
|}
 
|}
  
 +
'''Volunteer - Dashboard'''
 +
{|
 +
|-
 +
|[[Image:Volunteer_Dashboard.JPG|450px]]
 +
|-
 +
|}
  
 
'''Empact - General Account Settings'''
 
'''Empact - General Account Settings'''
Line 281: Line 301:
 
|}
 
|}
  
 +
'''Empact - Dashboard'''
 +
{|
 +
|-
 +
|[[Image:Dashboard_E.JPG|450px]]
 +
|-
 +
|}
 +
 +
 +
'''Empact - Statistics'''
 +
{|
 +
|-
 +
|[[Image:Stas1.JPG|350px]]
 +
|[[Image:Stas2.JPG|350px]]
 +
|[[Image:Stas3.JPG|350px]]
 +
|-
 +
|}
 +
{|
 +
|-
 +
|[[Image:Stas4.JPG|350px]]
 +
|-
 +
|}
  
  
Line 306: Line 347:
 
|}
 
|}
  
 +
'''NPO - Dashboard'''
 +
{|
 +
|-
 +
|[[Image:NPO_dash.JPG|450px]]
 +
|-
 +
|}
  
  
'''Versioning (Revised)'''
 
 
We have decided to revise the versioning of the prototype.
 
  
Reason being that the old versioning method of looking at the prototype was via the word document.
+
'''Versioning'''
  
We then decided that putting the paper prototypes in the excel file is a better way to look at the versioning of the paper prototypes and looking at the comments given.
+
We have decided to put our paper prototypes in the excel file as it is a better way to look at the versioning of the paper prototypes and looking at the comments given.
  
  
TO NOTE:
 
  
Each version is a add on from the earlier version, so in the latest version, you will get to see the first version to the latest version.
 
  
 
{| class="wikitable" style="text-align: center; height:50px"
 
{| class="wikitable" style="text-align: center; height:50px"
Line 330: Line 372:
  
 
! scope="row" style="background:white"|
 
! scope="row" style="background:white"|
*[https://wiki.smu.edu.sg/is480/Image:EmpactPrototypeV2.xlsx V2]
+
*[https://wiki.smu.edu.sg/is480/Image:EmpactPrototype_7Feb2013.xlsx Empact_v2]
*[https://wiki.smu.edu.sg/is480/Image:EmpactPrototypeV1.xlsx V1]
+
*[https://wiki.smu.edu.sg/is480/Image:EmpactPrototype_4Feb2013.xlsx Empact_v1]
  
  
 
|style="text-align: center;"|
 
|style="text-align: center;"|
*[https://wiki.smu.edu.sg/is480/Image:VolunteersProtypeV2.xlsx V2]
+
*[https://wiki.smu.edu.sg/is480/Image:VolunteersProtype_7Feb2013.xlsx Volunteers_v2]
*[https://wiki.smu.edu.sg/is480/Image:VolunteersProtypeV1.xlsx V1]
+
*[https://wiki.smu.edu.sg/is480/Image:VolunteersProtype_4Feb2013.xlsx Volunteers_v1]
  
 
|style="text-align: center;"|
 
|style="text-align: center;"|
*[https://wiki.smu.edu.sg/is480/Image:NPOPrototypeV2.xlsx V2]
+
 
*[https://wiki.smu.edu.sg/is480/Image:NPOPrototypeV1.xlsx V1]
+
*[https://wiki.smu.edu.sg/is480/Image:NPOPrototype_7Feb2013.xlsx NPO_v2]
 +
*[https://wiki.smu.edu.sg/is480/Image:NPOPrototype_4Feb2013.xlsx NPO_v1]
 
|-
 
|-
 
|}
 
|}
 
 
 
'''Versioning (Archive)'''
 
*[https://wiki.smu.edu.sg/is480/Image:Box.us_-_Paper_Prototype_Version_2.docx Paper Prototype Version 2]
 
*[https://wiki.smu.edu.sg/is480/Image:Box.us_-_Paper_Prototype_Version_1.docx Paper Prototype Version 1]
 
  
 
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''User Interface Design'''  </span></div></p>=
 
=<p><div class="NavHead" style="background-color:#2F55A4;-moz-border-radius:4px; text-align: left; padding: 5px; font-size: 80%;"><span style="color: White"> '''User Interface Design'''  </span></div></p>=

Latest revision as of 09:28, 22 April 2013

degree=90
HOME   PROJECT OVERVIEW     PROJECT MANAGEMENT   DOCUMENTATION  
         


Landing Page

BUSlide1.JPG BUSlide2.JPG BUSlide3.JPG
BUSlide4.JPG

Volunteer Management Page

BUSlide5.JPG BUSlide6.JPG VolMGmt.jpg

Task Page

BUSlide8.JPG BUSlide9.JPG BUSlide10.JPG
BUSlide11.JPG

Task Details Page

BUSlide12.JPG BUSlide13.JPG BUSlide14.JPG

Matching Volunteers

BUSlide15.JPG BUSlide16.JPG

Empact Questions Page

BUSlide17.JPG BUSlide18.JPG BUSlide19.JPG

NPO Questions Page

BUSlide20.JPG Slide21.JPG

Volunteer Task Page

Slide22.JPG BUSlide23.JPG

Dashboard

Slide25.JPG Slide24.JPG

More

Slide26.JPG BUSlide27.JPG Slide28.JPG

Log-in for ALL users (Volunteers, Empact and NPO)

Box-us(sign up page).jpg Box-us(log in page).jpg


Volunteer - Volunteer Registration

Box-us(sign up page).jpg Box-us(registration form part 1).jpg Box-us(registration form part 2).jpg
Box-us(registration form part 3).jpg Box-us(registration form part 4).jpg Box-us(registration form end).jpg


Volunteer - General Account Settings

Vol - General Account Settings (1).jpg Vol - General Account Settings (2).jpg Vol - General Account Settings (3).jpg
Vol - General Account Settings (4).jpg Vol - General Account Settings (5).jpg


Volunteer - Manage Tasks

Vol - Manage Tasks (1).jpg Vol - Manage Tasks (2).jpg


Volunteer - Task Feedback Form

Volunteer Task Feedback Form.jpg


Volunteer - Task Timesheet

Volunteer Time sheet.jpg Volunteer Edit Time sheet.jpg


Volunteer - Consolidated Volunteer Record

Consolidated Volunteer Record.jpg


Volunteer - Manage Questions

Vol - Questions (1).jpg Vol - Questions (2).jpg

Volunteer - Dashboard

Volunteer Dashboard.JPG

Empact - General Account Settings

Em - GAS(1).jpg Em - GAS(2).jpg Em - GAS(3).jpg
Em - GAS(4).jpg Em - GAS(5).jpg


Empact - Manage Volunteers Sign Up

Em - MVSU(1).jpg Em - MVSU(2).jpg


Empact - Manage NPO

Em - ANPO(1).jpg Em - ANPO(2).jpg


Empact - Manage Tasks

Em - MT(1).jpg Em - MT(2).jpg Em - MT(3).jpg
Em - MT(4).jpg Em - MT(5).jpg


Empact - Manage Questions

Em - Q(1).jpg Em - Q(2).jpg Em - Q(3).jpg
Em - Q(4).jpg

Empact - Dashboard

Dashboard E.JPG


Empact - Statistics

Stas1.JPG Stas2.JPG Stas3.JPG
Stas4.JPG


NPO - General Account Settings

NPO - GAS(1).jpg NPO - GAS(2).jpg NPO - GAS(3).jpg
NPO - GAS(4).jpg NPO - GAS(5).jpg


NPO - Manage Questions

NPO - Q(1).jpg NPO - Q(2).jpg

NPO - Dashboard

NPO dash.JPG


Versioning

We have decided to put our paper prototypes in the excel file as it is a better way to look at the versioning of the paper prototypes and looking at the comments given.



Empact Volunteers NPO


We would be doing our user interface using Bootstrap 2.2. A few key features of the BootStrap 2.2 Framework:

  • Responsive Desgin
  • Generate your custom template
  • Ability to compile new themes on the fly using LESS

This UI framework helps us to cope with changes made by the client.

Bootstrap

V1 1.jpg V1 2.jpg V1 3.jpg
V1 4.jpg V1 5.jpg V1 6.jpg
V1 7.jpg V1 8.jpg V1 9.jpg
V1 10.jpg V1 11.jpg V1 12.jpg