Background

This client is a multi-faceted organization with two major lines of business. First, they are an educational and training institution - training technicians to work in their main field of study, and training supporting trades, at nearly a dozen locations worldwide. Second, they are also a major research institution, with labs dedicated to advancing the science of their field.

Requirements

The client is a revered brand in its industry and was launching a new website that reflected their refreshed marketing message. The website pages are numerous, highly tailored, and unique - "lovingly hand-crafted". Each one requires access to many different content components, will eventually require translation into a number of languages. Content will be reused heavily going forward, but initially only about 25% of the content is used in more than one place. These assets needed to be presented in the client's beautiful yet unique custom templates efficiently, while at the same time, the user interface that was to manage them had to be easy to use.

The client's website also must integrate with numerous systems, including a legacy application used by the labs, a new faceted search engine, and a newly-deployed but independent digital asset management system.

Function1's team was sought out by name to partner with this organization in order to ensure that the WebCenter Sites deployment is successful. We were brought in by the client's design specialists in order to ensure that these complex wireframes could be successfully captured and represented within WebCenter Sites. While the client plans to develop in-house expertise to maintain their Sites deployment, we were critical for them to ensure that their large project was created properly the first time.

The client also needed Function1 to provide assistance in deploying their entire WebCenter Sites infrastructure in the cloud.

Our Approach

"Lovingly hand-crafted" pages can be a real challenge for web content management solutions. Design firms treat each page as a work of art, with each pixel aligned very precisely. This flies in the face of traditional commodity WCM solutions that provide web page templates that look more like data entry forms than beautiful web pages. Re-use of the data model for these custom pages is very rare from one wireframe to the next. This meant that a lot of data types would be required.

Furthermore, the need for a custom faceted search integration meant that each data type would have to be specifically adapted to be properly indexed.

We employed a combination of a modular design, custom wireframes, and a GSF-based MVC solution to bring the site to life. We extracted modules from the wireframe designs to create a library of functional components that business users would be able to identify easily. Some modules simply format the page, while others are backed by their own data. Each module had at least one template to render it, and users had the ability to select the module they wanted, what it would look like, and to place it on a page.

This approach worked well because not only did it simplify the data model, but it also resonated with the way the design team created the wireframes in the first place.

But these highly individualized pages could not be represented simply by a set of modules - they would look rigid, old school, and hardly "lovingly hand-crafted".

To address this, we crafted the templates and associated asset model to support a beautiful inter-weaving of the modules into the wireframe templates. The remaining fields in the wireframes were presented in a logical order to users in a single asset. Of course all of the fields are editable in-context using InSite Editing - something that is essential in a "light-to-zero training" environment.

This allowed us to tailor the model very closely, which produced a very intuitive mapping between the templates and the management system. Absolute simplicity was essential for this client, because the number of wireframes was so high, that users could not be expected to memorize correct usage - it had to be obvious and intuitive.

Such an investment in each template might seem overly high, but we also knew that globalization was going to be important down the road. The detailed plans weren't ready yet, but we knew that the templates would probably end up being re-used not from page to page, but from language to language (with a few exceptions).

These beautiful templates could also not be broken down into sub-templates very well. This meant that templates for the wireframe had to remain more or less intact (or at least highly recognizable) as they came back from the design firm. We chose full-page template dispatching (natively supported by the GSF) to power template selection, and expression language trivialized the porting process. These allowed us to easily convert a pure HTML template from the agency into a data model, code up the access layer and search integration, and apply the formatting by replacing placeholder text with EL fields in just a few hours per template.

A robust MVC architecture was essential in order to manage all of the data access, individual attributes, and special actions like search engine indexing, form processing, and other matters. We selected the GSF for its efficient, built, and thoroughly tested architecture and supporting libraries. This let us focus our time only on the value-added work of bringing the templates to life. A few mapping tools, abstract base classes, and some brilliant brainwaves later, we came up with a modelling approach that leveraged the same code to present an asset on the site as to add it to the index. Command-dispatching drives the form infrastructure and allows us to code only the core business logic for the forms into the classes. Most forms are under 50 lines of Java long.

Overall, this large scale project's solution is focused on simplicity. As scale increases, we have two major choices in how to deal with it: add complexity and automate, or return to simplicity and allow a little duplication to arise. For this project, we added only the concept of modules to the base concept of "pages, docs, and media". The rest of the project focuses on simplicity, repeatability, and intuitive components. As a result, thousands of pages have been rendered inside a few dozen timeframes and the business team is thrilled with the system. We are proud of work for them and we look forward to continuing into new phases of development with them.

End Result

The end result of our project was a successful website launch, and excited and motivated team, and a lot of energy within the organization to explained the web deployment to other regions. As is the case with many international organization, convincing every unit to take on a new system can be a real challenge. But Function1's solution for the beautiful pages done by the design firm have generated so much interest that there is a schedule to move the remaining regions over to this platform as soon as the content itself is ready.

Statistics on usage are not back or ready quite yet, but the site performs better, is up more often, is easier to navigate and use than the previous version and we expect that the impact of the client's new online strategy will be very well received on numerous levels.

Our client is delighted with our work and we are thrilled to be continuing work with them to bring more of their dreams to life.

Stay In Touch