Difference between revisions of "IS480 Team wiki: 2016T2 Team Sirius Midterm Wiki"
(40 intermediate revisions by 3 users not shown) | |||
Line 4: | Line 4: | ||
<!--Navbar Start--> | <!--Navbar Start--> | ||
{|style="background-color:#1d4c5d; color:#F5F5F5; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" | | {|style="background-color:#1d4c5d; color:#F5F5F5; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" | | ||
− | | style="padding:0.3em; font-size:100%; background-color:# | + | | style="padding:0.3em; font-size:100%; background-color:#1d4c5d; border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" | |
[[Image:sirius_home_icon.png|30px|link=IS480 Team wiki: 2016T2 Sirius]] | [[Image:sirius_home_icon.png|30px|link=IS480 Team wiki: 2016T2 Sirius]] | ||
[[IS480 Team wiki: 2016T2 Sirius |<font color="#F5F5F5" size=3><b>HOME</b></font>]] | [[IS480 Team wiki: 2016T2 Sirius |<font color="#F5F5F5" size=3><b>HOME</b></font>]] | ||
Line 33: | Line 33: | ||
{| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" | | {| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" | | ||
− | | style="vertical-align:top;width:20%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #1d4c5d; font-family:helvetica"> [[IS480_Team_wiki:_2016T2 Team Sirius Midterm Wiki | <b>Midterm Wiki</b>]] | + | | style="vertical-align:top;width:20%; font color:#45BFAF" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #1d4c5d; font-family:helvetica; color:#45BFAF "> [[IS480_Team_wiki:_2016T2 Team Sirius Midterm Wiki | <b>Midterm Wiki</b>]] |
| style="vertical-align:top;width:15%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #1d4c5d; font-family:helvetica"> [[IS480_Team_wiki:_2016T2 Team Sirius Final Wiki | <b>Final Wiki</b>]] | | style="vertical-align:top;width:15%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #1d4c5d; font-family:helvetica"> [[IS480_Team_wiki:_2016T2 Team Sirius Final Wiki | <b>Final Wiki</b>]] | ||
Line 48: | Line 48: | ||
|- | |- | ||
| [[File:sirius_presentation_icon.png| 100px]] || <b>Midterm Slides</b> <br/> | | [[File:sirius_presentation_icon.png| 100px]] || <b>Midterm Slides</b> <br/> | ||
− | + | View presentation slides: [https://docs.google.com/presentation/d/1AqAbYueVWNnXipdq5joaLw1F4djOCFf6FK0Ntx-cllY/pub?start=false&loop=false&delayms=3000 Team Sirius Midterm Slides] | |
|} | |} | ||
Line 54: | Line 54: | ||
|- | |- | ||
| [[File:sirius_deployment_icon.png| 100px]] || <b>Deployment site</b> <br/> | | [[File:sirius_deployment_icon.png| 100px]] || <b>Deployment site</b> <br/> | ||
− | Visit this link: [http://sirius.lol | + | Visit this link: [http://sirius.lol Sirius AB site] |
|} | |} | ||
Line 95: | Line 95: | ||
! style="bold;background: #1d4c5d;color:white; width:5%; border:1px solid #999" | Action | ! style="bold;background: #1d4c5d;color:white; width:5%; border:1px solid #999" | Action | ||
! style="bold;background: #1d4c5d;color:white; width:8%; border:1px solid #999" | Category | ! style="bold;background: #1d4c5d;color:white; width:8%; border:1px solid #999" | Category | ||
− | ! style="bold;background: #1d4c5d;color:white; width: | + | ! style="bold;background: #1d4c5d;color:white; width:15%; border:1px solid #999" | Feature |
! style="bold;background: #1d4c5d;color:white; width:30%; border:1px solid #999" | Description | ! style="bold;background: #1d4c5d;color:white; width:30%; border:1px solid #999" | Description | ||
− | ! style="bold;background: #1d4c5d;color:white; width: | + | ! style="bold;background: #1d4c5d;color:white; width:40%; border:1px solid #999" | Value to Client |
|- | |- | ||
| style="text-align:center" | 7 | | style="text-align:center" | 7 | ||
Line 139: | Line 139: | ||
<b>Formula:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>Average of accepted stories points of <b>3</b> sprints</i></span><br> | <b>Formula:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>Average of accepted stories points of <b>3</b> sprints</i></span><br> | ||
[[Image:Sirius_team_velocity.png|700px]]<br/> | [[Image:Sirius_team_velocity.png|700px]]<br/> | ||
− | <b>Explanation:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"></span | + | <b>Explanation:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">The average accepted story points is around 20+ points for each sprint.One thing to note is that in sprint 3 it was our submission period for other modules which resulted in few stories being accepted. Another point to note about sprint 4 is that there were no stories put up for acceptance since there were no stories completed in that sprint. |
+ | </span> | ||
<br> | <br> | ||
<h4><u>Sprint Burndown</u></h4> | <h4><u>Sprint Burndown</u></h4> | ||
Line 154: | Line 155: | ||
<br> | <br> | ||
[[Image:Sirius_sprint_8.png|700px]]<br/> | [[Image:Sirius_sprint_8.png|700px]]<br/> | ||
− | <b>Explanation:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">One of the | + | <b>Explanation:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">One of the better performing sprints. All planned bug fixes and stories were completed before User Testing 2. In this sprint, the team also deployed the revamped UI. |
</span><br> | </span><br> | ||
− | |||
− | |||
− | |||
− | |||
===Risks Management=== | ===Risks Management=== | ||
Line 175: | Line 172: | ||
| align=center | Medium | | align=center | Medium | ||
| Start sourcing for users early by sharing it via social media or emailing companies | | Start sourcing for users early by sharing it via social media or emailing companies | ||
+ | |- | ||
+ | | align=center | Technical Risk | ||
+ | | Unable to develop WYSIWYG editor due to its high complexity | ||
+ | | align=center | High | ||
+ | | align=center | Medium | ||
+ | | Active feasibility checks and notify sponsor if there is a need to rescope the function | ||
|} | |} | ||
[https://wiki.smu.edu.sg/is480/IS480_Team_wiki%3A_2016T2_Team_Sirius_Risks#Potential_Risks View our list of potential risks here] | [https://wiki.smu.edu.sg/is480/IS480_Team_wiki%3A_2016T2_Team_Sirius_Risks#Potential_Risks View our list of potential risks here] | ||
+ | <br> | ||
+ | ===Unaccepted Stories of Each Sprint=== | ||
+ | [[Image:sirius_midterm_scrum.png|667px]]<br/> | ||
+ | <b>Explanation:</b> <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">If there are any bugs found at any point in time during the sprint, the bug is logged as a story with 0 points.If the bug impedes progress or prevents the team from delivering a shippable product, it will be prioritised and fixed immediately. If it does not impede progress, it will be prioritised together with the product backlog at the start of the next sprint.</span>([https://wiki.smu.edu.sg/is480/IS480_Team_wiki%3A_2016T2_Team_Sirius_Stories Stories can be found here.])<br> | ||
===Technical Complexity=== | ===Technical Complexity=== | ||
+ | <h4><u>Architectural Diagram</u></h4> | ||
+ | [[Image:sirius_architect_diagram.png|600px|center]] | ||
+ | |||
+ | <h4><u>Snippet Flow</u></h4> | ||
+ | [[Image:Sirius_workflow.png|520px|||bottom|caption]] | ||
+ | [[Image:Sirius_snippet_diagram.png|540px|||Snippet part]] | ||
+ | |||
+ | [[Image:Sirius sinppet flow.png|900px|center|]]<br> | ||
+ | <b>Snippet code:</b> <script src="http://sirius.lol/accounts/snippet?id=2"/><br> | ||
+ | <b>Explanation:</b><span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><br> | ||
+ | 1. Retrieve/generate Unique ID (UID) from browser cookie 1455269119724_0.276202306849882<br> | ||
+ | 2. Retrieve/assign Variations for running Experiments {"16": 32}<br> | ||
+ | 3. Check Experiment target URL http://www.centralclinic.com.sg<br> | ||
+ | 4. Apply Variations to page: <br> | ||
+ | $(".nivo-imageLink > img") | ||
+ | .attr("src", "img/open24hours-red.jpg"); | ||
+ | <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">5. Attach Goal handlers | ||
+ | {"id":34, "name":"Health Screening banner", | ||
+ | "selector":".nivo-imageLink", | ||
+ | "category":"click"} | ||
+ | </span> | ||
+ | |||
<h4><u>1. Experiments Preview</u></h4> | <h4><u>1. Experiments Preview</u></h4> | ||
[[Image:Sirius complexity experiment preview iframe.png|500px]][[Image:Sirius complexity experiment preview iframe 2.png|520px]] | [[Image:Sirius complexity experiment preview iframe.png|500px]][[Image:Sirius complexity experiment preview iframe 2.png|520px]] | ||
Line 267: | Line 296: | ||
===Deployment === | ===Deployment === | ||
− | <b>Deployment site:</b> [http://sirius.lol sirius.lol] (Instruction are [https://drive.google.com/ | + | <b>Deployment site:</b> [http://sirius.lol sirius.lol] (Instruction are [https://drive.google.com/open?id=0Bw4iJNeij-pTN1FJLW4tUlJ1Yjg here])<br> |
− | * | + | *Let us know if you need an account to be created. |
− | |||
===Testing === | ===Testing === | ||
Line 291: | Line 319: | ||
<h4><u>UI Fixes based on User Testing 2</u></h4> | <h4><u>UI Fixes based on User Testing 2</u></h4> | ||
+ | [[Image:Sirius_ut2_login_fixes.png|400px]] | ||
+ | [[Image:Sirius ut2 weightages fixes.png|650px]]<br> | ||
+ | [[Image:Sirius_ut2_results_fixes.png|1050px]] | ||
+ | [[Image:Sirius ut2 edit exp fixes.png|1050px]] | ||
==<div style="background:#1d4c5d; padding: 10px; font-weight: bold; line-height: 1em; text-indent: 10px; border-left: #45BFAF solid 32px; font-size: 18px"><font face="Calibri" color="#F7F7FF"> Reflection </font></div> == | ==<div style="background:#1d4c5d; padding: 10px; font-weight: bold; line-height: 1em; text-indent: 10px; border-left: #45BFAF solid 32px; font-size: 18px"><font face="Calibri" color="#F7F7FF"> Reflection </font></div> == | ||
===Team Reflection=== | ===Team Reflection=== | ||
− | + | <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>The journey so far has been tough but a great learning experience for Team Sirius. We have learnt about each other’s strengths and weaknesses, and worked towards complementing each other, producing quality work. We also saw the value of performing more in-depth research before diving into implementing a particular solution.</i></span> | |
− | |||
− | |||
===Product Owner's Testimonial=== | ===Product Owner's Testimonial=== | ||
<b>Jean:</b><br> | <b>Jean:</b><br> | ||
− | <i>Team Sirius produces good quality of work, and provides regular updates on the progress on the product development. The team is strong in technical, and is willing to explore ways on improving the user experience design on the | + | <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>Team Sirius produces good quality of work, and provides regular updates on the progress on the product development. The team is strong in technical, and is willing to explore ways on improving the user experience design on the |
− | product.</i> | + | product.</i></span> |
=== Individual Reflection === | === Individual Reflection === | ||
− | <b>Alex:</b><br> | + | <b>Alex:</b> |
− | <b>Chiang Fong:</b><br> | + | <br> |
− | <b>Kathy:</b><br> | + | <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>It is not easy dealing with people outside of our team, especially when trying to reach out for real users and convincing them that web AB testing is worth their time.</i></span><br> |
− | <b>Kenny:</b><br> | + | <b>Chiang Fong:</b><br/><span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">I have learnt that software estimation is more difficult than I expected, both in terms of estimating the time and effort required for user stories, as well as how much we can get done in a sprint. |
− | <b>Lai Ho:</b><br> | + | </span><br> |
+ | <b>Kathy:</b> | ||
+ | <br> | ||
+ | <span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>I have learnt to appreciate how scrum and its sprint reviews enable a better change management process. This has helped the team better manage their workload and at the same time deliver value to our sponsors.</i></span><br> | ||
+ | <b>Kenny:</b><br/><span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;"><i>I started off wanting to attain a greater understanding of the Rails platform, but my role as the frontend lead has instead made me appreciate the sheer complexity of interactions between Javascript, CSS and HTML in the modern web browser. The number of things that can be done on the client side just keeps increasing</i></span><br> | ||
+ | <b>Lai Ho:</b><br/><span style="color: #1d4c5d; font-size:14px; font-family:Arial; font-transform:uppercase;">Creating and conducting user testing has challenge me to a higher level that has enhanced my learning and interest in user experience.<></span><br> | ||
<!--Content End--> | <!--Content End--> |
Latest revision as of 11:19, 31 March 2016
Contents
Project Progress Summary
Midterm Slides View presentation slides: Team Sirius Midterm Slides |
Deployment site Visit this link: Sirius AB site |
Deployment Progress
- Current sprint: Sprint 10
- Sprint period: 18 February 2016 to 3 March 2016
- Major milestone: Midterm Presentation
- Features involved: Visual Variation Editor & Mobile Device Experiments
Project Highlights
- Highlight 1: Added Admin Module and Mobile Device Experiments and dropped 2 modules (Multipage experiments and Multivariable experiments)
- Highlight 2: Implemented new user interface of Sirius AB
- Highlight 3: Implemented visual goal selection
- Highlight 4: Conducted user test 2 on 4 February at IDA Sandcrawler with 4 developers
Project Management
Project Status
Team Sirius is confident in delivering the project to our sponsor.
Planned vs Actual Scope
Planned | Actual |
---|---|
Major changes made
Sprint | Module | Action | Category | Feature | Description | Value to Client |
---|---|---|---|---|---|---|
7 | Mobile Device Experiments Module | Added | Secondary |
|
This module allows users to view a preview of their mobile sites when creating/editing experiments. It also ensures that existing goals work on mobile sites. | Some organisations have mobile sites that they would like to test. With this module, we ensure that users can not only run experiments on desktop sites, but also mobile sites. |
6 | Admin Module | Added | Secondary |
|
Team met up and re-prioritised the remaining modules as of Sprint 6. The team agreed to bring multivariable experiments and multipage experiments to good-to-have and visual variation editor to secondary scope since our sponsor mentioned that it has higher priority as compared to the other two modules. Sponsor also mentioned that they want to have an admin module that allow admin to manage users accounts. | Shifting visual variation editor to the secondary scope means that this is of a higher priority, and our platform can be used by non-developers. We only risk dropping modules that are of a lower priority to our client. The addition of the Admin Modules allows greater control for the client – especially the fact that now only admins can create new user accounts. |
Click here for more on changes made to scope
Planned vs Actual Project Schedule
Project Metrics
Team Velocity
Formula: Average of accepted stories points of 3 sprints
Explanation: The average accepted story points is around 20+ points for each sprint.One thing to note is that in sprint 3 it was our submission period for other modules which resulted in few stories being accepted. Another point to note about sprint 4 is that there were no stories put up for acceptance since there were no stories completed in that sprint.
Sprint Burndown
Formula:
- Planned: Total planned story points over number of days in a sprint
- Actual: Actual story points completed each day in a sprint
Explanation: The team did not complete any story points for this sprint as this sprint falls in the exam period. More importantly, the stories that we took up were more complex and required more research to be done. Although no story points were completed, the team did work on some of the stories in terms of research and experimentation.
Explanation: The team did not manage to complete two stories – a 1-point story and a 3-point story. There were unforeseen complexities in some stories that caused us to take longer to complete, one example was the Visual Goal Selection story, where it expanded from an estimated 5 points to 8 points.
Explanation: One of the better performing sprints. All planned bug fixes and stories were completed before User Testing 2. In this sprint, the team also deployed the revamped UI.
Risks Management
Risk Type | Risk Event | Likelihood | Impact | Mitigation |
---|---|---|---|---|
Resource Risk | Unable to find users to test our application | Medium | Medium | Start sourcing for users early by sharing it via social media or emailing companies |
Technical Risk | Unable to develop WYSIWYG editor due to its high complexity | High | Medium | Active feasibility checks and notify sponsor if there is a need to rescope the function |
View our list of potential risks here
Unaccepted Stories of Each Sprint
Explanation: If there are any bugs found at any point in time during the sprint, the bug is logged as a story with 0 points.If the bug impedes progress or prevents the team from delivering a shippable product, it will be prioritised and fixed immediately. If it does not impede progress, it will be prioritised together with the product backlog at the start of the next sprint.(Stories can be found here.)
Technical Complexity
Architectural Diagram
Snippet Flow
Snippet code: <script src="http://sirius.lol/accounts/snippet?id=2"/>
Explanation:
1. Retrieve/generate Unique ID (UID) from browser cookie 1455269119724_0.276202306849882
2. Retrieve/assign Variations for running Experiments {"16": 32}
3. Check Experiment target URL http://www.centralclinic.com.sg
4. Apply Variations to page:
$(".nivo-imageLink > img") .attr("src", "img/open24hours-red.jpg");
5. Attach Goal handlers
{"id":34, "name":"Health Screening banner", "selector":".nivo-imageLink", "category":"click"}
1. Experiments Preview
Explanation:As part of the create/edit experiment flow, we needed to let users have a ‘live’ preview of what effect their variation jQuery code has on the target page, so that they can confirm that their code is making the correct changes to the page.
The variation preview is created by embedding iframes to load the target page, and then running the user’s jQuery code on the iframe to make the changes. What actually happens is that the target page can be displayed, but because they are from different origins (where origin is defined as the combination of scheme + domain name + port), the experiment page’s JavaScript code is not allowed to read or update what’s inside the IFrame, so the preview doesn’t work!
This is known as the Same-Origin Policy that browsers enforce for security reasons. Imagine if you are visiting some compromised or malicious website, which has a hidden iframe that loads GMail, which you happen to be logged into – if the website’s JavaScript code is able to interact with the iframe, it will be able to read off all your emails, delete everything, or even send emails to the bank on your behalf, instructing them to wire all your money to the Bahamas!
In order to make the parent page as well as the iframe have the same origin, we proxied the target URL through a special route in our application. However, this breaks all relative URLs on the page, so things like images, CSS, and JavaScript files can’t be loaded. To fix this, we had to inspect the proxied HTML and insert a <base> tag with the target page URL at the appropriate place within the page, which instructs the browser to resolve all the relative URLs against the target site directly.
Even despite all this work to deal with the Same-Origin Policy, there still are lingering issues with webfonts referenced in CSS stylesheets not being loaded. While the <base> tag is correctly rewriting the webfonts’ URLs, browsers require the webfont’s server to explicitly permit this cross-origin access. While the webfont services like Typekit or Google Fonts are setup to instruct the browser to permit all origins, websites that self-host their webfonts typically do not have this setup.
2. Visual Goal Selection
Explanation:Another feature in the create/edit experiment flow is the ability to allow users to interactively select the elements they wish to be included in their click goals, as opposed to having to come up with the CSS selectors themselves.
We found the open-source tool SelectorGadget that does something similar to this, but as it is a bookmarklet, it was entirely written on the assumption that it was operating on the main window/document context. However, we needed it to operate on the particular iframe that contains the preview. We had to take the whole library apart to understand how it worked, and then rewrite significant parts of it to allow injecting the desired window/document context in at runtime. We also had to make changes to it to allow deeper integration into our UI, instead of using the default overlay bar.
Quality of Project
Immediate Deliverables
Stage | Specification | Modules |
Project Management | Meeting Minutes | Internal, Supervisor & Sponsor Meeting Minutes |
Project Schedule | Project Schedule | |
Metrics | Project Metrics | |
Risk Management | Risk Management | |
Requirements | Project Scope | Project Scope |
User Stories | User Stories | |
Analysis | Persona and Scenario | Persona & Scenario |
Market Research | Market Research | |
Architectural Design | Architectural Design | |
Design | Prototypes | Mid & High Fidelity Prototypes |
Testing | User Test Plan & Results | User Test Plan & Results |
Deployment
Deployment site: sirius.lol (Instruction are here)
- Let us know if you need an account to be created.
Testing
User Testing 1
Venue: IDA
Date: 30 Oct 2015, Friday
Time: 3.00pm
Duration: ~25 minutes
Number of Participant(s): 2
User Test: Instuction here
User Test Results: Click here to view
User Testing 2
Venue: IDA
Date: 4 Feb 2016, Thursday
Time: 9.30am
Duration: ~45 minutes
Number of Participant(s): 4
User Test: Instuction here
User Test Results: Click here to view
UI Fixes based on User Testing 2
Reflection
Team Reflection
The journey so far has been tough but a great learning experience for Team Sirius. We have learnt about each other’s strengths and weaknesses, and worked towards complementing each other, producing quality work. We also saw the value of performing more in-depth research before diving into implementing a particular solution.
Product Owner's Testimonial
Jean:
Team Sirius produces good quality of work, and provides regular updates on the progress on the product development. The team is strong in technical, and is willing to explore ways on improving the user experience design on the
product.
Individual Reflection
Alex:
It is not easy dealing with people outside of our team, especially when trying to reach out for real users and convincing them that web AB testing is worth their time.
Chiang Fong:
I have learnt that software estimation is more difficult than I expected, both in terms of estimating the time and effort required for user stories, as well as how much we can get done in a sprint.
Kathy:
I have learnt to appreciate how scrum and its sprint reviews enable a better change management process. This has helped the team better manage their workload and at the same time deliver value to our sponsors.
Kenny:
I started off wanting to attain a greater understanding of the Rails platform, but my role as the frontend lead has instead made me appreciate the sheer complexity of interactions between Javascript, CSS and HTML in the modern web browser. The number of things that can be done on the client side just keeps increasing
Lai Ho:
Creating and conducting user testing has challenge me to a higher level that has enhanced my learning and interest in user experience.<>