User Experience Blog

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.

The financial services industry is undergoing a significant transformation in how applications are designed and delivered. A key driving force behind this shift is the growing imperative to be global both in terms of providing customer-facing services and in taking advantage of a distributed global workforce. Applications that were previously targeted to local deployments on well-provisioned workstations or kiosks, need to be re-designed to serve an increasingly distributed global client base running “thinner clients” such as consumer PCs, laptops, notebooks, and mobile phones.

Not that many years ago, legacy financial services applications were designed to manage both the presentation layer (the UI) and the business logic using the computing resources and horsepower of the local workstation. The result was rich desktop functionality, but severely constrained portability or reach.

In order to provide rich-client applications beyond the walls of the home office (i.e. an early form of going global), financial service institutions had to rely on remote terminal technologies like Citrix (before they were talking desktop virtualization) or Microsoft Terminal Services.

While remote client technologies (or their descendants) survive in some form, the cost, licensing fees, and technical knowledge required for operation, limit their value or applicability. The business demand to be global is however, more compelling and wider reaching than ever, This is forcing legacy fat-client and remote terminal technologies to give way to Rich Internet Applications (RIAs).

RIAs take advantage of AJAX, Flex, Silverlight, Java (w/ JavaFX), etc. to provide rich client feel and functionality within the confines of a web browser. At the enterprise level these applications provide the scale, feature, functionality and responsiveness of traditional desktop software, but with the global reach of the web applications. They can be designed to handle very large data sets, scale to service thousands of users, meet fraction-of-a-second performance demands and encapsulate complex business logic.

RIAs make it possible for financial services institutions to achieve the requirement to be global, but not sacrifice the performance, richness, security, or functionality of workstation-bound legacy applications. RIAs are however, only one (albeit critical) part of the wave in the transformation of financial services applications. In addition, computationally intensive business logic is being separated from the RIA presentation layer and deployed into the cloud (e.g. SaaS), reusable application components are enabling rapid adjustment and adaption to changing business demands, and financial services organizations are beginning to take advantage of integration and collaboration services.

You may have noticed that CatalystReources.com has added a new Case Studies and Clients section. Our purpose for adding these sections is to give visitors a quick visual sampling of the types of projects and clients we have worked with.

It is easy to show case studies if the work is consumer-oriented and public.  It becomes a bit more problematic when the work is for mission critical applications or contain proprietary information (the secret sauce behind a company’s workings) - i.e. the kind of application that Catalyst typically designs.

In our new case studies section we think we achieve a balance between showing visual concepts and descriptive text, and not revealing anything competitive or confidential. We show representative samples in each of our primary areas of service.

We encourage you to take a look at samples of our application design work.  If you see projects that particularly interest you, contact us for a private and confidential briefing where we can provide more details.

Feedback of course is always welcome in the comments of this blog post or any other blog entry.

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.

While many SaaS services like to explain the value of their SaaS in terms of features (it does X) or cost saving (it is cheaper than on-premise), reality is that these “value propositions” position you as a commodity and are not sustainable. The probability is high that an upstart SaaS firm will soon beat you at your own game (price and features). As an alternative, I’ve made the argument, that a well designed, user validated, SaaS user experience can be an effective and sustainable differentiator between feature-competitive software products.

The value afforded by monitoring

There are several other SaaS value propositions worth exploring. SaaS user interface elements can be designed to monitor user behavior, enabling continual refinement of your service. Monitoring not only provides insight into how the SaaS should be improved to meet changing customer requirements, but also how to proactively reduce customer churn. The value proposition this enables you to offer is: easy to get started and easy to become proficient (and easy to get hooked).

The value afforded by connectedness

“Connectedness” offers another potential SaaS value proposition. In contrast to on-premise applications, SaaS is inherently “connected in the cloud”. Because of this, it can be designed to be more than a data-driven application providing access to end users. It can be designed to incorporate your entire extended enterprise into the business process - offering integration and collaboration services to your customers, partners, and suppliers. With “local” SaaS, the way the end-user interacts with the application should tightly map to the workflow and business objectives of the organization. This same principal applies when you expand your workflow analysis to include broader business objectives across more of your value chain. The value propositions of a SaaS designed to be usable across organizational boundaries are business agility, bottom-line revenue (reduced errors and cost, higher automation), and top-line revenue (improved relationships with partners and customers).

A human resources example

For example if your business is talent management, you can extend the design of your talent management SaaS to bring together internal HR, external recruiters, relocation providers, trainers, etc. This kind of connectedness is a unique and inherent value of SaaS. Beyond the technology, the key to this approach is to define the larger value your solution delivers across the value chain for visibility, control, and real-time collaboration (both upstream and downstream). Then concentrate the design around the high value scenario for those extended relationships, addressing the entire SaaS life cycle.

Last week it was announced that Amazon has purchased the hot e-commerce up-and-comer Zappos.  Among the many things I found interesting about this announcement was how I didn’t associate any kind of logo or visual identity with either company.  The brand that defines these online companies are not the visuals that the typical interactive design firm spends so much time developing. The brand for these web companies is the interface and user experience.

The idea of brand-as-interface is not new.  Craigslist and Google are extremely well know, and incredibly recognized brands.  But as many have pointed out,  they have “less than pleasing” designs (aka butt ugly) with little visual identify.  Their strong brand identity is defined not by colors or creative visual treatment, but rather through the functionality and simple, predictable user interface.

Brand as interface and brand experience as user experience is particularly applicable to software-as-a-service (SaaS) and web applications.  The online experience is the brand.  SaaS companies will bet more bang for the buck by innovating the the level of user experience then noodling excessively over the color scheme or logo design. Unlike traditional media - the words, the colors, and the graphics are important important only so much as they facilitate and amplify the user interface,

Thinking of brand as interface has another significant advantage.  It is much harder to copy or supplant a good user interface, then it is to copy an aesthetic design. Yahoo has faced this repeatedly with Google. Their site, might look better graphically and have more features, but it has done little to provide a better user interface or identified high value scenarios to provide a more engaging user experience.  Consequently it has not supplanted the original.

To be sure, graphical treatment and visual design are important for SaaS and web applications.  But they should always be looked at in the context of how they enhance the user interface.  That is the real brand and the thing you want people to remember.

One of the unique benefits of SaaS is that the application user interface (the components the user interacts with) can be designed to monitor the users behavior and give the vendor information on how the software is actually being used. This not only provides insight into how the SaaS should be improved to meet changing customer requirements, but also how to proactively reduce customer churn.

On-boarding, the process of getting customer signed up and using a SaaS is a good example. Effective on-boarding is critical in terms of determining the tenure and profitability of a SaaS customer relationship. The challenge for SaaS vendors is to immediately gain and leverage an early understanding of new customers behavior and then drive relevant communications to facilitate both immediate on-boarding and continued engaged use for the first 60 days (and beyond).

Designing your SaaS to take advantage of monitoring

So what are some of the steps in application design for effective monitoring?

• Identify the high value scenarios for your SaaS application. We use a systematic and formal process to determine these, but on a casual level try to imagine what what customers/users want to accomplish (not what you think they need).
• Define 2-3 key benefits that differentiate your software from the competition from a customer point of view (e.g. customized interface / ready to use out of the box / cheaper / faster).
• Define the critical behaviors a user must take to successfully accomplish the high value scenarios (e.g. they must import their contact list).
• During the application design process, as you streamline workflows and user-validate the UI, track where even a small percentage of users face issues. While a goal in the design phase is to refine the user interface to minimize these friction points, track any issues that do arise, no matter how infrequently. These can be used to develop processes for intervention during on-boarding.
• Build your UI as a modular system with the capability to track user patterns and clicks, and relate them to desired behavior sequences.
• When you deploy your SaaS, use these monitoring components to identify what features of the software do not seem to be used, where users get distracted from completing high value scenarios, where they make mistakes, where they stop at signup, etc, Integrated monitoring is essentially a continuation of user-validation testing and data collection we do during the basic application design. But here is it used both as information on how to modify the software in future revs, but also where to determine where you can provide assistance before those new revisions are out.

On-premise vs SaaS on-boarding

With on-premise applications, customer on-boarding is considered as outside of the functionality of the software product itself. But with SaaS, on-boarding is an essential process and monitoring the user behavior needs to be part of the SaaS application design. Whether you are trying to get users to complete signup for a trial, or whether you are trying to get users to successfully start using your software, tracking user behavior enables the software (or humans) to intercede at any points where the user might be dropping out.

For example, if users drop out in sign-up, only partially completing the process, the SaaS application can send out an automated, semi-customized e-mail which reads "Thanks for starting your online trial. To finish the process, do XYZ."

Or if users are not going through the critical behaviors that are necessary to complete high values scenerios (and thus experience the benefits of your service), then you can have a tech support person call (costly but effective, particularly for important individuals representing large clients), or you could send them links to videos or invite them to webinars explaining how to complete these behaviors, or point them to discussion board posts that answer other users questions related to completing the tasks.

For example, based on where a customer appears to be dropping out, an automated email goes out saying: "To really take get maximum advantage from our software, you will want to do XX. We have a options to help you through the process including one on one telephone support."

Customer Engagement

This same kind of monitoring can be used to determine intelligent automated (or human-based) up-selling or to tap into social networking for referrals. Once you have determined the high value scenarios and behaviors that users need to complete in order to find "addictive" or engaging value in your software, then monitoring and intelligent SaaS application design, can help users along.

Monitoring at the user experience level is an effective way both to to correct drop out points during the first 60 days, improve effectiveness and efficiency for your customers, and quickly determine how to modify your application on a regular cycle to meet user needs, increase sales and up sell, and reduce churn.