IS480 Team wiki: 2010T1 Kumbaya
- 1 Team Kumbaya
- 2 Project Summary (Project Simama)
- 3 Project Management
- 4 Project Reflections
- 5 Project Deliverables
- 5.1 Artifacts
- 5.2 Artifact Quality
- Tomy Jaya
- Wai Phyo Kyaw
- Tan Eu Jeng
- Shitij Nigam
- Aung Kyaw
- Chris Boesch
- Meraj Huda
Public Relations Officer (Contact Person)
- Michael Switow
ONE (SINGAPORE) Co-founder
Project Summary (Project Simama)
The team initially developed a prototype website, which was ultimately transferred to the actual server on a beta URL for live deployment. These may be found here as follows:-
- Prototype website (deployed on team’s server): http://www.palotetote.com/fyp/
- Beta Website (deployed on client’s server): http://beta.onesingapore.org
Current Stage : 3.4 (refer to Project Schedule)
About the Project
The following provides an overall summary of the project, the client involved, the problem faced by the client, and how our team aims to fill the gap and solve the problem through this project.
ONE (SINGAPORE) is a society dedicated to raising public awareness in taking concrete actions to make poverty history. It is committed to supporting projects across the region linked to the Millennium Development Goals (MDG).
ONE (SINGAPORE)’s website is its primary marketing tool to achieve its objective of raising public awareness. However, since its inception, the website, primarily due to lack of resources, has been underutilized and under maintained, and has not been borne to its full capacity.
Being one of the major factors in the unsuccessfulness of the website, our project thus aims to solve this problem by up hauling the website into a medium which not only pushes information into the audience, but acts as a medium of pulling in masses and allowing more information dissemination, while concurrently ensuring that its core features are simple to use and easy to maintain.
Identifying the reasons for the problem
Further research and interaction with the client in the first phase of our project facilitated the direction of our project by helping us identify the underlying reasons behind the problems faced by ONE (SINGAPORE). The following provide a brief summary of the same:-
- A lack of seamlessness and content organization
The contents of the website are a prime source for ONE (SINGAPORE) to propagate its content. However, any information contained in the content is scattered throughout the website without specific structure and direction, making it even more difficult for users to navigate through the website and to source information more efficiently. Moreover, broken links on the website make it even more tedious in finding relevant information pertaining to ONE (SINGAPORE)’s vision, goals, projects and events, thus adding to the problem.
- Broken Functionalities
The core functionalities of the website, such as membership towards ONE (SINGAPORE), the regular newsletter updates sent to subscribers regarding their events, and their online store, are dominant features in providing the majority of interaction to the audience of the website, making them vital to its basic functioning. However, these functionalities are, to a large part, unaccounted for, hard to maintain, or not completely functioning, thus making them a problem core to the project, and the primary requirement demanded by the client.
- Lack of mobile friendliness
A significant portion of ONE (SINGAPORE) target audience is the youth population of Singapore, which they feel are an apt source of volunteerism and propagation of further awareness towards their cause, whom they feel they can reach better through the mobile medium. This naturally demands a mobile-optimized version of their website, specific to today’s popular handheld/mobile devices prominent amongst the Singaporean youth in their opinion. (e.g. iPhone, Android-based phone, Windows Mobile Phone, and Blackberry).
- Website’s Paradigm
ONE (SINGAPORE)’s website has employed a traditional paradigm that ‘pushes’ out information rather than ‘pulling’ in people. However, the employment of existing social media tools can be used to tap into a massive audience and generate further awareness to their cause, thus making it one of the most important goals of this project.
The following points highlight the overarching targets of the project
Client-defined Project Targets
- Awareness Creation
To create a one-stop unique portal to let the people of Singapore know about the ongoings on the issue of poverty as a millennium development goal, in order to provide the general public with a platform to find out more information about what the world did recently, in the last week, and in the last month, to fight poverty.
- Becoming ‘Glocal’
To be able to present Global issues with a localized flavor as much as possible through the medium of the website
Team-defined Project Targets
- Creating ease of maintenance
To simplify maintenance of the website while adding additional features and to automate content as much as possible in order to minimize the amount of time and resources spent on keeping the website up to date
- Developing and utilizing newer mediums of creating awareness
To create an increased awareness amongst the public regarding poverty, measurable by increased web traffic and interaction with the contents of the websites, to be achieved and measured through social media
- Developing a simplified user interface
To implement a more user-friendly interface for all users, to be achieved primarily through reorganization of its website, its features and its content
- Developing an interactive, engaging, and live-deployed portal which can improve traffic
To include more features and move the website from a stale editorial-based content to a more interactive and engaging user experience
The following briefly describes a list of major highlights of the project:-
- Conflicts arising due to a number of plugins being used
Our team was initially under the impression that registered Wordpress plugins are well-tested and hence will not create integration issues when multiple plugins are used. However, during the development phase of the independent aggregator function (to be described later) on top of the Wordpress shell, the team encountered significant conflicts in running website scripts and functionalities. Moreover, the team took 3-4 weeks to learn the independent APIs necessary for the Aggregator function, causing the 5th and 6th iteration of the project to be significantly delayed. This will be discussed in more detailed later in the “Issues Encountered” section of this report.
- Unexpected Client Absence
During the week of actual beta-deployment of the website to the client’s server, our point of contact had to travel abroad for an emergency family issue. This happened in week 5, and created delays in actual deployment of the website. The client is expected to be back on 10th of October (Week 9).
- Changing Requirements from the client
Throughout the course of developing the project, discussion with our clients led to the dropping of some initially proposed functionalities, specifically independent mobile application development and implementation of google analytics, as well as addition of new features to the project, which will be discussed in more detailed later in the “Requirement Changes” section of this report.
Project Requirement Changes
The following highlight the high-level changes in the project requirements, and their impact on the project:
|Requirement Change||Reason||Change Source||Date||Schedule Impact||Status|
|Dropping of Google Analytics functionality||Lack of significant traffic which can substantiate analytics results. This means the lack of value addition towards client’s requirements.||Client decided to drop||30th Aug||Positive||N/A|
|Dropping of dedicated mobile application development||Time and resource constraints to learn the development platform and actually building the app||Team decided to drop||7th Sep||Positive||N/A|
|Addition of Geolocation Integration with Twitter, Google News, Flickr API||Added to news aggregator for better interactivity||Team decided to add||14th Sep||This addition of scope has caused 15 days delay in iteration 5||Completed|
|Enhancements pertaining to admin’s ease-of-use features||Added in order to fulfill requirement changes (e.g. exporting of online user database contents to csv)||Client decided to add||2nd Aug||Added in iteration 3 and caused no delay||Completed|
|Dropping of Store and Membership subscription feature in mobile version||The layout of store in mobile version doesn't integrate well, Paypal transaction on mobile is still uncommon and security issues may exist||Team decided to drop||12nd November||Positive||N/A|
|Adding of Analytics functionality||Supervisor recommended that analytics are useful for finding ways to improve the project in the future||Team decided to add||9th Nov||Added in iteration 7 and caused no delay||Completed|
Other Highlights & Team Member Workload Distribution
|New website design and layout (CSS)||Done||1||Shitij Nigam|
|Wiki Management||Done||1||Aung Kyaw|
|Members registration (with payPal integration)||Done||1||Tomy Jaya|
|Membership Management (export to csv)||Done||1||Tomy Jaya|
|Advanced Search||Done||1||WAI Phyo Kyaw|
|E-commerce Shopping Cart for merchandise (with payPal integration)||Done||1||Aung Kyaw|
|Automatic newsletter updates||Done||1||Tan Eu Jeng|
|Event Management Updates||Done||1||Tan Eu Jeng|
|Social Media Integration||Done||1||Shitij Nigam, Tomy Jaya, Aung Kyaw, Tan Eu Jeng, Wai Phyo Kyaw|
|News Aggregator||Done||1||WAI Phyo Kyaw, Shitij Nigam, Aung Kyaw, Tan Eu Jeng, Tomy Jaya; scope addition: display of news using fancy box and Twitter, Google News, Flickr and Map integration|
|Manage Homepage||Done||1||Wai Phyo Kyaw, Tomy Jaya|
|Mobile-friendly version of the site||Done||1||Tan Eu Jeng, Aung Kyaw|
|Analytics||Done||1||Wai Phyo Kyaw, Shitij Nigam|
|GeoPollster||In progress||1||Tan Eu Jeng, Shitij Nigam|
Content Coordination Issues
Client’s unexpected absence during planned formal deployment date caused issues in coordinating information on the website
- Minor delay in Client’s acceptance and approval of beta deployment caused a delay in actual deployment date on the client’s server
- Actual remote ftp porting for deployment took more time than expected due to an unexpected rise in the size of the web application to more than 100mb
- Porting of prototype to actual deployment website required more configuration changes than expected (e.g. database connection changes, social media integration, URL redirection changes etc.)
Issues in implementing unfamiliar API
The team took approximately 3-4 weeks to familiarize themselves with and concurrently implement all of the following APIs for the Aggregator feature:-
- SimplePie API for aggregating feeds (RSS)
- Twitter with Bing Maps API integration for better interactivity of the “News aggregator” function
- Google Maps API mashup with Flickr, Twitter, Google News, Yahoo Pipes, and RSS to GeoRSS parser
Content Porting and Migration
Team took more time than anticipated to manually migrate information from the original website, partially because more content was being perpetually added to the original ONE (SINGAPORE) website during the process as well, creating additional delay in ensuring a quality check on the information being ported.
Implementation of “Google analytics” as a proposed additional feature was dropped as the present website does not incur enough traffic to allow extensive use and exploitation of analytics. However, this may be reconsidered after complete implementation of the accompanying Social Media campaigns as part of the Social Media integration. At last, the team decided to implement this feature back to study traffic in the beta website and point out possible improvements for the client in the future.
The News Aggregator function was further enhanced with the addition of a Google/Bing Maps integration in order to create a greater “pull” factor in the news aggregator function and add elements of geolocation integration in order to provide more relevance to the content.
- Accommodating and Supportive to team members
- Effectively utilize the power of Social Media
- Implementation of Geolocation greatly enhances the visual interactivity of a website with its users
- Integration of multiple web api's in order to handle large amounts of information while ensuring non-redundancy in website and server efficiencies, primarily through multiple code-optimization iterations
PROJECT SOFTWARE PROCESS – USE CASE DRIVEN ITERATIVE DEVELOPMENT
Our team implemented a use-case driven iterative development. This means that our iterations period are not time-based (e.g. bi-weekly). Instead, we group similar use-cases into one iteration and build on the every iteration to incrementally add use-cases or features to the web application.
Download Actual & Planned Project Schedule (Microsoft Project files with Gantt Chart) Here
Our team experienced a total delays of 23 days from the scheduled plan in Iteration 7. Below are the reasons:
1. New version of aggregator to leverage the power of social media
- Custom-coded RSS parser for faster load-time
- Facebook API integration
- Google Maps mashup with Flickr, Twitter, and Google News
2. Mobilization delay
- Due to time spent learning and exploring possible technologies (jQTouch) and emulators (e.g. Android & Blackberry Torch SDK)
- At last, the team decided to stick with WPTouch and did a major revamp on homepage for more aesthetic appeal
3. Last minute requirement changes
- There were numerous design changes and features adjustment demanded by the client. For example, the client asked for a one-stop page to flexibly change the layout and organization of the homepage (e.g. change categories order and featured video & category)
Here are what our team did to handle the delay:
- We made use of 21 days buffer. This signifies the importance of buffer in any project plan.
- Squeezed-in time for Poster
- Documentation and handover took less time, because:
- No comprehensive handover needed due to
- Client’s trust to allow live beta deployment on ONE(SINGAPORE)’s server
- Admin access to social media account (e.g. Facebook)
- Client’s incremental feedback session accompanied with explanations on feature usage
- User manual to be passed on to client at the end of the project.
Schedule metric is used to track the progress of project and increase the efficiency of schedule planning. A comparison is made between the planned and actual project schedule. From the comparison, the number of days delay/ahead of schedule can be extracted based on iteration. The following graph shows the number of days delay/ahead of schedule.
Based on the number of days delay/ahead of the schedule, actions will be performed according to the following action plans.
|1 - 3 days||4 - 7 days||7 days and above|
|Delay||Extend Meeting time to cover all functionalities||Add more days/hours to specific task delayed in project schedule||Consider to re-scope project|
|Gain||Keep as buffer time||Reduce days/hours to specific task in the project schedule||Shift project schedule forward|
Bug metric is used to improve the quality of functionalities. The bug “value” will be tracked after every iteration’s completion. Bug “value” will be assigned according to the severity of the bug according to the table below.
|UI Error||1||Minor CSS alignment issue|
|Implementation Error||2||CAPTCHA doesn’t appear in the contact form|
|Logic Error||3||Fatal database connection error when exporting CSV|
|Porting Error||1||“Permalink” still pointing to prototype server|
|Bug Value||Action Taken|
|1 - 3 points||Bugs recorded in excel sheet, scheduled for perpetual removal|
|4 - 8 points||A Bug Squashing day will be held at the end of this current iteration.|
|8 points||Project member who reports the bug(s) that hits the 8 pt mark will contact PM to conduct a bug squashing day to eradicate as much bugs possible.|
Click to download Complete Bug Metric here.
Click to download Meeting Minutes.
- Live Deployment risk: What if the new web application doesn’t work in the client’s server
Mitigation Strategy: to anticipate any server porting error, deploy a beta version on the client’s web-server first, then configure its DNS to be beta.onesingapore.org without erasing the original website
- Lack of client interaction risk: What if the intermediary client were to be unavailable?
Mitigation Strategy: Liase with tertiary client contacts. In this case, Mr. Michael Switow from ONE (SINGAPORE) has been replying our queries regarding the website porting when Mr. Meraj Huda, our primary point of contact, was overseas.
- Misinterpretation of client’s requirements Risk: What if our solutions are misaligned to client’s expectations?
Mitigation Strategy: Show client prototype before going into full deployment.
- Changing Business Requirements Risk: What if our client’s decide to drop or add functionalities?
Mitigation Strategy: develop using Iterative development process and increase client’s participation (via email as well as face-to-face meeting)
- Lack of expertise Risk: What if our we are not familiar with the technology to develop the solution?
Mitigation Strategy: Research extensively and learn from a variety of sources, assign specialized member to learn the API in depth (e.g. Wai in SimplePie API and Shitij in FancyBox library)
Though arduous, Wordpress framework can be altered via back-end using PhP to build some of the features and customize most of the solutions in this project. Hence, the risk of “WordPress CMS is a close system which has limitations” is removed.
Resource and Reference
- Training on Wordpress CMS Development:'
- Wordpress Tutorials(http://www.wp-tutorials.org/)
- Collaboration/Communication Tools:
- Subversion Repository (internal)
- Wiki (with supervisors & Client)
- Software Required:
- Hardware Required:
- Windows PCs
- Gadgets Required (for Mobilization):
- 1 x iPhone
- 1 x BlackBerry
- 1 x Windows Mobile
- 1 x Android phone
Team Reflections And Learning Outcomes
Technical, or ‘hard’ skills
- PHP/MySQL administration for multiple live deployments
The beta deployment phase of the project was certainly an eye opener for the team in being able to manage actual deployment on the client’s server while constantly maintaining their existing information and content
- Integration of multiple API
The integration of multiple API in order to be able to create the news aggregator function, while ensuring minimal loading time and minimization of code for the same definitely tested the team’s skills in being able to implement newer, less tested open-source codes on a web application.
- Project & Time Management skills
Coping with unexpected project delays
Managing project through hectic school term schedule through prioritization and scheduling
- Client Collaboration skills
Understanding problem domain, a business of philanthropy
Working with real clients and handling communication issues
Aligning solution to meet client needs
- Scope Change Management skills
Managing drastic requirement changes
- Maintainability and Usability
Development has to take Maintainability and Usability into account rather than just completing the function
Project schedule should have been planned by taking into account of more factors and constraints. If so, the delay in the iteration could be mitigated. Moreover, scope could have been managed well by considering time constraints more accurately.
I am glad that I gain more comprehensive understanding in technical skills such as PHP, facebook API, geolocation are picked up as well. Furthermore, the interactions with client also equip me with the method to interact with clients, and understanding the needs and requirements of clients as well. Moreover, participation in this meaningful project to fight extreme poverty inspires me a lot about the social issues and I believe our project can effectively help One (Singapore) to eradicate extreme poverty by raising awareness of more people.
The Project requirements should have been better defined. The initial planning process wasn’t charted out in an apt manner, making it hard to initially channelize the direction of the project. However, subsequent interactions and feedback with the client, while primarily over email, helped fine-tune the vision, objectives, and goals of our project, something which we can definitely take away from the project.
The project was exhilarating near the end, to say the least, when the team was at it's creative and productive best, and at which point I really saw it get into a single cohesive unit which worked towards a singular goal of finishing the project in the best possible manner. That, in my opinion, was the biggest takeaway of the project- the opportunity to work with individuals of such amazing caliber and determination.
Tan Eu Jeng
Project planning should have been more thorough, and deliverables must always be met to the best of the client’s expectations. As such, while the use of plugins was meant to ease the introduction of new features of the website, other problems such as integration with the core wordpress shell and its subsequent customization and code rewriting caused conflicts to occur rather frequently. Hence, even though some of the applications were tried and tested, but when actually implemented and integrated with each other, should always be carefully tested before actual deployment, a core takeaway for future projects and something which can be kept in mind while working with the emerging and newer forms of web applications, such as Facebook API, Twitter API, Maps, Geolocation etc.
The IS480 FYP course has been a very enriching journey for me, not to mention our group was able to contribute to a greater cause. Skills which were taught in classes like OOAD helped equip and prepare us for scenarios such as last minute requirement changes. Along the way, we acquire new skills in leveraging on various technologies such as social media integration, Google Analytics, how to create a CMS portals fit for use by our client as well as better communication with real world clients. Hopefully, with our project, we will be able to make an impact in the fight against extreme poverty.
Our team’s face-to-face interaction with client should have been more frequent to ensure proper alignment of our solution to the client’s needs. Unfortunately, client’s busy schedule was a big hindrance to this, and contributed towards creating a slight lack of direction in the project in its earlier phase. However, the News Aggregator” function of our project is definitely a feature which excites me the most. Integration with Twitter/Bing Map makes this feature hip and interactive and perfectly in line with ONE (SINGAPORE)’s goals of being able to reach out to a younger audience in order to create more awareness on poverty-related issues and the role of the people of Singapore.
I’m glad that towards the end of the project, our interaction with client greatly improved both in terms of quality and quantity. We had more face-to-face meetings to discuss about our project progress and more ideas and feedback from improvements were generated and exchanged. In that respect, I’m sure the quality of our solution got better and more aligned to the client’s needs. In addition, I learned myriad skills from this project, ranging from picking up new technical skills/API on-the-go to managing client’s expectations (i.e. negotiating requirements with the client). Lastly, I hope that our aggregator/social media initiative can increase the site’s visitors, help ONE(SINGAPORE)’s noble campaign, and ultimately, make this world a better place.
Wai Phyo Kyaw
It is always better to have chosen a project that you are passionate about. However, in this case, the team had to work extra hard in order to turn an ordinary project into something more than ordinary and something which they were passionate about; however, this brainstorming phase took a lot more time than anticipated, something which definitely needs to be taken into account while managing future projects.
I believe the final year project with ONE(SINGAPORE) made us understand more about how technology is vital in transforming the way we spread information and the way we inspire people towards a good change for society. Of course, we learned new exciting technical skills such as creating social media mashups, geolocation tools, traffic analytics, and user-centric comprehensive content management systems. But nothing beats the overall process of working and learning from an enthusiastic client, whose ultimate goal is to drive better awareness and initiatives towards poverty in Singapore. At the end of the project, we learned how the right technologies can bring tremendous value to the community. This comprehensive experience and knowledge is invaluable for us.
Use Case Diagram
Use Case Descriptions and Technologies Used
One of our project objectives concerning ease of use was to create an easy administrative dashboard. Our client was already using Wordpress CMS engine for the old website, and one of their requirements was to have our solution built upon the same Wordpress CMS engine so as to have the administrative costs of switching over minimized (the need to learn how to use the dashboard). Therefore, whenever possible, our team implemented available wordpress core function as well as plugins to meet the client’s requirements. In the event that no plugins were able to provide the necessary support, self-coded php modules were extended to the solution and integrated to the main dashboard seamlessly. Here are our use case descriptions and technologies used to achieve the use-case:
- Login/Logout: Admin and Users Log in/ Log out using username and password.
Technology used: Wordpress default “Users” feature
- Manage Membership: Manage the members and export members’ information to csv file.
Technology used: Wordpress default “Users” feature, Wordpress “s2member” plugin, and self-coded php module (integrated to main dashboard) to extract Wordpress database data, organize the tables, and export it into csv format.
- Register: register to as ONE (SINGAPORE) member by paying though PayPal
Technology used: Wordpress “s2member” plugin with heavy PayPal integration customization
- Manage Social Media Content: Manage the contents to be posted to social media channels via wordpress.
Technologies used: Combination of Wordpress “ShareThis” and “Facebook Like” plugin with minor CSS customization, “NetworkedBlogs” Facebook application to pull blog posts automatically.
- Post Newsletters: Post the newsletter in wordpress and the posted newsletter will be automatically distributed to subscribers
Technologies used: Wordpress “Newsletter” plugin
- Post Events: Post the event’s details with geolocation
Technologies used: Wordpress “Events” plugin
- Manage Webstore: Manage the products, prices, categories and promotions for webstore
Technologies used: Wordpress “Store” plugin with heavy PayPal integration customization
- Manage News Aggregator: Manage the sources of news to be shown in the news aggregator
Technologies used: self-coded php/mySQL module (integrated to main dashboard) to store/modify news RSS feeds URLs and retrieve them when needed.
- Check Broken Links: Check the broken links in the website to ensure all the links work
Technologies used: Wordpress “Broken Links Checker” plugin
- Buy Merchandises: Buy the marchandises sold on webstore with paypal accounts or credit cards
Technologies used: Wordpress “Store” plugin with heavy PayPal integration customization
- Provide Feedback: Provide feedbacks to admins via customized “Contact Us” form
Technologies used: Wordpress “Contact Form 7” plugin with additional CAPTCHA integration to prevent SPAM
- Subscribe Newsletter: Subscribe to automatically receive newsletters whenever the newsletters are posted
Technologies used: Wordpress “Newsletter” plugin
- Search Content: Search for the contents of the site with many filtering options
Technologies used: Combination of Wordpress “Search Everything” and “Advanced Search” “Newsletter” plugin
- View News Aggregator: View all the aggregated news on a single page with a pop-up box showing the news without having to go to the sources. View flickr Geotag photos, tweets and Google News on a single GoogleMap
- Manage Homepage: Manage the layout of homepage through the WordPress Dashboard
Technologies used: Self-coded php form to manage layout of homepage
- Share in Social Media Channels: Share and Like interesting posts and pages in Facebook
Technologies used: Facebook API
Mobile Version Screen Shots
Touch-based phones such as Iphone, Android, Blackberry and Window will display the same mobile interface of website.
Belows are the screen shots of Mobile version in Iphone.
Belows are the screen shots of Mobile version in Android Phone.
Belows are the screen shots of Mobile version in Blackberry Phone.
Belows are the screen shots of Mobile version in Window 7 Phone.
The method of testing used in this project is Regression. UAT is conducted according to the test plans which can be downloaded here.
Source codes of all the self-coded features can be downloaded here.
In order for client to be able to configure the settings and manage all the features in WordPress, a detailed User Manual is provided as a reference.
The User Manual can be downloaded here.
Analysis are performed in many areas in order to access the quality of the project deliverables.
Heuristic evaluation is conducted since the nature of the project is user dependent. So, the feedbacks of users on design of the website will be absolutely useful for the improvement of the project.
After the midterm Heuristic Evaluation, there are design changes for the website. Therefore, usability surveys are conducted again on comparison between new and old design, and mobile version as well.
To download heuristic evaluation results(Midterm Evaluation), click here.
To download heuristic evaluation results(Comparison between new and old design), click here.
To download heuristic evaluation results(Mobile version), click here.