When you’re designing a digital product for a long project, two questions probably come to mind when planning it: “How long will it last?” and “Is it scalable?”

The super fast advance of technology has (of course) a huge impact on the answer. What is conventional and up to date today, tomorrow is obsolete. You don’t see an app, website or even an operating system to have exactly the same UI or even user experience for more than a year or two.
However, there are interface patterns that remain untouched (… well, slightly).

So lets see how you can make sure that new features can be added to a project without redesigning everything. How do you keep any new updates from ruining the whole navigation system and user experience?

modular design

Imagine this: You create a product for a client that works well …

…and when it is finished all the control you had on it is lost. This is reality for most non in-house designers.

Design culture is fortunately changing and a great deal of companies are now recruiting designers who keep their products up-to-date on the long run, but what about those who don’t? Your job is to make sure that even they are happy about their product for a long time coming.

When your product cannot handle more features

Recently we’ve worked on a project for a client named VCC:Live. They are a cloud-based call center software that allows the managing of different types of channels, like audio calls, emails, sms’s or chats. Their focus was initially only on audio calls and their product was designed based on that. It was working pretty well until they needed to add more functions like, for example, the email channel. And that’s where the problem started.

Their product was not prepared to get that new feature. They still needed to add it, so it was “squeezed” into the program and – of course – it caused severe user experience problems. Inconsistent communication, the different naming of the same functionality and important areas with difficult access were some of the issues. Their own call center support was flooded daily with questions about the service.

Fortunately they realized that to scale their product it was not enough to add more features; the whole product needed to be redesigned to fit their current and future needs.

When we started this project, we were already aware of the previously mentioned functions and we knew that in the near future they were also going to implement new features, like social networking channels, according to their own client needs.

This is the type of project where a modular design system comes in handy

Moving away from designing web pages to designing systems is the foundation of a good and effective modular design in a digital product.

The atomic design methodology from Brad Frost was a base used to define the patterns we needed to follow through the project. It’s a system that promotes consistency and scalability and that is exactly what we were aiming for.

The project was divided into two major parts – Agents and Supervisors interfaces – and we started with the first one which was more simple to deal with (and yes, it turned out to be more complex than we initially thought). This is the one I’m going to focus on here.

What started to be just a facelift of the current system turned out to be a complete redesign. And that was the best thing that could have happened.

After the complete restructure of the content, navigation system and tests over tests to make sure we fulfilled the basic needs of the Agents, we had to merge that same content to singular modules that fit different purposes and scenarios.

Once we defined the core elements and patterns we started to have a library. This made us think about design in terms of distinct reusable components.

Modular design approach on the new ticketing system

What previously was only composed of email threads is now constitutes every available channel, agents or participants’ components. On the right side of the screen the agent can access all the elements available on the current ticket or add some new ones. All of the elements were reused in different modules inside that page or through the whole program.

modular design example

Old ticketing system – the agent received an email and only from there they create a ticket

modular design example

New ticketing system – a ticket is created or edited at any time from any channel

Does the team not deal with emails or chat, just with audio calls? No problem, simply remove those modules and use the ones you need.
Does a specific VCC:Live client need a new feature implemented on their side? I guess you know where I’m going with this… just add a module with those features.

A style guide is essential to a solid and functional design system

Brad Frost writes in his Atomic Design book: The cornerstones of a good design system is style guides, which document and organize design materials while providing guidelines, usage, and guardrails.

And that was what I delivered to the client. Although we were working on an Agile method with the development team I knew there would be a time I would have to let go of the project. This way I can assure it will ‘live long a prosper’.

This was just an example of a project we worked on with a modular approach to show you that it is possible to future proof your concept.

It’s not a simple process, but the end result makes the life of your clients a lot easier.

And that is what we are aiming for, right?

There are different ways to apply a modular design principle

Here is a quick sum up of our approach based on my experience:

  • Create a consistent content structure and therefore a compatible, but flexible navigation.
  • Make sure you’re using the right tone of voice throughout the whole product.
  • Try to step away from designing pages! Design systems instead.
  • Define patterns and collect them in a library in order to be able to use them again.
  • Document your design materials in a style guide.

What solutions do you use to scale and persuade the healthy growth of a project you’re working on? Are you thinking about a modular approach? Please share your thoughts in the comments below 🙂