Why our app platform needed a Design System

At Cantarus we created MemConnect, an app platform that helps online communities connect and thrive. To be able to increase the quality of our apps, reduce their delivery time and make them more maintainable we created the MemConnect Design System.

What is a Design System?

A design system provides the foundations, structure, and principles that let a whole team create a user interface (UI), which provides a coordinated and effective user experience (UX).

Our design system is made up of a UI element library, master flows and the accompanying documentation – they are living, ongoing and evolving documents that are constantly expanding and being optimised.

We create frictionless and enjoyable app experiences for thousands of users by designing with compassion and awareness.

Examples of designs systems

The design system that inspired our team the most was Material, created by Google, being app-based it was also the most relevant one to our project. 

Other leading design systems include:

• Polaris by Shopify
• Atlassian Design System
• Lightning by Salesforce

And if you enjoyed those, you might just get lost in this catalogue of Design Systems.

What makes our design system unique?

Creating a design system for MemConnect has unique challenges. Unlike brand-specific design systems or pattern libraries such as Airbnb or Mailchimp, which can be based on one brand style, our system needs to be robust and flexible enough to adapt to the needs of different clients.

Many app designs are created by designers simply following the latest style trends, trends like 3D or Glassmorphism which can be inappropriate, inaccessible and overused. What we are creating is more than just good looks. It is possible to have an easy-to-use, beautiful, on-brand app backed up by the knowledge of industry experts in both membership, and design.

Built from research

To ensure that we are making the most stable, accessible, and scalable designs we use the latest insights and UX research from a wide range of sources including guidelines from Apple, Google and WCAG. We have already invested hundreds of hours into researching every element of our system from the smallest building block rule about line height to the most complex and varied validation pattern.

Accessibility

We considered and catered for accessibility needs from day 1. Our designs go above and beyond just being compliant. We are focused on delivering the best possible user experiences. We’ve implemented rules around typography, colour, touchpoint sizes, hierarchy, and speed.

Our app design will meet accessibility guidelines because it’s the right thing to do and we know accessible design is good design.

Benefits for Users

• Users enjoy a smooth, positive, and optimised experience.
• They get a consistent and modern user journey that can be improved based on their feedback and the user data insights we gain.
• Their app design will be updated periodically to maintain engagement over time.
  
  

Benefits for Clients

• MemConnect apps are delivered at a competitive price and pace. A design system allows us to increase the quality of our apps without increasing the price. If we were going into this level of design and UX detail on an individual project basis for each client, the cost would be substantial. Instead, this approach brings incredible design optimization at a much lower cost.
• We help clients to meet their legal requirements and Corporate Social Responsibility (CSR) pledges by adhering to accessibility guidelines and creating apps that are respectful and compassionate towards users.
• Clients get the results of cutting-edge UX research fed straight back into their apps even at a micro-level. For example, if the guidance on minimum accessible font size were to change following user research, we could reflect that across the whole community and all our client’s apps right away.
  
  

Benefits for our Designers

• Our designers and developers don’t have to spend time recreating the same elements in slightly different variations multiple times, meaning we can focus instead on improving existing elements and creating new ones.
• It has been a brilliant opportunity for cross-team collaboration which has resulted in increased insight and understanding from all areas, a boost for team morale and a catalyst for innovation within MemConnect.