BB Agency - Design system for a white-label co-working platform

Design system for a white-label co-working platform

Design story — by Anna Meleshina

Project Name — Nexudus Platform

About the Client

Nexudus was established in 2012 when co-founders Adrian Palacios and Carlos Almansa were first introduced to the concept of co-working through a group of friends. They quickly identified the need for a platform that could be used to run workspaces and help operators support and upscale their business to keep up with the industry that had started to flourish. Since then, they have maintained their passion for co-working and flexible workspaces, which has allowed Nexudus to become the best and most flexible co-working software and a reference in the industry worldwide.

Headquarters: London, UK

Founded: 2012

Company Website: https://www.nexudus.com/

Specialties: Software as a Service, Co-working Software, Shared offices management software, and meeting room management

About the Product

Nexudus is the leading white-label platform to manage and scale up co-working spaces. It works with 2000+ workspace operators in 90+ countries. Nexudus automates operations, welcomes members safely, enhances community, and oversees daily tasks from a centralized dashboard.

The founders discovered the co-working movement back in 2010 and decided to follow this particular direction. Since they launched, Nexudus back in 2012, they worked with hundreds of co-working spaces worldwide.

Nexudus assist co-working spaces by:

  • Maximizing resources by automating operations. With a set of solutions and features like automated payments, bookings, availability checks, calendars, and various integrations.
  • Empowering and gathering the community by connecting with other members (keep community engages through Member’s Directory, create events, customizable members mobile app, members portal, discussion boards for latest communications and business updates).
  • Providing tech support and assistance through the onboarding process and general use of the app. Tech support offers guidance through webinars, videos, and a learning knowledge base.

While working and collaborating with the co-working movements, they’ve learned that the core values are: Collaboration, Openness, Community, Accessibility, and Sustainability. They believe in these values and also apply them. The team behind Nexudus works very hard to build great products and provide real value for their customers.

How did we start?

Carlos Almansa reached out to BB Agency in July 2020. They’ve seen our agency portfolio on Dribbble and had a positive outlook towards our projects, and processes.

The communication went smoothly right from the start. The Nexudus team already had a well-defined set of requirements. They had a clear understanding of what they wanted to improve within a product. They also provided access to the platform so that BB Agency could get more comfortable using it, understand its functionality, and gauge the project cost and duration.

First reach: 6th July 2020

Contact person: Carlos Almansa

Where client found us: Dribbble

Provided documents about the project: Product Survey, Product features outline, Product new features outline, Access to the existing platform

Amount of discussion emails: 27

Negotiation time: 3 months

Project starting date: November 2020

Project finished: March 2021

Nexudus Team involved: Matheus, Carlos, Adrian

BB Agency Team involved: Adrian, Anna, Filip, Marino

Challenges

  • To create a flexible Design System for a white-label product by redesigning the platform from the smallest atom to the most complex organism.
  • Include flexible modules that could be used for a variety of use cases and touchpoints.
  • Provide high accessibility with WCAG AA color system for white-label products.

Flexibility

Widgets and Components. White-label applications play by a different set of rules than branded ones. To navigate them effectively and expand the functionality, we set ourselves to think outside of the box to define all possible scenarios of using the app. We were lucky enough to have quality end-to-end communication with the client to define different use cases within all the widgets.

One widget could include plenty of data: headline, status tag, timing, price, participants, likes, replies, author names, buttons, etc. General functionality could vary if all the functions were available within a specific product.

Widgets and product cards like KPIs, upcoming bookings, events, and discussion boards.
Design system layout with tables, colors, buttons, icons, and various other components.

Spacing. We created a scalable grid system based on the 4px baseline grid to create a proper systemic approach. This ensures that all spacings, margins, and paddings follow a defined ruleset. With that in mind our grid system for desktop devices is 1248px wide with 82px columns and 24px gutter.

Using the same approach for all the elements within a product, we managed to establish all the functionality within a module to look very clean and easy to use. For instance, we have foreseen a flexible space within a widget for long and short text scenarios for the widget keeping the height and proportions.

Typography. Another critical point is that this product is used by users worldwide. We needed to keep in mind that it should work in different languages. Some languages are read left to right or right to left, depending on the language. Nexudus has customers in the Middle East, Japan, and Korea as well. Typography usage should be adaptable to cover thousands of various customers from all over the world.

Accessibility

Color. We looked for a UI solution to balance visual approach, accessibility, and interface conventions, making the app attractive for all use cases. Harmonious color palettes are essential for a good-looking UI. We managed to structure the color system so that companies can brand their dashboard by picking a primary color. Our development team integrated a JavaScript function that automatically changes the text and icon color between white and black based on the contrast level of the primary color. This was done to maintain AA standards of accessibility. All other colors used in the platform are system colors that have been defined with the new design system.

Visual Appeal

Visually compelling elements. With white-label products, you don’t have much control over the visual appearance of how users customize their look, so we’ve used clean and functional modules. Large imagery to improve visual appearance. Large colored icons to accompany headings and paragraphs. All these tweaks add a nice friendly look to the design’s simplicity.

Events page with event cards.
Calendar view for available resources.
Blog page. Posts could be filtered by categories or searched based on preferences.

Flexible to accommodate all use cases.

Nexudus provides an end-to-end solution that lets space owners flexibly automate processes in their spaces. They serve three personas with the product.

Co-working product. Default members portal theme, which is basically for spaces that need management for co-working. Two main qualities define a co-working community: openness to share and willingness to collaborate with other members. The management team ensures all the operations run smoothly. To accomplish this, they rely on our technology, enabling them to automate most of the processes that happen daily in a co-working space. Members portal design is structured around two core concepts: Community and Operations.

Co-working dashboard

Corporate offices. It differs from the co-working version because it isn’t a subscription. Customers don’t necessarily have to pay for bookings because they’re part of that company.

Corporate dashboard

Virtual communities The target customer here is Virtual Communities that need a platform to manage their members.

VC dashboard

As mentioned before, this platform is fully white-labeled. We helped Nexudus to adopt their product to different client needs and their business models. Design is flexible enough to be applied to three company personas.

After the Launch

BB Agency accompanies clients through the whole process, and we care about the benefits and results we’re providing. What is the product life after production? We’ve talked to our client to get the feedback.

In the first couple of weeks, we had over 30% adoption of the new site. The overall design has been very well received; customers have mentioned it looks and feels modern.

The new home dashboard allows customers to engage with content much more efficiently while being flexible. It looks great, and the performance is noticeably better.

The discussion board has received the most positive feedback as far as UI and UX decisions, effectively giving it “new life” by aligning with social media standards.
Matheus Matioli Customer Experience Specialist at Nexudus

BB Honors

Thanks to Adrian, Filip, Anna, and Marino for their work on the project.

Big thanks to Matty from the Nexudus team for his help and guidance as we expand our partnership during 2021, 2022.

Have a project in mind?
Let’s get to work.