Modulz Organizations Dashboard

Web App

Overview

Design Systems within Modulz lets you manage components, guidelines, and resources within your Organization. This helps maintain consistency and closes the gap between Design and Engineering.

Design systems can be accessed via the Organization Dashboard. Our goal for the Dashboard is to allow users to create new Design Systems, manage their Organization, and add team members.

Inviting Team Members

A key component of Organizations on Modulz is the ability to add team members. Our users are collaborative design teams consisting of Designers, Engineers, Product Owners, etc. My goal was to design an easy way to add team members and manage user roles within the Dashboard.

I decided to use our popover component because it isn’t as intrusive as a pop-up and allows for various functionalities within the popover. The key elements were: the ability to add members quickly, a way to select the role, and a link they can send to invite members.

After various explorations, I decided to forgo tabs and bulk invites since most of the teams on our platform were between 2-5 members. I designed a popover triggered by the Invite button that had all our required elements in a simple, clean layout.

Billing

Modulz allows Organizations to manage their billing within the Dashboard’s settings. I needed to design an easy-to-digest but robust way to change billing tiers, process payments, and view invoices. We offer a discount for yearly plans so that had to be highlighted as well.

User Testing

Although rigorously tested internally, we always discover new thought processes and pain points when conducting user testing. Along with a few members of the Modulz product team, I facilitated user research with 6 beta testers which presented a few areas of improvement. The main area was the npm configuration in the Settings. Designers who use the Modulz platform were not sure of the purpose or importance of connecting it.