Component Driven UX

What is the challenge?

We are seeing a rise in clients who are not only supporting multiple platforms but also more than one product or service in their suite of offerings. It is natural for them to look for optimizations in their product design, development, and operations, and the discussion around unified front-end management and reusability often arises. Born is the concept of “component-driven design”.

What is a component-driven interface?

In essence, component-driven design and development involve designing software applications by building libraries of independent components. Each component fits neatly within the application stack, and multiple components are mixed and matched to form a modular application that is flexible and adaptable. These components can be shared across multiple front-end applications and can be skinned and populated with different data in each instance.

How does it help you?

This reusability is the ‘secret sauce’ of component-driven design. Benefits include managing one component library where master components can be edited once and the change then rolled out across all instances in a fraction of the time.

This saves both design and development effort where the majority of UX and feature based work happens in a shared library, and UI can be implemented quickly across products and platforms.

Assemble UI for new screens or pages faster, by using existing components already available in the library. This breaks the barrier for managing the design file, we can easily train our clients’ internal product teams to be able to use this library and build and edit their own pages. You will also see higher precision and more targeted feedback throughout the design process, especially between design and development teams. It’s much easier to focus on single components rather than reviewing entire pages.

Benefit from true agile development, once one component has been approved you can begin developing it straight away, rather than waiting for entire screens and flows to be designed. You can also have multiple people work on different components at the same time, making task allocation easier and reducing dependencies on other components.

From an engineering perspective, you can significantly increase re-use and standardize the implementation of your application. This makes it easier for new developers to join the project and get up to speed quickly. It also ensures that maintenance of the project and components is manageable.

This implementation approach also simplifies the use of test automation, as unit tests can be implemented on a component level and can be validated independent of the wider application functionality. These components and their associated test cases can also be cataloged to make automated or manual testing of an application simple by matching the current layout to the associated component test suite.

The benefits don’t only come in the form of work efficiency or higher quality and maintainability either, your products will display it in the interface too. UI will be completely consistent across platforms and pages since they are using the same components. You will never see a slightly different background color, missing gradient, typography miss-alignment, or UI bandaid fix between any platforms that use the same library. This pixel-perfect approach builds a premium experience that users will love, and by creating consistent functional methods, users will be able to seamlessly switch across platforms with familiar application patterns, making the most of your product suite.

How do you implement it?

Begin by designing a component library. Our UX team is skilled and trained in the creation of these files to ensure the most efficient management of shared components.

Mapping out the structure of your library first can give you a good place to start, especially if you are building this application from scratch. Alongside the usual IA (information architecture map), you should also map out a rough idea of all the features, pages, and components you think you may need, this will help you get started.

Begin by building one component at a time, start small and try to isolate the smallest possible reusable elements. Then you can move components together, joining them to create more complex combinations and solve larger challenges. You may go back and add larger components or break existing ones into tinier pieces to make them more reusable. You can now start to think about forming pages and fitting these pages into the application layer.

Once you have designed your core components, the engineering team will work to bring these to life, one by one. This can be undertaken through a sprint process, and the application skin and container can be engineered concurrently to increase speed and efficiency.

Putting these elements together, you will quickly have a working application that can be used for user testing or quality assurance early in the application development process, allowing for quick changes or amendments to the scope or requirements to ensure that the best possible user experience is delivered that can be in users hands much sooner.

It also allows for easy introduction of new features, content, or layouts as a simple introduction of a new component or set of components that can then be managed dynamically utilizing cloud-based config tools.

The result is a flexible and robust ecosystem that is ready to be optimized and improved ongoing, ensuring that the learnings from analytics and user surveys can continue to guide the customer experience.