As Global Vision made the decision to develop the Adora front-end using Microsoft Silverlight (at the time a very brave move – Silverlight 1.1 was VERY limited compared to Silverlight 3!), New Media Labs was asked to provide some assistance in the development process.  With full-time in-house User Experience (UX) designers and interface designers from Stonewall+, this project has really brought to light the power and flexibility of the Silverlight platform.

Design of Adora

The application is built along a classic Model-View-ViewModel (M-V-VM) architecture and utilises a custom-built framework for this that supports all the required elements.  We had a number of technical challenges to overcome along the way, mainly related to data storage and using the same Domain model on both the Client- and Server-side.  Most of these issues are posts in their own right and will be covered in the near future.

Adora consists of many layers, each with its own set of technologies.  Starting from the client and working our way to the backend:

• Client
  Silverlight 3, utilising the Silverlight Toolkit and numerous custom-built controls.
• Services
  The application services are provided by WCF services that are hosted on the server.  These are communicated with using a custom-built data-contract serialiser.
• Data storage
  Data storage is provided by SQL Server 2008 and data goes through many stages of filtering and matching to ensure maximum data integrity.
• Messaging
  A messaging and scheduling engine resides on the server side to handle all email and SMS communications with consumers.  Messages received are linked to the consumer’s profile.

The Development Process

The goal is to deliver a product that is not only scalable, flexible and fast but is also pleasant to use with minimal or no user training.  With a team consisting of UX designers, developers, graphic designers and QA testers, we are continuously and iteratively tweaking the design.  Using an Agile approach has allowed us to make fast-paced design changes whilst ensuring that the end result not only looks good, feels good and performs well but also matches the expectations of the Product Owner.

We currently employ a mix of various established practices – test driven development, peer reviews, daily stand-ups and whiteboard sessions are some of the things that we do every day.

Interface Design

Adora’s interface borrows heavily from concepts used by Windows Explorer to allow users to work in a familiar environment.  For example, “folders” represent brands and “files” represent elements such as email lists, creatives or even communication schedules. 

Adora Explorer interface

Wireframe designs are created by our UX designers and the initial development work to implement functionality is done by the developers and testers.  Whilst this is taking place, the interface design is UAT-tested by the UX designers – the interface is then sent to Stonewall+ for “polishing” and styling.  Due to Silverlight’s dynamic binding model, it is simple for the developers to drop the finished interface on top of the functional elements built.

All work with consumer populations is graphical – that is, instead of reams of confusing numbers that may not appear to have any significant proportions or relationships, Adora presents interactive graphs.  A user with little or no SQL knowledge is able to build up complex queries very quickly with this system and it provides a “quick-glance” overview of the consumers that the user is currently communicating with. 

Marketing List builder interface design

Adora Query Language

Central to Adora’s success is our own query language that we have developed: Adora Query Language, or AQL.  With a syntax that is similar to SQL, AQL allows developers to retrieve consumer related information using queries that are business oriented.  If that doesn’t excite you, how about this:

SELECT firstname, lastname, age FROM brandname WHERE gender=’male’ AND age>25

The result of this query is a list of consumers within the “brandhouse” brand that are male and over 25 years of age.  A complete subset of SQL is supported, including ORDER BY, GROUP BY, INTERSECT, UNION and many more.  On top of this, we have our own extensions to the language that allow us to apply pagination to data results or to even group data into ranges.  The result?  Our developers can focus on working with data, not on retrieving data.  It is envisioned that future versions of Adora will allow 3^rd party vendors to create add-ins to the Adora system using AQL.

What’s next?

Still to come – details on the technical challenges faced and more screenshots!  Beta 1 is scheduled for release in January 2010. 

We chose to use the ASP.Net MVC 1.0 Framework because it satisfied most of our requirements, both for the CMS and the site.  The look and feel for the website was designed and created by Stonewall+ and this HTML was seamlessly plugged into our MVC view as soon as it was supplied.  We used SQL Server and Linq for the data access.

Navigation

The navigation for the site was driven by a SiteMapProvider with all the nodes being managed in the CMS.  There were certain rules around the nodes i.e. Certain nodes cannot be removed or unpublished; nodes can only be published if their parent is published etc.  The sidebar and breadcrumb navigation on the site is dynamically generated from the SiteMapProvider.

CMS Item Workflow

The following content types:

• Generic Content
• Person
• Fund
• Media

incorporate the following features:

• Publishing workflow
  • Item Creation
  • Item Approval
  • Item Publishing
  • Item Archiving
• Email notifications
• Versioning
• Featured Item

Only certain user roles can perform the different workflow steps, with an over-seeing administrator role which can perform any of the tasks.  Once the item moves to the next status, an email is sent to the relevant parties to inform them and provide a direct link for them to action.

Each item has an Effective From and Effective To date, so you can easily set an item to only appear on the live site from a certain date, or until a certain date.

A versioning system is in place which allows a currently published item to be edited, without affecting the actual live item, until the new version is approved and published, at which stage the “old” version will fall away.

Each of these content types also allows for linking to media items such as newsletter PDFs, promotional video clips, fund fact sheets, etc.  Our link selector tool allows you to create an association to already-uploaded media (done via the Media Manager)

You can also feature an item in the CMS (Fund or Media) and that item will immediately appear on the home page of the website in the featured item boxes.

CMS User Management

Creating a new user

A user can either be an Administrator, or any of the other options or combinations thereof.  More roles can obviously be added depending on the business requirement.

CMS Media Manager

Media Manager

Administrators can upload files via the Media Manager, and these files can then be linked to the content items.The administrator can add and remove folders to allow for easier file storage management.

Website Screenshots

Investment Principles

Executive Committee Listing

Fund Detail

News

Things we learned

After the site went live we discovered an interesting Linq bug.  Turns out the Load Testing slipped through our QA’s net!  We learned very quickly to make sure this doesn’t happen again…

Next time we’ll also make sure we implement the latest and greatest version of the SiteMapProvider for MVC.  The version we used didn’t seem to refresh the nodes properly and so we spent far too much time on it than it deserved!

See it at www.africantourismportal.com

Tourism is, by its very nature, the act of deliberately taking oneself to somewhere foreign and experiencing the new, the different and the unknown.  That said, most tourists are not interested in stumbling blindly – they want to impose some sort of structure on their journey before they begin.  At the least, they book hotels and accommodation.  Many choose a few particular locations they want to visit.  Some even organise complete itineraries, planning their trips down to the hour.

For all of these people, there is a common problem: what is there to do where I’m going?  Frequently, the primary source of information is a tour book or travel guide – a glossy summary of the most popular attractions.  This information is flat, static, and offers little context.  An improvement is to use a tour operator – an agency who can help to guide you to local attractions and areas of interest, and customise suggestions to your interests and accommodation choices.

Wouldn’t it be even better, then, if you could explore the area yourself?  Whilst map-based products that show hotels or tourist locations have existed for a while, they have until now focused too much on either selling accommodation or on highlighting the tourist attractions.

Our Solution

This is where SmartGuide and New Media Labs have collaborated to bring these two worlds together – building a rich, interactive map that shows visitors where they can stay, and pairs it with a wealth of information about the area they are visiting.  As an interactive map product, tourists gain immediate understanding of the spatial relationships between locations.  They can explore at their leisure, consuming images, descriptions, audio and video about points.

The product we have built acts as a hub for a multitude of players in the tourism space.  Information, locations and content feed into it from local tourism agencies and location promoters.  Tourism and accommodation operators feed their own unique images/video/points into it, improving the quality of the content and highlighting features they consider the most valuable.  Tourists use the map to explore, learn and decide where they wish to visit.  They locate accommodation, restaurants and activities in advance, and feed their choices and preferences back to their tour guides or their queries directly to responsible parties.

TIP playing a promotional video

One of the dominant problems in providing a system like this is in developing and maintaining a high quality repository of information.  This is a task that is poorly suited to tour operators themselves, and individual local tourism bureaus cannot provide either the necessary funding or a wide enough body of information.  Here, a dedicated provider like SmartGuide has the necessary contacts and experience to compile a body of knowledge that can support both the regional agencies and the tour operators.

When dealing with as much content as this, it becomes necessary to manage the volume of information being presented at any one time.  Especially when people are viewing a map, overloading them with points can rapidly becoming intimidating.  SmartGuide and New Media Labs tackled this from a number of directions.  We manage the display of points, making them visible and hiding them at appropriate zoom levels.  This allows us to begin by presenting high-level information and a minimal selection of locations when the zoom is pulled far out, and still have detailed, local content if a visitor chooses to zoom into an area.  We further extended this by allowing visitors to bring categorised content up earlier.  This helps people locate their particular interests quickly – beaches, golf courses, family attractions, restaurants – all of these can be highlighted and explored at will.  Lastly, all points on the map have a context-specific icon, which makes it easy to distinguish the general nature of a location at a glance, and without having to click or interact with it.

Exploring Beaches and Golf Courses

This information is fed to tourists through a fully interactive Adobe Flash application, which leverages the exceptional quality of Google Maps for Flash to provide a geospatial display of tourist attractions.  The user interface is built to support simple reskinning by operators, allowing them to imbed the application into their own pages with a fully matching “look and feel”.

TIP reskinned for Southern Destinations

Uploading a path from a KML file

Obviously, managing all of this content requires tools that are up to the job.  Here, New Media Labs built a complete content management solution that allows SmartGuide and their licensed Operators to update and maintain the ever increasing number of locations.  The content manager is designed to make the job of sorting and filtering through the tens of thousands of locations easy.  It fully supports filtering and sorting, and allows the user to customise the information on display.  This allows SmartGuide and their Operators to “build their own interface” for the job at hand.  The content manager uses a combination of direct field editing and custom content-specific editors to always present the most useful interface for the moment.  The content manager allows them to not only monitor points, but also to customise the display of recommendations, guides, routes and layers.

It supports importing content from KML documents and route files, and adding additional regional/location information to points through a reverse geocoding service.  It even allows SmartGuide to generate customised HTML pages for their clients on-the-fly, allowing them to run their business without needing to call on New Media Labs for technical support.

Checking up on Sky Diving

The content manager isn’t limited to in-office use, either.  It is fully supported across the internet - and this often leads to SmartGuide consultants taking their laptops with them on the road, and updating content directly from the local offices of tourism agencies.

Underlying Technology

New Media Labs has a firm belief in using “the right tool for the job”.  As such, a variety of systems were used together to build the tourism portal.

The front-end application was developed using Adobe Flex technology.  Here, our challenge was to deliver a richly interactive application that would behave consistently across the multitude of browsers currently available.  It would need to provide a user experience that set it apart from the majority of Google Maps-based products currently available.  It would need to consume back-end service feeds and orchestrate them to produce a compelling, responsive interactive map.  Lastly, it would need to be customisable and skinnable enough that operators looking to integrate it fully into their websites had the flexibility to do so.

Our decision to use Adobe Flex was informed by all of these aspects.  With Flash penetration at over 95%, we felt comfortable that it had the portability we needed.  ActionScript CSS gave us a good tool to separate the presentation logic from the underlying behaviour, and native support of web services ensured that we could access our back-end content seamlessly.

Even better – it took us only 4 weeks to build the front-end application!  Our initial prototyping efforts using Microsoft Silverlight meant that we could focus on ensuring the user experience was top notch, instead of simultaneously developing the application logic in conjunction with the user interface.

Developing TIP in Flex Builder

The back end servers run web services hosted inside of IIS 7, running on Windows Server 2008 with SQL Server 2008 databases.  Whilst we investigated building the services with some of the more popular open-source technologies (PHP, Ruby on Rails), we knew that the long-term strategy for the system would require extensive back-end integration with the systems of existing content providers.  Here, we felt that services built using .NET would give us the best combination of performance, flexibility and rapid development on this project.  Especially, we viewed the introduction of the geographic data types within SQL Server 2008 as being important for the ongoing maintenance and development of the system.

The Content Manager was implemented using Microsoft Silverlight (SL3).  Here, we wanted a powerful and responsive interface that would allow the user to perform complex data manipulation quickly.  Microsoft Silverlight was a natural choice – the multitude of user controls provided helped to massively reduce the amount of work necessary to build a content manager.  By allowing the client to work with the data directly in their browser we allowed them to be much more productive than they could have been with a traditional page based CMS system.

Browsing and updating point information

Obviously, the CMS needed a way to update the primary data store – we evaluated using a traditional web-service based approach, but we wanted something that gave us a good mix between easy extensibility and strong validation and typing.  In the end, we built a generic dynamic update system that relies heavily on shared WCF contracts and reflection.  It allows us to provide continual, as-you-edit updates and synchronisation between the CMS user interface and the backing data store.

Both the site and content management system were developed using ASP .NET MVC 1.0. The CMS incorporated a workflow system, ensuring that all content follows an approval process before being published. Notifications are sent during the lifecycle of the content so that the role users (creator, approver, publisher) can easily navigate directly to the content item needing action.

The site itself has a simple yet slick design, and is also pleasingly fast. 

Microsoft is now working in collaboration with New Media Labs to generate a case study out of this project. The project makes a good case study for Microsoft’s new Rich Internet Application technology known as Silverlight. This project is being billed as the largest Silverlight implementation in Africa.

Domain Driven Design was utilised extensively to model the specific banking domain. The Service Layer Data Contract and Service Contract models were modeled using the web service software factory.

The site has now moved into user acceptance phase and should be launched shortly.

Our base layer CMS was used for the development. Often when you tell clients you own a CMS they are skeptical – “why would you want to own or build a CMS when there are so many out there”. The reality is, a site like this is not only managing textual content it is managing the business content too. In other words you have to manage the data for each investment fund, the allocations of the fund and price performance over time. These are the kinds of systems NML has become experts in developing.

NML do not claim to own a packaged CMS or CMS framework. Packaged and Framework are words we’ve become skeptical of. We have a base layer of CMS code , that has been designed with integration in mind, to tie the company’s business model into the content management system. Our CMS allows for the usual features such as adding pages, changing navigation and publishing workflow.

The trustees are Alan Knott-Graig (MD IBurst), Tracey Lee Cohen (ex-Marketing Head of Blue Label Telecommunications), Gordon Douglas Stuart (Sentinel International Advisory), Dr Andile Ngcaba (Council of the University of South Africa (UNISA) and was an advisor to the Digital Inclusion Programme at Harvard University Law School), Jonathan Ackerman (Marketing Director Pick n Pay).

NML have integrated with the MyGate payment gateway and also MiMoney and UKash payment methods. We also integrated EFT back into the payment assurance processes.

NML have developed and commisioned this project at reduced rate as part of our corporate social responsibility.

Who is The Trust?

The Trust is a web portal that aims to make it easy, affordable and risk free for individuals and corporates to find and contribute to charities throughout South Africa and other African countries. The Trust provides a network for reputable and accountable South African charities who have been qualified through ongoing due diligence – irrespective of size, purpose or geographical location.

The Trusts’ web portal is your helping hand. The Trust aims to streamline the act of giving by creating a single access point for a range of causes. The idea is to boost the fundraising ability of charities by consolidating marketing efforts under one umbrella. By focusing on international celebrity endorsement through its many high-level contacts, The Trust is able to marshal significant support around several causes, from animals in distress to women and child abuse.

Charities affiliated to The Trust are expected to adhere to strict reporting and accountability guidelines in order to continue receiving support from us. Every cent of every rand donated to our causes is tracked, accounted for and distributed to charities with maximum efficiency and transparency. In addition, to all of the above, The Trust has the active support and buy-in of many of South Africa’s leading businesspeople. This means we are able to benefit from literally decades of cumulative business experience and the result is a charity run on business priorities for maximum effect.

The social elements are tied into the business model of this division of the bank, making this a complex development and integration exercise.

This will be NML’s second large Silverlight implementation and is being touted by Microsoft as the largest implementation in the EMEA region. Even thought this project is in the early stages it is being looked at closely as a case study by Microsoft.

Given the number of databases and stored procedures the system has to tie into Microsoft Repository Factory was the natural choice for Middle Tier. The service layer was developed using the Web Service Software Factory and the WCF .NET3.5 implementation technology.

The video content was originally going to be provided by youtube. But due to the complex authorisation workflow process brandhouse required, we decided to build our own video encoding and streaming service. The videos were then encoded using the Silverlight2.0 Encoder (apparently the first production purchase of this software in South Africa).

This was a very fun and exciting project. The application has come out of the testing phase so watch this space…