Resuable UI Blog Posts

A primary motivation behind Catalyst’s specialization in modular, reusable UI design systems stems from the need to reduce the time and increase the speed, quality and agility of the UI and application design process during business transformation projects.

Traditional UI design and development process for enterprise business applications typically takes anywhere from 65 - 80% of the overall development time in any application redesign/redevelopment project. Reusable UI design systems significantly reduce this time, and increase flexibility (not to mention decreasing training/support costs and increasing customer satisfaction).

While many of our engagements are focused on full-scale redesign projects or designing new applications from the ground up, another segment of our work is devoted to retooling projects where companies need to migrate legacy applications to SaaS or Rich Internet Applications. Here, reusable UI design systems can play an especially significant role in streamlining redevelopment cycles and shortening implementation windows.

For complex enterprise applications or multi-business unit services, legacy migration, tackled all at once, if often too large to feasibly meet delivery windows and budget plans. Instead projects need to phase in over time, deactivating legacy components along the way. Design and use of a reusable UI component design library can bring quick, progressive “wins” of enhanced functionality, performance, consistency and a rich user experience.

Reusable UI design system components, that encapsulate business logic, data access/entry, and communication/displays, can be applied “as needed” to the transforming application. Reusable UI design is efficient and effective both for a redevelopment approach based on cross-sectioning or one based on multi-function integration on a broader scale.  This is in stark contrast to non-modular, non-reusable design which requires custom coding for integration and an all-or-nothing (read “prone to delays”), non-phased implementation.

Catalyst’s initial reusable UI strategy and architecture sprints focus on identifying high value scenarios, mapping legacy to target design functions/interactions, reuse, redundant workflow consolidation, and data handling as well as working with the development teams to define a strategy for legacy deactivation and transition management.

Once a user validated reusable UI design system is defined, it can be efficiently applied as target systems are transitioned, or as new services are added to support changing business needs.

Most people I talk to seem to understand that building modular, reusable user interface components is different from building custom application UI and requires different development approaches.

Reusability however, although easy in concept, is not easy in practice. Many firms talk about developing modular UI, but typically they are focused on the function of a module - a list of tasks or subroutines. Data, workflow and behavior are addressed separately. The widgets may be modular, but you can't easily assemble them on a new screen of a new application or workflow.

Component-based approach

In contrast Catalyst uses a component-based approach where an individual component encapsulates a set of related functions for understanding and manipulating its own data, interpreting user interactions, and adapting to the workflow or unique performance requirements. Each UI component can be viewed as an independent (but cooperative) 'machine' with a distinct role or responsibility.

With a component-based approach, instead of customizing the code or running subroutines in your application, you add, modify, or delete components to achieve the design layout you want and reorganize them based on workflow and high value scenarios to support changing business needs.

What makes reusable UI components unique?

It takes significant effort and a lot of experience to write a UI component that is effectively reusable. The component needs to be:

• well-documented
• user-validated and thoroughly tested
• robust with comprehensive exception handling, including input validity checking and internal error handling
• able to pass back appropriate error messages
• scalable to handle changing data or interaction needs
• reusable at the enterprise level across many different applications, not just the specific application level
• designed with an understanding that no matter how clear the documentation, it will be put to unanticipated uses

Building an application interface with modular, reusable UI, helps you achieve flexibility, simplicity, and return on investment.

Side note: Developers currently building applications with object-oriented analysis and design (OOAD) principles will be familiar with this kind of approach. Catalyst applies these concepts but works at a more practical level of granularity for reuse than objects.

If you've read several of my previous posts, then you already know that one reason Catalyst is unique among SaaS and RIA providers is because of our extensive experience with developing modular and reusable UI. This is a key differentiator on which we hang our hats. We've been developing and refining this approach for more than a decade and have it down to an efficient, and reliable process with very clearly defined deliverables and outcomes.

So what do I mean by when I use the terms modular and reusable when referring to a Catalyst UI project? And why should you care?

Modular = integrated catalog of UI elements and patterns

Modularity refers to the relatively plug-and-play catalog of user-validated UI elements and patterns that are created for your particular application design. So for example, if you need a search component for your application, you would look in your UI catalog and pick out the search functional element. Built into this element is the conceptual model that defines how users understand what it does, the functional definition of what it achieves, the user interface elements, the visual design, and the interaction design.

From your perspective as the developer of the application or provider of the service, you recognize the need for a search element for your project - one that simply works (i.e. is already designed, branded, tested, and user-validated). You find it in your catalog and plug it into your application. You are assured it will achieve the goals of look and feel, intuitiveness and functionality. It's a bit more complicated than the new generations of Legos, but the principal is the same - select components with well-tested, pre-defined functionality that will fit together to build a project.

Levels of Modularity

Modular UI is actually built on several levels:

• Patterns - collections of screens
• Screens - collection of highly functional UI elements (that are themselves stand alone)
• UI controls - the UI elements that are specific to the underlying architecture and Rich Internet Application technology (e.g. Flex, Silverlight, Java, AJAX library)

The Alternative to Modularity

The alternative (and more common) approach to UI design is custom screen-by-screen production. The designer builds screens as they are planned. It certainly is faster to prototype and demo this way. But when it comes to deployment of a scalable RIA or SaaS application that can can be quickly updated or reconfigured and that you know will automatically work, it is essential to spec, user validate, coordinate and develop a component-based interface system.

Reusable = plug the modular UI into new applications or services

If your application is static and what you design in version 1.0 is the way it is going to remain for a long time, then re-usability is not a big issue. But if you are in the SaaS market where release cycles are frequent and where you continually need to add new services and enhance user experience, or you have a suite of applications, then re-usability is of paramount importance.

Re-usabity means that you can take any of your modular elements and plug them into new applications or new screens. The custom-coded UI code and the way it interacts with the backend system is completely re-usable for new screens or functional units.

This re-usability can save development teams up to 85% in application front-end development cycles. For example, if your original service is a general ledger application and then you decide to expand and offer a billing module (because you acquired another company or because market forces moved you in this direction), you will be able to apply the modular UI to this new application without having to develop much if anything anew in term of UI.

Who needs modular and reusable?

Modular and reusable UI are essential components for enterprise applications and scalable SaaS. If you are developing a small, very simple application that is intended to be an unchanging, one-hit wonder, then it will be overkill for you. But if you see your business as eventually growing, expanding, adding new services, and adapting to market conditions, then it rapidly pays off both in terms of making your life easier, getting new products to market faster, and significantly increasing the probabiliy of successful market reception and penetration.

Every VP of development knows the value of creating a shared library of commonly used functions.  Modularity and reuse are standard practices for most coders and absolutely mandatory for scalable application development. 

But the imperative for modularity in application user interface design (UI) is often overlooked. This is surprising because the presentation layer of any enterprise application is the most frequently updated and often one of the most time-intensive aspect of the development process.

In today’s market, services and software applications need to change as businesses and their competition evolve and shift. This is particularly true for SaaS which inherently is all about the ability to adapt quickly and come out with frequent updates. A Rich Internet Application UI with modular reusable components enables your development teams to implement changes faster and cleaner. This flexibility, simplicity, and adaptability translates to substantive ROI as well as faster time-to-market.

The alternative (and more common) approach to UI design is custom screen-by-screen production. A designer builds screens as they are planned - essentially PhotoShop comps are converted into individually-built Flash or HTML/JavaScript user screens. It certainly is faster to prototype and demo this way. But when it comes to deployment of a scalable SaaS application that can can be quickly reconfigured, it is essential to spec, user validate, coordinate and develop a component-based, modular user interface system.

Developing a modular UI obviously takes more time in the early stages. But the approach pays off very quickly both in time and dollars. A UI library of modular, reusable code, can save distributed development teams up to 85% in application front-end development cycles and makes it much easier to change directions then it would with customized screens. The added benefits include increased consistency of function across applications, a standardized look, easier adherence to regulatory compliance standards and reduced QA time.

For SasS in particular, modular reusable UI is an essential component to profitability and success.

'Tis the season when companies reflect on their achievements over the past year and begin setting goals for the upcoming year. Catalyst is no different. We've had a great 2008, with many successes, particularly in the SaaS market. We now have a client portfolio of almost 300 enterprise application design projects, with approximately 50 of those being SaaS.

Looking ahead to 2009, there will certainly be new challenges (and opportunities). The full impact of the economic downturn is difficult to assess, but we do know that organizations will be looking to spend wisely on user experience design projects, with a sharp focus on acquiring and keeping customers. We also know that there will continue to be new RIA and user interface design firms springing up (and fading away), all vying for business in a tighter market.

Surviving and thriving in 2009

So for Catalyst, part of our 2009 planning is to identify the type of projects where we bring the highest level of value and clearly differentiate ourselves from potential competition. In other words, where is that sweet spot where the requirements for a client's project perfectly matches our unique experience and skills.

This search for a "sweet spot" is something every service or product company should undertake. It helps to define everything from your BD and marketing, to your capital requirements and hiring.

The sweet spot for Catalyst Resources

In Catalyst's case that perfect sweet spot is when there is a intersection of three client requirements:

1. user experience design of a mission critical business application
2. modular, reusable UI using RIAs, typically applied across a product family or multiple applications
3. a scalable SaaS implementation that is intended to optimize the bottom line

Picture this as a 3D scatter chart, where each axis represents a client requirement. The sweet spot for Catalyst is the point where each client requirement is at the maximum value along each axis.

Of course we work on other RIA and user experience design projects that fall outside of this perfect sweet spot. Any project that requires even one of our particular skills, is a project where we confidently deliver great results. The sweet spot does not necessarily limit the type of projects we undertake. Rather the sweet spot is that point where Catalyst will innovate and execute on a project better than any of our competitors - it is a niche we own.

Other companies have their own sweet spot: Apple's sweet spot, for example might be strong industrial design, integrated software/hardware, and "insanely great" user experience. Costco's sweet spot might be low price, broad selection, helpful staff. In both cases, if a customer needs this intersection of products/services, then it will difficult to find any real competitors.

Finding your own sweet spot

Discovering your company's own sweet spot can require a lot of sober and realistic examination. But the diligence is important, especially in tougher economic times. Look to where you can provide the greatest innovation, the right teams, technological relevance, and a continuing record of delivering bottom line results