HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2012T2 5 B 1 G Prototypes & Mockups"

From IS480
Jump to navigation Jump to search
 
(7 intermediate revisions by 2 users not shown)
Line 40: Line 40:
 
| style="padding:2px; font-size:130%; background-color:#ffffff; text-align:center; color:#ffffff" width="10%" |   
 
| style="padding:2px; font-size:130%; background-color:#ffffff; text-align:center; color:#ffffff" width="10%" |   
 
[[IS480_Team_wiki:_2012T2_5_B_1_G Usability Documentation | <font color="#000000">User Tests</font>]]
 
[[IS480_Team_wiki:_2012T2_5_B_1_G Usability Documentation | <font color="#000000">User Tests</font>]]
 +
 +
| style="padding:2px; font-size:130%;  background-color:#ffffff; text-align:center; color:#ffffff" width="10%" | 
 +
[[IS480_Team_wiki:_2012T2_5_B_1_G Webapp User Tests | <font color="#000000">Webapp User Tests</font>]]
  
 
| style="padding:2px; font-size:130%; background-color:#009999; text-align:center; " width="10%" |
 
| style="padding:2px; font-size:130%; background-color:#009999; text-align:center; " width="10%" |
Line 45: Line 48:
 
|}
 
|}
 
</font face="Avenir" >
 
</font face="Avenir" >
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 25px; line-height: 1.2em; color:white">Summary Usability Tests Documentation</div>=
 
 
 
{| class="wikitable" style="text-align: center"
 
|+
 
|-
 
! scope="col" width="150" style="background:#CCCCCC| Usability Test
 
! scope="col" width="150" style="background:#CCCCCC| Date Conducted
 
! scope="col" width="150" style="background:#CCCCCC| Documents for Usability Test
 
! scope="col" width="150" style="background:#CCCCCC| Usability Test Results
 
 
|-
 
|1
 
|align="center"| 2 Nov 2012 (Fri)
 
|align="center"| [[Media:5B1G_UT1_Execution_Plan.pdf|UT 1 Execution Plan]]
 
|align="center"| [[Media:5B1G_UT1_Results.pdf|UT 1 Results]]<br>
 
'''[http://youtu.be/iBQkWavdAuI UT 1 Video]'''
 
|-
 
|2
 
|align="center"| 14 Jan 2013 (Mon)
 
|align="center"| [[Media:5B1G_UT2_Execution Plan.pdf|UT 2 Execution Plan]] <br>
 
[[Media:5B1G_UT2_Test_sheet.xlsx|UT 2 Test Sheet]] <br>
 
[[Media:UT2 User Appreciation.docx|UT 2 User Appreciation]]
 
|align="center"| [[Media:5B1G_UT2_Results.pdf|UT 2 Results]]
 
|-
 
|Web UT1
 
|align="center"| 22 Jan 2013 (Tues)
 
|align="center"| [[Media:5B1G_Web_UT_Execution_Plan.pdf|Web UT1 Execution Plan]]
 
|align="center"| [[Media: UTWeb_Results.pdf| Web UT1 Results]]
 
|-
 
|3
 
|align="center"| 15 Feb 2013 (Mon)
 
|align="center"| [[Media:UT3_Execution_Plan.pdf|UT 3 Execution Plan]] <br>
 
[[Media:UT3_Instruction_sheet.pdf‎|UT 3 Instruction Sheet]] <br>
 
Link for Survey [http://smusg.asia.qualtrics.com/SE/?SID=SV_5pPvWIbXkCVcFPD here]
 
|align="center"| [[Media:5B1G_UT3_Raw_Qualitative_Results.xlsx| UT 3 Raw Qualitative Results]] <br>
 
[[Media:UT3_Results.pdf| UT 3 Compiled Results]]
 
|-
 
|4
 
|align="center"| 11 Mar 2013 (Mon)
 
|align="center"| [[Media:5B1G_UT4_Execution_Plan.pdf|UT 4 Execution Plan]] <br>
 
[[Media: UT4_Android_Instruction_sheet.pdf| UT4 Android Instructions Sheet]]<br>
 
|align="center"| [[Media: UT4_Raw_Qualitative_Results.pdf| UT 4 Raw Qualitative Results]] <br>
 
[[Media:5B1G_UT4_Results.pdf| UT 4 Compiled Results]]
 
|-
 
|5
 
|align="center"| 18 Mar 2013 (Mon) & 19 Mar 2013 (Tues)
 
|align="center"| [[Media:5B1G_UT5_with_The_Basement_Cafe.pdf|UT 5 Execution Plan]] <br>
 
[[Media: UT5_Instruction_sheet_(Facilitator).pdf| UT5 Android Instructions Sheet (Facilitator)]]<br>
 
[[Media: UT5_Instruction_sheet_(User).pdf| UT5 Instructions Sheet (User)]] <br>
 
Link for Survey [http://smusg.asia.qualtrics.com/SE/?SID=SV_7Wc6VjyNdaONEm9 here]
 
|align="center"|
 
|-
 
|}
 
 
 
 
'''Test Plan''' <br>
 
Download the test plan [[Media:5B1G Test Plan.pdf| here]]
 
 
'''Compatibility Information (NFC enabled device):''' <br>
 
Samsung S3, Samsung Galaxy Note 2 <br>
 
<font color = "grey">Samsung S2*, HTC One*</font><br>
 
<font color = "grey">*These devices are unable to carry out the NFC redemption</font>
 
 
Our application is able to run on [http://en.wikipedia.org/wiki/Android_version_history#Android_4.0.3-4.0.4_Ice_Cream_Sandwich_.28API_level_15.29 Ice Cream Sandwich (API level 15)] onwards <br>
 
 
'''Incompatible with the following device:''' <br>
 
HTC Desire | [http://en.wikipedia.org/wiki/Android_version_history#Android_2.2.x_Froyo_.28API_level_8.29 Froyo (API level 8)] <br>
 
MotoBlur | [http://en.wikipedia.org/wiki/Android_version_history#Android_2.2.x_Froyo_.28API_level_8.29 Froyo (API level 8)] <br>
 
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">User Test 1 </div>=
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">How We Conducted the UT</div>===
 
 
====Objectives====
 
To understand whether the user finds the usability of the application user-friendly
 
The table below shows a list of features that will tested for our paper prototype user test to test the usability of the new layout
 
 
====Details: ====
 
*Participants: 7 shoppers/ undergraduates
 
*Venue: SMU, SIS UPL Lab
 
*Date: 2nd Nov 2012 (Friday)
 
*Duration: 1 hour
 
 
====Method====
 
We conducted the user test using a low-fidelity paper prototype using the mock up designs of the application.
 
Thereafter, we gave the participants the freedom to explore the application by themselves.
 
 
====Data collection====
 
Collecting of qualitative metrics
 
*We will observe how the participants use the application during the testing procedure.
 
*Upon completion of the paper prototype, the participant will be asked to give their feedback on usability and design of the application.
 
 
====Features Tested====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
|Sign in as an existing user
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| Login with Facebook
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| Bring me there
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| Share me (share on facebook)
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| Bookmark me
 
|-
 
!scope="row"  style=" text-align: center;"| 6
 
| Scan a product and add to cart
 
|-
 
!scope="row"  style=" text-align: center;"| 7
 
| View my shopping cart/checkout
 
|-
 
!scope="row"  style=" text-align: center;"| 8
 
| View past transactions
 
|-
 
!scope="row"  style=" text-align: center;"| 9
 
| Browse coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 10
 
| View recommendations
 
|-
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Results</div>===
 
 
====Observations====
 
[[Image:5B1G_UT1_observations.png|95%]]
 
 
====Feedback====
 
[[Image:5B1G_UT1_feedback.png|95%]]
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Gallery</div>===
 
 
'''Videos:''' <br>
 
[http://youtu.be/iBQkWavdAuI UT 1 Video] <br>
 
[[Image:5B1G UT 1.PNG]]
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Changes Made</div>===
 
 
====Change 1====
 
<gallery widths="400" heights="300">
 
Image: 5B1G_UT1_feedback1.png
 
Image: 5B1G_UT1_solution1.png
 
</gallery>
 
 
====Change 2====
 
<gallery widths="400" heights="300">
 
Image: 5B1G_UT1_feedback2.png
 
Image: 5B1G_UT1_solution2.png
 
</gallery>
 
 
====Change 3====
 
<gallery widths="400" heights="300">
 
Image: 5B1G_UT1_feedback3.png
 
Image: 5B1G_UT1_solution3.png
 
</gallery>
 
 
====Change 4====
 
<gallery widths="400" heights="300">
 
Image: 5B1G_UT1_feedback4.png
 
Image: 5B1G_UT1_solution4.png
 
</gallery>
 
 
====Change 5====
 
<gallery widths="400" heights="300">
 
Image: 5B1G_UT1_feedback5.png
 
Image: 5B1G_UT1_solution5.png
 
</gallery>
 
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">User Test 2</div>=
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">How We Conducted the UT</div>===
 
 
====Objectives====
 
The main objectives of this user test are:
 
*To obtain feedback from our users with regards to the layout in our application, and
 
*To implement a layout that is considered to be of acceptable standard by users
 
 
====Details: ====
 
*Participants: 10 shoppers/undergraduates
 
*Venue: SMU, SIS UPL Lab
 
*Date: 14th Jan 2013
 
*Duration: 2 hours
 
 
====Method====
 
We conducted the user test using a low-fidelity paper prototype using the mock up designs of the application.
 
Thereafter, we gave the participants the freedom to explore the application by themselves.
 
 
====Data collection====
 
Collecting of qualitative metrics
 
*We will observe how the participants use the application during the testing procedure.
 
*Upon completion of the paper prototype, the participant will be asked to give their feedback on usability and design of the application.
 
*We will compile the problems and classify them using a set of heuristics, thereafter we will assign a severity rating to each compiled problem
 
 
====Features Tested====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
|Login with facebook
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| Push notification, view recommended coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| View home page/featured coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| Share me (share on facebook)
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| Bring me there (navigation)
 
|-
 
!scope="row"  style=" text-align: center;"| 6
 
| Add to Coupon Cart
 
|-
 
!scope="row"  style=" text-align: center;"| 7
 
| Use coupon (NFC tag)
 
|-
 
!scope="row"  style=" text-align: center;"| 8
 
| Browse coupon (by category & location)
 
|-
 
!scope="row"  style=" text-align: center;"| 9
 
| Map
 
|-
 
!scope="row"  style=" text-align: center;"| 10
 
| Coupon Cart
 
|-
 
!scope="row"  style=" text-align: center;"| 11
 
| Logout of application
 
|-
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Results</div>===
 
 
====Detailed Results====
 
Download here: [[Media:5B1G_UT2_Results.pdf|UT 2 Results]]
 
 
====Compiled Problems & Proposed Solutions====
 
 
[[Image: 5B1G_UT2_Problem1.png|580px]]
 
 
[[Image:5B1G_UT2_Problem2.png|580px]]
 
 
[[Image:5B1G_UT2_Problem3.png|580px]]
 
 
[[Image:5B1G_UT2_Problem4.png|580px]]
 
 
[[Image:5B1G_UT2_Problem5.png|580px]]
 
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Gallery</div>===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px ; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px solid #ffffff; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT2_4.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT2_5.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT2_6.jpg|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT2_1.png|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT2_2.png|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT2_3.png|280px]]
 
|-
 
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Changes Made (during the UT)</div>===
 
 
{| class="wikitable" style="text-align: center"
 
|+
 
|-
 
! scope="col" width="150" style="background:#CCCCCC| Initial paper prototype
 
! scope="col" width="150" style="background:#CCCCCC| Changes made during UT2
 
|-
 
|[[Image:5B1G arrow paper prototype.jpg|400px]]<br>
 
Most participants failed to realize that the arrow on the top left corner was clickable<br>
 
|[[Image:5B1G Arrow changes.JPG]]<br>
 
Changed the icon to a more obvious and clickable icon that does not that does<br>
 
that does not look like part of the app logo
 
|-
 
|}
 
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Webapp User Test </div>=
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">How We Conducted the UT</div>===
 
 
====Objectives====
 
The main objectives of this user test are:
 
*To obtain feedback from our users with regards to the layout and business logic in our application
 
 
====Details: ====
 
*Participants: 2 retailers
 
*Venue: SMU, The Basement Café
 
*Date: 22nd Jan 2013 (Tuesday)
 
*Duration: 2 hours
 
*Environment: “Sit at a table” setting
 
 
====Method====
 
We conducted the user test using a low-fidelity paper prototype using the mock up designs of the web application and the participants were given the freedom to explore the application by themselves.
 
 
====Data collection====
 
Collecting of qualitative metrics
 
*We will observe how the participants use the application during the testing procedure.
 
*Upon completion of the paper prototype, the participant will be asked to give their feedback on usability and business rules behind the application.
 
 
====Features Tested====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
|Login with an account
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| Upload e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| Edit pending e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| View published e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| View expired e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 6
 
| View Business Intelligence for published and expired e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 7
 
| Logout of application
 
|-
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Gallery</div>===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px ; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px solid #ffffff; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
|-
 
!scope="row"  style=" text-align: center;"|
 
[[image:5B1G_IMG_5073.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_IMG_5074.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_IMG_5075.JPG|280px]]
 
|-
 
!scope="row"  style=" text-align: center;"|
 
[[Image: IMG_5076.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_IMG_5077.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_IMG_5078.JPG|280px]]
 
|-
 
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Results</div>===
 
 
====Results====
 
Download link available here: [[Media: UTWeb_Results.pdf| Web UT Results]]
 
 
<b>Observations</b>
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Observation
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| The user did not have any major problems regarding the usability the application
 
|-
 
 
!scope="row"  style=" text-align: center;"| 2
 
| They were more concerned about the business logic, they asked about whether they need to upload or select an individual product, because sometimes they offer discounts like “10% off all mains” rather than discount for an individual product
 
|-
 
 
!scope="row"  style=" text-align: center;"| 3
 
| Overall, they  were quite fascinated by the analytics that the application can produce
 
|-
 
|}
 
 
<b>Feedback</b>
 
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feedback
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| “Tagging an e-coupon to a product may not be always applicable, because sometimes we just want to entice people to come and patronize the restaurants, thus we may have a promotion for bulk items”
 
|-
 
 
!scope="row"  style=" text-align: center;"| 2
 
| “Maybe you could limit the number of coupons we can give out because sometimes when we conduct an offer, we do not have sufficient stock”
 
|-
 
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Changes Made</div>===
 
 
====Features Tested====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feedback
 
! scope="col" width="250" style="background:#CCCCCC| Change Made
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| “Tagging an e-coupon to a product may not be always applicable, because
 
sometimes we just want to entice people to come and patronize the restaurants,
 
thus we may have a promotion for bulk items”
 
|The user does not need to tag a product to the coupon. We reduced it to a 1-step upload process instead of a 2-step upload process.
 
|-
 
 
!scope="row"  style=" text-align: center;"| 2
 
| ““Maybe you could limit the number of coupons we can give out because
 
sometimes when we conduct an offer, we do not have sufficient stock”
 
|We included a new field for the retailer to enter the limit on the number of coupons (optional)
 
|-
 
 
|}
 
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">User Test 3 </div>=
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">How We Conducted the UT</div>===
 
 
====Objectives====
 
*To test the functionalities of the application from a user's perspective
 
*To obtain feedback from our users with regards to the usability of the application
 
 
====Details: ====
 
*Participants: 14 shoppers/ undergraduates
 
*Venue: SMU, SIS SR 3-4
 
*Date: 15th Feb 2013 (Friday)
 
*Duration: 3 hours
 
 
====Method====
 
The actual application was tested this time using the android device, Samsung Galaxy S III. Each participant was given the [[media: UT3_Instruction_sheet.pdf‎ |instruction sheet]] and asked to circle how easy it was to complete each test case.
 
 
====Data collection====
 
Collecting of qualitative metrics
 
*Facilitators will observe the how quickly the participant is able to complete the test case and whether he or she meets with any confusion (such as clicking on the wrong item) during each test case. These observations will be recorded down
 
 
Collecting of quantitative metrics
 
*Upon completion of each test case, the participant will be asked to rate how easy the task is and to give their feedback on the functionality and the usability of the application.
 
 
====Features Tested====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| Login with Facebook
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| View Home Paage/ Latest e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| Share Me (share on Facebook)
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| Coupon Cart
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| Use Me (NFC tag)
 
|-
 
!scope="row"  style=" text-align: center;"| 6
 
| Search Coupon (search by category and location
 
|-
 
!scope="row"  style=" text-align: center;"| 7
 
| Logout of application
 
|-
 
|}
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Results</div>===
 
 
====Download the results here: ====
 
 
 
*[[Media:5B1G_UT3_Raw_Qualitative_Results.xlsx| UT Raw Qualitative Results]] <br>
 
*[[Media:UT3_Results.pdf| UT 3 Compiled Results]]
 
 
====Compiled Problems & Proposed Solutions====
 
 
[[Image: 5B1G_UT3_Problem1.png|580px]]
 
 
[[Image: 5B1G_UT3_Problem2.png|580px]]
 
 
[[Image: 5B1G_UT3_Problem3.png|580px]]
 
 
[[Image: 5B1G_UT3_Problem4.png|580px]]
 
 
[[Image: 5B1G_UT3_Problem5.png|580px]]
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Gallery</div>===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px ; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px solid #ffffff; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT3_1.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT3_2.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT3_3.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT3_4.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT3_5.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT3_6.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT3_7.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT3_8.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT3_9.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT3_13.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT3_10.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT3_11.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT3_14.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT3_16.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT3_18.JPG|280px]]
 
|-
 
|}
 
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">User Test 4 </div>=
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">How We Conducted the UT</div>===
 
 
====Objectives====
 
*To test the functionalities of the both the android application and the web application in a simulated real life environment
 
*To gather feedback from our users with regards to the functionalities of the application and the process flow of the concept
 
 
====Details: ====
 
*Participants: 15 shoppers/ undergraduates
 
*Venue:
 
**Testing venues for Count Me In android app:
 
***SR 2-3 (starting & ending point)
 
***GSR 3-5 (Pedro Shop)
 
***GSR 2-4 (The Basement)
 
**Testing venues for The Retail Admin System:
 
***The Basement Café / The Cathay
 
 
*Date: 11th Mar 2013 (Monday)
 
*Duration: 4 hours (each individual: 20-30mins)
 
 
====Method====
 
The actual application was tested this time using the android device, Samsung Galaxy S III. Each participant was given the [[media: UT4_Android_Instruction_sheet.pdf‎ | Android instructions sheet]] and asked to circle how easy it was to complete each test case.
 
 
The retail admin application was tested with retailers from both The Basement and The Cathay. Each participant was given the [[media: UT4_Web_Instruction_sheet.pdf‎ | Web instructions sheet]] and asked to circle how easy it was to complete each test case.
 
 
====Data collection====
 
Collecting of qualitative metrics
 
* Facilitators will observe how the participants use both the web and mobile application during the testing procedure.
 
*Users will be asked to give remarks for each test case.
 
 
Collecting of quantitative metrics
 
* Upon completion of the UT, the participant will be asked to rate, on a scale of 1 to 5, how easy the task is and to give their feedback on the functionality and the usability of the application.
 
 
====Features Tested for “Count Me In”====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| Login with Facebook
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| View Latest E-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| Share Me
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| Add to Favourites
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| Push notification to view recommended E-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 6
 
| Indoor Navigation
 
|-
 
!scope="row"  style=" text-align: center;"| 7
 
| Receive location-specific push notification & view recommended e-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 8
 
| Use Me
 
|-
 
!scope="row"  style=" text-align: center;"| 9
 
| Bring Me
 
|-
 
!scope="row"  style=" text-align: center;"| 10
 
| Delete E-coupon
 
|-
 
!scope="row"  style=" text-align: center;"| 11
 
| Logout of application
 
|-
 
|}
 
 
====Features Tested for the Retail Admin System====
 
{| class="wikitable" style="text-align: center; height:25px"
 
|+
 
|-
 
! scope="col"  width="50" style="background:#CCCCCC| S/N
 
! scope="col" width="250" style="background:#CCCCCC| Feature
 
|-
 
!scope="row"  style=" text-align: center;"| 1
 
| Login with retailer's username & password
 
|-
 
!scope="row"  style=" text-align: center;"| 2
 
| Upload E-coupon
 
|-
 
!scope="row"  style=" text-align: center;"| 3
 
| View published E-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 4
 
| Delete published E-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 5
 
| View analysis of expired E-coupons
 
|-
 
!scope="row"  style=" text-align: center;"| 11
 
| Logout of application
 
|-
 
|}
 
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Results</div>===
 
 
====Download the results here: ====
 
*[[Media:UT4_Raw_Qualitative_Results.pdf| UT 4 Raw Qualitative Results ]] <br>
 
 
====Compiled Problems & Proposed Solutions====
 
 
*Coming soon!
 
 
===<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBBB', endColorstr='#00BBBB'); background: -webkit-gradient(linear, left top, left bottom, from(#00BBBB), to(#00BBBB)); background: -moz-linear-gradient(top, #00BBBB, #00BBBB); padding:3px; margin-top: 15px; line-height: 1.2em; color:white">Gallery</div>===
 
*Pictures are only of the UT in SMU as the retailers at The Cathay were not confortable having their photo taken
 
{| class="wikitable" style="text-align: center; height:130px"
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px ; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
| style="border-bottom:1px solid #ffffff; border-top:1px solid #ffffff; background:none;border: 1px solid #ffffff" width="5%" | &nbsp;
 
! scope="col" width="100" style="background:none;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff"|
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT4_1.jpg|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT4_2.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT4_3.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT4_7.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT4_8.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G UT4 9.JPG|280px]]
 
|-
 
 
!scope="row"  style=" text-align: center;"|
 
[[Image:5B1G_UT4_10.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image:5B1G_UT4_11.JPG|280px]]
 
| style="border-bottom:1px solid #ffffff; background: #ffffff; color: #FFFFFF; font-weight: bold; padding: 10px 15px 0 15px; font-size: 26px;" valign="top"|
 
|  color: #000000; padding: 0px 4px 0 0px; font-size: 13px;" valign="top" align="center"  |
 
[[image: 5B1G_UT4_12.JPG|280px]]
 
|-
 
|}
 
  
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 25px; line-height: 1.2em; color:white">Android Paper Prototype</div>=
 
=<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#009999'); background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#009999)); background: -moz-linear-gradient(top, #009999, #009999); padding:3px; margin-top: 25px; line-height: 1.2em; color:white">Android Paper Prototype</div>=
Line 821: Line 72:
  
  
===Push notification and view recommended e-coupons===
+
===Push notification and view recommended E-coupons===
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 839: Line 90:
 
|}
 
|}
  
 
+
===Home page and featured E-coupons===
===Home page and featured e-coupons===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 864: Line 114:
 
|}
 
|}
  
 
+
===Share E-coupons on Facebook===
===Share coupons on Facebook===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 883: Line 132:
 
|-
 
|-
 
|}
 
|}
 
  
 
===Bring Me There===
 
===Bring Me There===
Line 898: Line 146:
  
  
===Add e-coupon to coupon cart===
+
===Add E-coupon to coupon cart===
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 910: Line 158:
 
|}
 
|}
  
 
+
===Use E-coupon===
===Use e-coupon===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 931: Line 178:
 
|}
 
|}
  
 
+
===Browse E-coupon by category and location===
===Browse e-coupon by category and location===
 
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 1,022: Line 268:
 
|}
 
|}
  
===Pending e-coupons ===
+
===Pending E-coupons ===
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 1,061: Line 307:
 
|}
 
|}
  
===Published e-coupons===
+
===Published E-coupons===
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 1,081: Line 327:
 
|}
 
|}
  
===Expired e-coupons===
+
===Expired E-coupons===
 
{| class="wikitable" style="text-align: center; height:130px"
 
{| class="wikitable" style="text-align: center; height:130px"
 
|+  
 
|+  
Line 1,124: Line 370:
 
</gallery>
 
</gallery>
  
====Homepage [Pending e-Coupons]====
+
====Homepage [Pending E-coupons]====
 
<gallery widths="700" heights="350">
 
<gallery widths="700" heights="350">
 
Image:5B1G_WebPending.png
 
Image:5B1G_WebPending.png
Line 1,135: Line 381:
 
</gallery>
 
</gallery>
  
====View Published e-Coupon's Analysis====
+
====View Published E-coupon's Analysis====
 
<gallery widths="700" heights="350">
 
<gallery widths="700" heights="350">
 
Image:5B1G_Published.png
 
Image:5B1G_Published.png

Latest revision as of 14:15, 22 April 2013

5B1G Logo.png


Home

Our Team/Sponsors

Project Overview

Project Management

Project Documentation

Usability Documentation

Learning Outcomes


User Tests

Webapp User Tests

Prototypes & Mockups

Android Paper Prototype

Login

   

1 Splash screen.jpg

2 Facebook login.jpg

3 Home page.jpg


Push notification and view recommended E-coupons

   

4 Push notification.jpg

5 Recommended.jpg

Home page and featured E-coupons

     

3 Home page.jpg

7 Coupon detail.jpg

7 Coupon detail2.jpg

Share E-coupons on Facebook

   

8 FB share.jpg

8 FB share2.jpg

Bring Me There

 

9 Bring me there.jpg


Add E-coupon to coupon cart

 

10 Add to coupon cart.jpg

Use E-coupon

   

11 Use me.jpg

11 Use me2.jpg

Browse E-coupon by category and location

       

6 Side menu.jpg

12 Browse coupon.jpg

12 Browse coupon2.jpg

13 Browse coupon3.jpg


Map

   

14 Map.jpg

14 Map2.jpg


Coupon cart

     

15 Coupon cart.jpg

15 Coupon cart2.jpg

15 Coupon cart3.jpg

Web App Paper Prototype

Login

5B1G Webapp Login.jpg

Pending E-coupons

   

5B1G Webapp HomePage.jpg

5B1G Webapp Pending details.jpg

Upload e-coupons

   

5B1G Webapp Upload step 1.jpg

5B1G Webapp Upload step 2.jpg

Published E-coupons

   

5B1G Webapp Published.jpg

5B1G Webapp Published Stats.jpg

Expired E-coupons

   

5B1G Webapp Expired.jpg

5B1G Webapp Expired Stats.jpg

Mock User Interface

Android Mockup

5B1G mobile Mockup version 6.png

Versions

Past Mockup for Android Application earlier versions:

V1
V2
V3
V4
V5

Web Application Mockup

Login

Homepage [Pending E-coupons]

Upload Image

View Published E-coupon's Analysis

Versions

Past Mockup for Web Application earlier versions:

V1
V2
V3

Storyboard 1