HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2012T2 Can.One Project Documentation"

From IS480
Jump to navigation Jump to search
 
(34 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
<!--Navigation-->
 
<!--Navigation-->
 
{| style="background-color:#ffffff; color:#800000 padding: 5px 0 0 0;" width="100%"  height=15px cellspacing="0" cellpadding="0" valign="top" border="0" |
 
{| style="background-color:#ffffff; color:#800000 padding: 5px 0 0 0;" width="100%"  height=15px cellspacing="0" cellpadding="0" valign="top" border="0" |
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#ffffff; " width="20%" | [[IS480_Team_wiki:_2012T2_Can.One|<font face = "century gothic" color="#800000">Home</font>]]
+
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#ffffff; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One|<font face = "century gothic" color="#800000">Home</font>]]
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#ffffff; " width="20%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Overview|<font face = "century gothic" color="#800000">Project Overview</font>]]
+
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#ffffff; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Overview|<font face = "century gothic" color="#800000">Project Overview</font>]]
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000;text-align:center; background-color:#ffffff; " width="20%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Management|<font face = "century gothic" color="#800000">Project Management</font>]]
+
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000;text-align:center; background-color:#ffffff; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Management|<font face = "century gothic" color="#800000">Project Management</font>]]
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#FAFAD2; " width="20%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation|<font face = "century gothic" color="#800000">Project Documentation</font>]]
+
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#FAFAD2; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation|<font face = "century gothic" color="#800000">Project Documentation</font>]]
| style="padding:0 .3em;  font-size:100%; text-align:center; background-color:#ffffff; " width="20%" | [[IS480_Team_wiki:_2012T2_Can.One_Learning_Outcome|<font face = "century gothic" color="#800000">Learning Outcome</font>]]
+
| style="padding:0 .3em;  font-size:100%; border-right:2px solid #800000; text-align:center; background-color:#ffffff; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One_Testing|<font face = "century gothic" color="#800000">Testing</font>]]
 +
| style="padding:0 .3em;  font-size:100%; text-align:center; background-color:#ffffff; " width="16.67%" | [[IS480_Team_wiki:_2012T2_Can.One_Learning_Outcome|<font face = "century gothic" color="#800000">Learning Outcome</font>]]
 
|}
 
|}
  
 
<!--Sub-menu-->
 
<!--Sub-menu-->
 
{| style="background-color:#4c4942; color:#504A4B padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" |
 
{| style="background-color:#4c4942; color:#504A4B padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" |
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Diagrams |<font face = "century gothic" color="#800000">Diagrams</font>]]
+
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Diagrams |<font face = "century gothic" color="#800000">Diagrams</font>]]
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; border-top:2px solid #FAFAD2;text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#User Interface|<font face = "century gothic" color="#800000">User Interface</font>]]
+
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; border-top:2px solid #FAFAD2;text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Survey Results|<font face = "century gothic" color="#800000">Survey Results</font>]]
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#UAT|<font face = "century gothic" color="#800000">UAT</font>]]
+
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; border-top:2px solid #FAFAD2;text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#User Interface|<font face = "century gothic" color="#800000">User Interface</font>]]
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Presentations|<font face = "century gothic" color="#800000">Presentations</font>]]
+
| style="padding:0.3em; font-size:90%; background-color:#FAFAD2; border-bottom:2px solid #504A4B; text-align:center; " width="20%"|[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Deliverables|<font face = "century gothic" color="#800000">Deliverables</font>]]
 
|}
 
|}
  
Line 36: Line 37:
  
 
<!--PUT CONTENT HERE-->
 
<!--PUT CONTENT HERE-->
''coming soon..''
+
== '''USE CASE''' ==
 +
[[Image:Can.One Use Case (Final).png|650 px]] &nbsp; &nbsp; &nbsp; [[Image:Can.One Use Case 2.png|300 px]]
 +
<br/>
 +
<br/>
 +
 
 +
== '''Registration SD''' ==
 +
[[Image:Registration SD.png|700 px]]
  
 
|-
 
|-
Line 44: Line 51:
 
|-
 
|-
 
|}
 
|}
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
+
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
  
<!--User Interface-->
+
<!--Survey Results-->
===<div style="color: #ffffff; font-size:0%">User Interface</div>===
+
===<div style="color: #ffffff; font-size:0%">Survey Results</div>===
 
{| class="wikitable" cellpadding="15"
 
{| class="wikitable" cellpadding="15"
 
|-
 
|-
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>User Interface</b>
+
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>Survey Results</b>
 
|-
 
|-
  
Line 56: Line 63:
 
|-
 
|-
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
 
<!--PUT CONTENT HERE-->
 
<!--PUT CONTENT HERE-->
''coming soon..''
+
<div class="left" style="width:auto; font-size: 16px; margin-left:auto; margin-right:auto;">'''[[Image:Can.One SurveyIcon.png|100px]][[Media:Can.One Pre-Acceptance Survey 031112.pdf|Pre-Acceptance Survey]]'''</div>
 
 
 
|-
 
|-
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
|-
 
|-
 
|}
 
|}
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
+
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
 +
 
 +
<!--User Interface-->
  
<!--UAT-->
+
===<div style="color: #ffffff; font-size:0%">User Interface</div>===
===<div style="color: #ffffff; font-size:0%">UAT</div>===
 
 
{| class="wikitable" cellpadding="15"
 
{| class="wikitable" cellpadding="15"
 
|-
 
|-
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>UAT</b>
+
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>User Interface</b>
 
|-
 
|-
  
Line 77: Line 83:
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
<!--PUT CONTENT HERE-->
 
<!--PUT CONTENT HERE-->
''coming soon..''
+
== '''Storyboard''' ==
 +
This is the UI walkthrough of how Angelina navigated through VEON in her quest of KPRINCESS sun glasses. This was the first time she use VEON. First, she took a picture using webcam, had her picture rendered into 3D avatar, and started browsing. She clicked on Go Shopping, navigated through brands and categories to get to her target item, and tried them on her avatar. She could immediately see the fit of the sunglasses on her -- but wait, she still wanted her friend to comment on it. So she searched for her friend who already had an account and intended to add her as a friend. Adding a friend required her to register and make an account, so she did. Upon approval of friendship from her friend, she could start chatting with her finds on VEON. Assured about her sunglasses purchase, Angelina added it to cart and proceeded to check out. Yay!
 +
<br>
 +
<br>
 +
<div style = "text-align:center;">[[Image:Can.One Storyboard1.jpg|450px]][[Image:ArrowRight.png|100px]]
 +
[[Image:Can-One Storyboard2.jpg|450px]]</div>
 +
<br>
 +
 
 +
== '''Mock Up UI''' ==
 +
 
 +
{| class="wikitable" style="text-align: center; height:100px"
 +
|+
 +
|-
 +
 
 +
<!--Proposed UI-->
 +
 
 +
! scope="row" rowspan="2" style="background: #F2F5A9; text-align: left; width: 100px;"| Proposed UI
 +
|style="text-align: left; width: 500px;"|[http://dl.dropbox.com/u/18512978/FYP/UI/Paper%20UI/Can.One%20-%20Paper%20UI%20v.1.0.htm Paper prototype]
 +
|-
 +
 
 +
|style="text-align: left;"|[http://dl.dropbox.com/u/18512978/FYP/UI/Wireframe%20UI/Can.One%20-%20Wireframe%20UI%20v.1.0.htm Wireframe mock-up]
 +
|-
 +
 
 +
!scope="row" colspan="2" height:25px|&nbsp;
 +
|-
 +
 
 +
<!--Mock Up UI-->
 +
 
 +
! scope="row" rowspan="2" style="background: #F2F5A9; text-align: left;"| Mock Up UI
 +
|style="text-align: left;"|[http://dl.dropbox.com/u/18512978/FYP/UI/UI%20Mock%20Up%20v.1.0%20-%2015Dec2012.pdf Version 1.0 - 15 December 2012]
 +
|-
 +
 
 +
|style="text-align: left;"|&nbsp;
 +
|-
 +
 
 +
|}
 +
 
 
|-
 
|-
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
|-
 
|-
 
|}
 
|}
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
+
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
  
<!--Presentations-->
+
<!--Deliverables-->
===<div style="color: #ffffff; font-size:0%">Presentations</div>===
+
===<div style="color: #ffffff; font-size:0%">Deliverables</div>===
 
{| class="wikitable" cellpadding="15"
 
{| class="wikitable" cellpadding="15"
 
|-
 
|-
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>Presentations</b>
+
| style="background:#ffffff;; color: #800000; font-weight: bold; text-indent: 2px; width: 32%; font-size:22px; text-align:left; border: 1px solid #ffffff" valign="top" | <b>Deliverables</b>
 
|-
 
|-
  
Line 95: Line 137:
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#FAFAD2; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
<!--PUT CONTENT HERE-->
 
<!--PUT CONTENT HERE-->
''coming soon..''
+
<div class="left" style="width:auto; font-size: 16px; margin-left:auto; margin-right:auto;">
 +
* '''[[Media:Can.One-Acceptance Presentation.pptx|Acceptance Presentation Slides]]'''<br>
 +
* '''[[Media:Can.One_Proposal.pdf|Project Proposal]]'''<br>
 +
</div><br>
 
|-
 
|-
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
| style= "background:#800000; color: #800000; padding: 10px 4px 0 15px; font-size: 13px;" valign="top"  |
 
|-
 
|-
 
|}
 
|}
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T1_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>
+
<div style = "text-align:right;"><font ="color:#800000; size:"12px;"><u>[[IS480_Team_wiki:_2012T2_Can.One_Project_Documentation#Top|Back to Top]]</u></font></div>

Latest revision as of 23:27, 14 April 2013

Home Project Overview Project Management Project Documentation Testing Learning Outcome
Diagrams Survey Results User Interface Deliverables

Diagrams

Diagrams

USE CASE

Can.One Use Case (Final).png       Can.One Use Case 2.png

Registration SD

Registration SD.png

Survey Results

Survey Results


User Interface

User Interface

Storyboard

This is the UI walkthrough of how Angelina navigated through VEON in her quest of KPRINCESS sun glasses. This was the first time she use VEON. First, she took a picture using webcam, had her picture rendered into 3D avatar, and started browsing. She clicked on Go Shopping, navigated through brands and categories to get to her target item, and tried them on her avatar. She could immediately see the fit of the sunglasses on her -- but wait, she still wanted her friend to comment on it. So she searched for her friend who already had an account and intended to add her as a friend. Adding a friend required her to register and make an account, so she did. Upon approval of friendship from her friend, she could start chatting with her finds on VEON. Assured about her sunglasses purchase, Angelina added it to cart and proceeded to check out. Yay!

Can.One Storyboard1.jpgArrowRight.png Can-One Storyboard2.jpg


Mock Up UI

Proposed UI Paper prototype
Wireframe mock-up
 
Mock Up UI Version 1.0 - 15 December 2012
 

Deliverables

Deliverables