Embed Size (px)
DESCRIPTION
The Weather Network | Pelmorex Media Inc. provides weather information to millions of Canadians each day across it’s media properties - television (15 million monthly viewers), online (8 million monthly unique users), mobile and tablet apps (8 million monthly users). They are also one of the largest information technology companies in Halton region – employing over 450 people. Their goal is to be the best weather and weather-related content and information provider in Canada. They are committed to delivering weather information to consumers 24 hours a day, 365 days a year, across all platforms Carrie Lysenko, Director Web Services, Moe Abeidat, Director Software Development, and Matt Mejaski, Software Development Manager, shared their story about the evolution of their strategy from television to interactive websites and apps. They discussed the website’s history, it’s challenges, why and how they recently re-launched their website, and what they see for the Weather Network’s future. It’s a great made in Canada technology story.
Citation preview
theweathernetwork.com&
Meteomedia.com
A NEW DAY – A NEW SITE
Brief History
> The Weather Network and MeteoMedia began broadcasting in 1988> In 1991, Pelmorex Media Inc. purchased The Weather Network and
MeteoMedia> In 1996, we launched theweathernetwork.com and meteomedia.com> 2002 we launched a mobile website> In 2008 we launched our first mobile app and an app on Facebook> In 2009 we launched our last major upgrade to the websites prior to April 2013
> Our sites serve both English and French Canadian markets and are enjoyed by close to 40% of all of the online users in Canada
What did we do?
> Brand new infrastructure
> Introduced an extendable and flexible Content Management System to publish the sites
> Put on brand new design and usability to the sites
> Launched new product for the sites
> ALL AT ONCE!! (We may be a little crazy!)
Why?
> Meet Needs of our Customers
> Showcase all of our rich content
> Legacy systems were limiting us
> Grow our business
Key Lessons Learned
1. Clear Objectives - What are the problems that you are trying to solve?
Key Lessons Learned
2. What Does the Research Say?- What are your competitors doing?- Consumer Feedback- Social Media- Are your problems, really problems?
Key Lessons Learned
3. User Journey- Why are users coming to your site or app?- What are the questions they are trying to answer?- What are they doing now while they are there and what do you want them
to do?
Key Lessons Learned
4. Get the Right Partners- You have a plan for a house but who is going to build it?- How are you going to support it after it gets launched?- Do your partners get your vision?- Have you future proofed it?
Key Lessons Learned
5. User Feedback is Key to Success- Your users know what they want, let them tell you- Surprise them too – in a good way!- Surveys, Beta Tests, Advertiser Feedback
Key Lessons Learned
6. Take a Deep Breath and Dive In!- Prepare for the aftermath- How are you going to solve issues?- How are you going to communicate improvements?
The Weather Network
A Brief Technical Overview of our Site Redesign
Moe Abeidat – Director, Software DevelopmentMatt Mejaski – Manager, Software Development – Web Development
Late 90’s – HTML Frames
Late 90’s – HTML Frames – City Page
Official New “Old Site” – “php” version
Old Site – Architecture – continued
> Large number of web servers spread across multiple server farms
> File-based caching on each web server, which led to highly inefficient disk I/O – difficult to use industry standard caching tools
Old Site – Architecture – continued
CSS
PHPHTML
JS
> No modularity - a monolithic application that mixed every different coding practice you can think of
> Include statements after include statements after include statements
> Made a mess for anyone to debug, troubleshoot, and enhance
Perl
Old Site – Architecture – continued
> Almost 100% of changes had to go through developers
HR/Web Producers/Sales/Marketing
New Site – Technical Solution
> Solution needed to address:
1. More levers (control) to business users –
less dependency on development
2. Clean supportable – human readable code
3. Scale – effectively (cost) and efficiently
New Site – Technical Solution
> 1 - More control to business users – less dependency on development – quicker time to market/production:
> CMS:> Build in-house – again?> Buy
> Initial understanding of technology choices for selected CMS:
> vs.
- Skill Migration!- PHP vs. Anything else.
New Site – Technical Solution
> 2 - Clean supportable – human readable code> Frameworks – why?
3 - Scale – effectively (cost) and efficiently> How?> Options
New Site – Built in 6 months!
> Project Execution Options:- 1) Outsource completely to 1+ vendor:
- Pros: - Lower risk of technology/experience related issues- Higher confidence in on-time delivery
- Cons:- Lack of in-house experience- Higher cost long term with vendor lock in.- control of your own destiney?
New Site – Built in 6 months!
> Project Execution Options:
- 2) Take the lead, flanked by the right vendors- Pros:
- Guaranteed experience and expertise builder- Lower long term cost- Control your own destiny
- Cons:- High risk of missing timelines- High risk of “Frankenstein” Implementation
Lessons Learned
> Control your own destiney – technically speaking> Never be afraid to ask questions> Trust in your people> Put the right skillset to the right task
> How does a project become a year late?
New Site – Built in 6 months!
> The real how?
CMS
> We added an enterprise level CMS to the mix:- It allows our content to be:
- Translated- Re-used, and- Templated
across numerous platforms and sites.
> We define content and modules that can be rendered differently on- Websites- Mobile Websites- Mobile Applications
> A clear separation of content and design helps to re-use the content in many areas, and alter their design as necessary
Flexibility for the Business> With the introduction of the CMS, we have enabled our business
users to switch and pull many levers, allowing for:
- Greater page metadata control for SEO
- The ability to quickly and easily add new components to pages, and to reorder components on the page
- The flexibility for scheduled publishing/unpublishing of content
- To reuse modules on different pages, creating unique offerings
> Translations
- We also have the ability to control all languages in one place
- It also allows for translation of URLs for different domains. This allows us to share content between TheWeatherNetwork.com and MeteoMedia.com, but have different page URL's that are relevant for their language.
- e.g. The 7 Day Weather Forecast page is http://www.theweathernetwork.com/weather/canada/ontario/oakville, and http://www.meteomedia.com/meteo/canada/ontario/oakville
PHP Web Servers
> We added a reverse proxy cache that:- Eliminates file based caching on each server- Protects our PHP servers from overload with high traffic- Allows modular based caching where different pieces of the page can have
their own time to live
> Decreased the number of web servers by 60%
The PHP Code
> Totally rewritten from the ground up> Stayed with a LAMP stack> Used the CodeIgniter framework as a base to help standardize and speed up
development> Integrated an HMVC (Hierarchical MVC) framework to make each module on
the page it's own MVC component.> This allows each module on a page to be developed independently, which:
- Reduces development complexity- Makes testing and automation easier- Allows for easy module re-use on different areas of the site
Implementation of the Design
We use Mustache templates (http://mustache.github.io/)>These are logic-less templates, which provide:
- A clear separation between business logic and template design- Simple markup to maintain clean HTML- Templates that can be compiled and rendered in both PHP and JavaScript
(depending on the need that arises)
We also use LESS CSS (http://lesscss.org/)>This allows us to create dynamic stylesheets, with variabilized parameters>It also allows for nesting and mixing styles within other styles, creating a clean CSS code-base that is then compiled into browser-ready CSS.
