Difference between revisions of "IS480 Team wiki: 2012T2 neoPhase Final Quality of Product"
Kxleong.2010 (talk | contribs) (New page: <div align="center"> 450px {|style="background-color:#a23e3e; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" bord...) |
Kxleong.2010 (talk | contribs) |
||
(29 intermediate revisions by 2 users not shown) | |||
Line 77: | Line 77: | ||
!style="text-align: center; background: #ffffff;"|Testing | !style="text-align: center; background: #ffffff;"|Testing | ||
!style="text-align: left; background: #ffffff;"|[[IS480_Team_wiki:_2012T2_neoPhase_User_Testing|User Testing]] | !style="text-align: left; background: #ffffff;"|[[IS480_Team_wiki:_2012T2_neoPhase_User_Testing|User Testing]] | ||
− | |User Testing 1 - | + | |User Testing 1 - 6 |
|- | |- | ||
Line 83: | Line 83: | ||
!style="text-align: center; background: #ffffff;"|Presentation Materials | !style="text-align: center; background: #ffffff;"|Presentation Materials | ||
!style="text-align: left; background: #ffffff;"|[[IS480_Team_wiki:_2012T2_neoPhase_Presentation_Materials|Presentation Slides]] | !style="text-align: left; background: #ffffff;"|[[IS480_Team_wiki:_2012T2_neoPhase_Presentation_Materials|Presentation Slides]] | ||
− | |Slides for Acceptance and | + | |Slides for Acceptance, Midterms and Finals |
|- | |- | ||
Line 109: | Line 109: | ||
[[Image:Neophase mobile.png|center|600px]]<br/><br/> | [[Image:Neophase mobile.png|center|600px]]<br/><br/> | ||
− | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase | + | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase Final Quality of Product#top|Back to Top]]</u></div> |
<br/><br/> | <br/><br/> | ||
Line 122: | Line 122: | ||
Before our midterm presentation, we have completed 3 User Tests in all. 1 was conducted for Web Application and 2 were conducted Mobile Application.<br/><br/> | Before our midterm presentation, we have completed 3 User Tests in all. 1 was conducted for Web Application and 2 were conducted Mobile Application.<br/><br/> | ||
− | '''Click to view in detail''' for each User Testing, or '''Scroll down''' to see the '''Summary of Findings''' for all | + | '''Click to view in detail''' for each User Testing, or '''Scroll down''' to see the '''Summary of Findings''' for all 6 User Tests.<br/><br/> |
{| style="background-color:#ffffff; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"| | {| style="background-color:#ffffff; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"| | ||
Line 169: | Line 169: | ||
! style="background: #FFFFFF;" height="10px" colspan="18"| | ! style="background: #FFFFFF;" height="10px" colspan="18"| | ||
− | |}<br/><br/> | + | |} |
+ | |||
+ | {| style="background-color:#ffffff; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"| | ||
+ | |||
+ | | | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="50px;"| x | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="80px" rowspan="2"| <span style="color:#ffffff"> <font size=5 color=#FFCC00>4</font></span> | ||
+ | ! style="background: #2f2929; color: #9CC5C9; text-align: center; border-top:solid #2f2929" width="450px" height="30px"| <span style="color:#ffffff"> Second User Testing - Web Application</span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="20px;"| x | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="80px" rowspan="2"| <span style="color:#ffffff"> <font size=5 color=#FFCC00>5</font></span> | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="450px"| <span style="color:#ffffff"> Third User Testing - Mobile App (Outdoors) </span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="20px;"| x | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="80px" rowspan="2"| <span style="color:#ffffff"> <font size=5 color=#FFCC00>6</font></span> | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="450px"| <span style="color:#ffffff"> Final User Testing - Mobile & Web </span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="100px" | x | ||
+ | |- | ||
+ | |||
+ | | | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="100px;"| x | ||
+ | ! style="background: #2f2929; color: #9CC5C9; text-align: center; border-top:solid #2f2929" width="500px" height="30px"| <span style="color:#ffffff"> <font size=3>22 Mar 13</font></span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="20px;"| x | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="500px"| <span style="color:#ffffff"><font size=3>22 Mar 13</font> </span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="20px;"| x | ||
+ | ! style="background: #2f2929; color: white; text-align: center; border-top:solid #2f2929" width="500px"| <span style="color:#ffffff"> <font size=3>5 Apr 13</font></span> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="100px" | x | ||
+ | |- | ||
+ | |||
+ | | | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="100px;"| x | ||
+ | ! style="background: #F2F2F2; color: white; text-align: center; border-top:solid #F2F2F2" width="500px" height="30px" colspan="2"| | ||
+ | [[Image:22-Mar-Web.jpg|270px]] | ||
+ | <br/><br/> | ||
+ | <font face= "Britannic Bold" size=6.5 color="#2f2929"> '''[[User Testing 2 for Web Application | View]]''' </font><br/><br/> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="10px;"| x | ||
+ | ! style="background: #F2F2F2; color: white; text-align: center; border-top:solid #F2F2F2" width="500px" colspan="2"| | ||
+ | [[Image:22-Mar-M1.jpg|280px]] | ||
+ | <br/><br/> | ||
+ | <font face= "Britannic Bold" size=6.5 color="#2f2929"> '''[[User Testing 3 for Mobile App (Outdoors) | View]]''' </font><br/><br/> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="10px;"| x | ||
+ | ! style="background: #F2F2F2; color: white; text-align: center; border-top:solid #F2F2F2" width="500px" colspan="2"| | ||
+ | [[Image:Final1.jpg|270px]] | ||
+ | <br/><br/> | ||
+ | <font face= "Britannic Bold" size=6.5 color="#2f2929"> '''[[Final User Testing for Mobile & Web | View]]''' </font><br/><br/> | ||
+ | ! style="background: #FFFFFF; color: #FFFFFF; text-align: center;" width="100px" |x | ||
+ | |- | ||
+ | ! style="background: #FFFFFF;" height="10px" colspan="8"| | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <br/><br/> | ||
===<font face= "Britannic Bold" size=6.5 color="#2f2929"> '''Summary of Findings''' </font><br/><br/>=== | ===<font face= "Britannic Bold" size=6.5 color="#2f2929"> '''Summary of Findings''' </font><br/><br/>=== | ||
Line 228: | Line 279: | ||
|- | |- | ||
+ | |- | ||
+ | !style="text-align: center; background: #ffffff;"|Second Web User Testing | ||
+ | | | ||
+ | *Users are able to create an event more easily than before. | ||
+ | *Most of the issues arose when they were asked to interact with the participants of the event. They found it difficult to find the interface to '''Block Users''' and also how to count the '''number of participants''' at the event. | ||
+ | *95% of users said that they would use this application if they were to organise events, the other 5% were undecided. | ||
+ | *The main reasons why they would use the application were: '''"It was user friendly"''' and '''"It was useful for the event participants"'''. | ||
+ | *18% of users recognised that such an application required a substantial user base before it can be truly useful. | ||
+ | | | ||
+ | *Make blocking of users easier. Allow organiser to block user from the Blurp Feed. | ||
+ | *Design statistics to be easily readable. | ||
+ | *Bug Fixes: Edit Landmarks | ||
+ | | | ||
+ | *"I LOVE THE APP. I plan to use it for my events, especially for our very first international students camp. I think this app will be very useful..." | ||
+ | *"Got potential to add more functions =)" | ||
+ | *"The interface is clean and user-friendly." | ||
+ | |- | ||
+ | |||
+ | |- | ||
+ | !style="text-align: center; background: #ffffff;"|Third Mobile User Testing | ||
+ | | | ||
+ | *While the Live Map was easy to interact with, 20% of users preferred to view a Map Legend instead of clicking around the map. | ||
+ | *Mobile users are impatient creatures. They don't like to wait too long for things to load. | ||
+ | *Recognition is better than recall. For the "Share to Facebook" function, we need to change the interface to suit what people are used to seeing | ||
+ | *89% of users said that they would use this application again. The other 12% were undecided. | ||
+ | *Their main reasons were: "They liked the Live Map", "Easy to learn". | ||
+ | *20% of users felt that this application would be useful for only certain events. | ||
+ | | | ||
+ | *Change the "Share to Facebook" interface. | ||
+ | *Solve the slow connectivity problem. | ||
+ | | | ||
+ | *"...maybe also a list of current events your friends are attending right now instead of just events around your area." | ||
+ | *"Very well done! Can't wait to see it live! However, I am an android user, so a web view or a native android app would be beneficial for me." | ||
+ | *"To have a guide-through (to demo how to use the features) the application for people who first use it." | ||
+ | |- | ||
+ | |||
+ | |- | ||
+ | !style="text-align: center; background: #ffffff;"|Third Web User Testing | ||
+ | | | ||
+ | *Users were able to navigate the map and complete most of the core functions of the application. | ||
+ | *The only issue was the use of the Blurp Map. Users were unfamiliar of the function and its purpose. | ||
+ | *100% of users said that they would use the application again. | ||
+ | | | ||
+ | *Make Blurp Map tab more obvious to users | ||
+ | | | ||
+ | *"It can help me reach more audiences" | ||
+ | *"Easier to organise events" | ||
+ | |- | ||
+ | |||
+ | |- | ||
+ | !style="text-align: center; background: #ffffff;"|Fourth Mobile User Testing | ||
+ | | | ||
+ | *No major issues. There had only been comment on the mood icons not being clear enough. | ||
+ | *100% of users said that would use the application again. | ||
+ | | | ||
+ | *Make mood meter expressions more obvious. | ||
+ | | | ||
+ | *(I like it because)"it's free!" | ||
+ | |- | ||
|} | |} | ||
<br/><br/> | <br/><br/> | ||
− | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase | + | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase Final Quality of Product#top|Back to Top]]</u></div> |
<br/><br/> | <br/><br/> | ||
</font> | </font> | ||
Line 263: | Line 373: | ||
[[Image:ArrowNeo.png|center|50px]]<br/> | [[Image:ArrowNeo.png|center|50px]]<br/> | ||
[[Image:-Organizer- Create New Event - Step 1.PNG|center|400px]] | [[Image:-Organizer- Create New Event - Step 1.PNG|center|400px]] | ||
+ | <br/><br/> | ||
+ | ===<u>'''Manage Landmarks'''</u><br/><br/>=== | ||
+ | In the earlier version, users found it hard to figure out what to for this step. We have added a '''friendly hint''' under the Title to guide users through the drag-and-drop experience. They can now '''edit''' the landmark details and image straight from this view too. <br/><br/> | ||
+ | |||
+ | [[Image:-Organizer- Manage Landmarks.PNG|450px]] | ||
+ | [[Image:ArrowChange.png|80px]] | ||
+ | [[Image: -Organizer- Manage Landmarks (Landmark Details).JPG|500px]]<br/> | ||
+ | <br/><br/> | ||
+ | |||
+ | ===<u>'''View Event Map'''</u><br/><br/>=== | ||
+ | In the new version, organizers can now '''toggle''' between live map and blurp map to see event happenings. There is an '''"Activity Heatmap"''' added to this view as well, where organizers can trace the tracks of their users. The '''Statistics Button''' is removed from this view as all statistics will be collated in the '''Dashboard View'''. <br/><br/> | ||
+ | |||
+ | [[Image:-Organizer- View Event Details.PNG|450px]] | ||
+ | [[Image:ArrowChange.png|80px]] | ||
+ | [[Image: -Organizer- View Event Details.JPG|430px]]<br/> | ||
+ | <br/><br/> | ||
+ | ===<u>'''Organizers' Dashboard'''</u><br/><br/>=== | ||
+ | Previously, this view shows minimal statistics and do not contain much information. Now, this dashboard has '''comprehensive''' statistics and allow organizers to '''filter''' and select the data they want to see. <br/><br/> | ||
+ | |||
+ | [[Image:-Organizer- Event Statistics.PNG|450px]] | ||
+ | [[Image:ArrowChange.png|80px]] | ||
+ | [[Image: -Organizer- BI Dashboard.JPG|450px]]<br/> | ||
+ | <br/><br/> | ||
<br/><br/> | <br/><br/> | ||
− | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase | + | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase Final Quality of Product#top|Back to Top]]</u></div> |
<br/><br/> | <br/><br/> | ||
===<font face= "Britannic Bold" size=5 color="#2f2929"> '''Mobile Application''' </font><br/><br/>=== | ===<font face= "Britannic Bold" size=5 color="#2f2929"> '''Mobile Application''' </font><br/><br/>=== | ||
===<u>'''Search Events'''</u><br/><br/>=== | ===<u>'''Search Events'''</u><br/><br/>=== | ||
− | Our first version for Search event was a list and has not much event details in it. On our second version, we created the '''tab view''', for Search and Favourites event. We also have a '''event image thumbnail''' displayed. we implemented the '''Join''' and "'''Star'''" (Favourites) feature. In our | + | Our first version for Search event was a list and has not much event details in it. On our second version, we created the '''tab view''', for Search and Favourites event. We also have a '''event image thumbnail''' displayed. we implemented the '''Join''' and "'''Star'''" (Favourites) feature. In our second change, we have added a nice border for the event thumbnail, and we have changed the alignment of the event details. The colour of the buttons are also changed to '''match''' the '''overall theme'''. In our current version, users may click on the event or '''arrow''' to see more '''event details''' and event organizers' display picture will change '''dynamically'''.<br/><br/> |
− | [[Image: | + | [[Image:NeophaseSearch.png|border|250px]] |
[[Image:ArrowChange.png|80px]] | [[Image:ArrowChange.png|80px]] | ||
− | [[Image: | + | [[Image: Neophasesearchse.jpeg|border|250px]] |
[[Image:ArrowChange.png|80px]] | [[Image:ArrowChange.png|80px]] | ||
− | [[Image: | + | [[Image: NeophaseMobile.jpg|border|250px]] |
<br/><br/> | <br/><br/> | ||
===<u>'''Post A Blurp!'''</u><br/><br/>=== | ===<u>'''Post A Blurp!'''</u><br/><br/>=== | ||
− | Our first version for Post A Blurp is really '''simple''', but the button was hidden under the keyboard. Hence, we have decided to revamp the UI so that it is '''more user-friendly''' and '''sleeker'''. In the second version, we have added the extra navigation bar for '''mood meter selection''', the '''140 character counter''' and '''Facebook Share''' button. In our | + | Our first version for Post A Blurp is really '''simple''', but the button was hidden under the keyboard. Hence, we have decided to revamp the UI so that it is '''more user-friendly''' and '''sleeker'''. In the second version, we have added the extra navigation bar for '''mood meter selection''', the '''140 character counter''' and '''Facebook Share''' button. In our second change, Facebook share compartment is done, and upon selecting anywhere outside the Facebook Share black area will bring up the keyboard. The Action bar also tells the user which event he is currently in. In our current version, instead of having a drawer and allow users to check share, the icon will just''' turn blue''' when selected to indicate that it will be shared to facebook. <br/><br/> |
[[Image:PostABlurpOld.jpg|border|250px]] | [[Image:PostABlurpOld.jpg|border|250px]] | ||
[[Image:ArrowChange.png|80px]] | [[Image:ArrowChange.png|80px]] | ||
− | [[Image: | + | [[Image: Share on FB.jpg|border|250px]] |
[[Image:ArrowChange.png|80px]] | [[Image:ArrowChange.png|80px]] | ||
− | [[Image: | + | [[Image:NeophaseMobilefb.jpg|border|250px]] |
+ | <br/><br/> | ||
− | </ | + | ===<u>'''Mood Emoticons'''</u><br/><br/>=== |
− | <br/><br/> | + | Our first version for Mood Emoticons, we did not have indications of what they represent for each mood. Users also feedback that the first two faces '''look too similar'''. Hence in our current version, we have '''text label''' to indicate to users the mood that they will be choosing and also the "'''Excited'''" emoticons have changed as well.<br/><br/> |
+ | |||
+ | [[Image:Neophasemood.jpg|border|300px]] | ||
+ | [[Image:ArrowChange.png|80px]] | ||
+ | [[Image: Photo 21-4-13 1 05 45 PM.jpg|border|300px]] | ||
− | |||
+ | <br/><br/> | ||
+ | <div style = "text-align:right"><u>[[IS480 Team wiki: 2012T2 neoPhase Final Quality of Product#top|Back to Top]]</u></div> | ||
+ | <br/><br/> | ||
+ | </font> | ||
+ | <br/><br/> | ||
</div> | </div> |
Latest revision as of 00:36, 22 April 2013
Back to Main Wiki | Progress Summary | Project Management | Development Overview | Quality of Product | Reflections |
Intermediate Deliverables
Out project management style and hence have made many changes over our 6 iterations so far.
The table below provides the links to our works and documentation:
Stage | Specification | Modules |
---|---|---|
Project Management | Meeting Minutes | Iteration 1 to 6 - Team, Supervisor & Mentor Meetings |
Project Metrics | Schedule, Bug, Well-being Metric | |
Requirement Gathering | Market Research | Online survey results |
User Requirement Validation Tests | Gathering feedback from users to understand users' needs | |
Analysis | Use Case | Overall |
Design | Architectural Design | Overall |
Prototypes | Initial Paper Prototype for mobile and web application | |
Testing | User Testing | User Testing 1 - 6 |
Presentation Materials | Presentation Slides | Slides for Acceptance, Midterms and Finals |
Deployment
Our web application for Blurp! is already deployed on a live server.
You can try out our Web Application as an event organizer here!
Username: organizer 1
Password: organizer
Also, our iPhone Mobile Application is also available to be downloaded from Apple AppStore here!
User Testing
Before our midterm presentation, we have completed 3 User Tests in all. 1 was conducted for Web Application and 2 were conducted Mobile Application.
Click to view in detail for each User Testing, or Scroll down to see the Summary of Findings for all 6 User Tests.
x | 1 | First User Testing - Mobile App (Outdoors) | x | 2 | First User Testing - Web Application | x | 3 | Second User Testing - Mobile App (Outdoors) | x | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
x | 29 Jan 13 | x | 5 Feb 13 | x | 5 Feb 13 | x | |||||||||||
x | x | x | x | ||||||||||||||
x | 4 | Second User Testing - Web Application | x | 5 | Third User Testing - Mobile App (Outdoors) | x | 6 | Final User Testing - Mobile & Web | x | |
---|---|---|---|---|---|---|---|---|---|---|
x | 22 Mar 13 | x | 22 Mar 13 | x | 5 Apr 13 | x | ||||
x | x | x | x | |||||||
Summary of Findings
Below describes a general summary of what was the main findings in each user testing, what were the changes made and some of the users' qualitative remarks.
For more details and results, online questionnaires that were used, view the Individual User Testing's links above.
User Testing | Main Findings | Changes Made | User Comments |
---|---|---|---|
First Mobile User Testing |
|
|
|
First Web User Testing |
|
|
|
Second Mobile User Testing |
|
|
|
Second Web User Testing |
|
|
|
Third Mobile User Testing |
|
|
|
Third Web User Testing |
|
|
|
Fourth Mobile User Testing |
|
|
|
User Interface Changes
Web Application
Login
We started out with the first version, with a maroon ribbon banner that is slightly off the top. The logo is then placed at the top. After several discussion, we felt that we could move the ribbon banner up to the top so that there could be more space for content below.
In our current version, we have placed a blurpie with moveable eyes, that will track the mouse cursor movement, just to add in the "fun" factor. On top of that, we added descriptions about what our application can do. We have also added a link to App Store, where users can navigate to the download page of itunes.
Create New Event
We started out in the first version, a "Create New Event" form with hints at the right side of the fields to guide users through this event creation process. In the second change, we have edited the hints such that it is more user-friendly. On our current version, we have included a step-by-step indication bubble on top (Step 1 - Step 3) so that users will be able to see which step they are at now while creating a new event. We have also added the upload image and preview feature.
Manage Landmarks
In the earlier version, users found it hard to figure out what to for this step. We have added a friendly hint under the Title to guide users through the drag-and-drop experience. They can now edit the landmark details and image straight from this view too.
View Event Map
In the new version, organizers can now toggle between live map and blurp map to see event happenings. There is an "Activity Heatmap" added to this view as well, where organizers can trace the tracks of their users. The Statistics Button is removed from this view as all statistics will be collated in the Dashboard View.
Organizers' Dashboard
Previously, this view shows minimal statistics and do not contain much information. Now, this dashboard has comprehensive statistics and allow organizers to filter and select the data they want to see.
Mobile Application
Search Events
Our first version for Search event was a list and has not much event details in it. On our second version, we created the tab view, for Search and Favourites event. We also have a event image thumbnail displayed. we implemented the Join and "Star" (Favourites) feature. In our second change, we have added a nice border for the event thumbnail, and we have changed the alignment of the event details. The colour of the buttons are also changed to match the overall theme. In our current version, users may click on the event or arrow to see more event details and event organizers' display picture will change dynamically.
Post A Blurp!
Our first version for Post A Blurp is really simple, but the button was hidden under the keyboard. Hence, we have decided to revamp the UI so that it is more user-friendly and sleeker. In the second version, we have added the extra navigation bar for mood meter selection, the 140 character counter and Facebook Share button. In our second change, Facebook share compartment is done, and upon selecting anywhere outside the Facebook Share black area will bring up the keyboard. The Action bar also tells the user which event he is currently in. In our current version, instead of having a drawer and allow users to check share, the icon will just turn blue when selected to indicate that it will be shared to facebook.
Mood Emoticons
Our first version for Mood Emoticons, we did not have indications of what they represent for each mood. Users also feedback that the first two faces look too similar. Hence in our current version, we have text label to indicate to users the mood that they will be choosing and also the "Excited" emoticons have changed as well.