Designing an admin app for a project management SaaS

TLDR

BECI wanted to sell their in house project management system, NSPEC, as a SaaS to other construction companies. They had the software to license, but they didn’t have any way to manage the people or companies that were going to use it.

I designed a tool that allows BECI to manage client profiles. Both company and user profiles can be added to the system, they can have their passwords reset by the administrator, and they can be activated or deactivated with the click of a button.

Title

First wireframes

My first wireframes for this project were very basic. I worked closely with the developers at BECI, and my task was to make the user management process as simple as possible.

Each page, Tenants, Clients, and Employees, would have a simple table. Users could be activated or deactivated, and each user’s information could be edited with an inline form. New users could be added by clicking the button at the top right of the table.

At this point in the project, each page would have looked the same. The plan was for a lot of the functionality to be handled on the backend.

Second wireframes

For the second version of the wireframes, the managers wanted to see more of a flow. I removed the inline editing from the tables and made new pages for adding and editing information.

The Admin Dashboard

When a user logs in, they will see the admin dashboard. In order to change an NSPEC user’s permissions or edit their information, the admin still needs to navigate to the proper pages to do so.

There are a few additions to the dashboard in this second version. The first is the ability to change which tenant you’re viewing with the dropdown at the top left of the screen.

The second is the ability to add new clients and employees to the selected tenant from this screen. Clicking the invite buttons will take you through the add a user flow and send them an invite to join NSPEC.

The third change is the addition of the admin grid. These admins are the people that will be using this system. They are the ones who invite new clients and employees to NSPEC. Admins cannot be added or edited from here, that can only be done on the backend, but BECI wanted the ability to change that in the future, so I added a button that can do that, it’s just disabled for now.

New functionality for the tenants page

Similarly to the admins, the tenant’s information cannot be edited from the frontend. But like the admins, BECI wanted to be able to edit this information in the future, so I designed a page that will one day allow the information to be edited.

Also on the tenants page, users can invite new clients and employees to the selected tenant.

Inviting new users

Inline editing turned out to be confusing for the users, so I changed the flow a bit. Now, when adding a new user or editing an existing profile, all changes are made on a separate page, not within the table itself.

Other than that, this process is largely the same as it was before. Sending an invite to a new profile will allow that person to access NSPEC.

Hifi designs

After getting approval from the BECI developers, I started working on a high fidelity prototype for the admin portal.

BECI’s style

Before I got started, the developers gave me this brand guide to follow while working on the UI.

However, I was given permission to stray from the brand guide a bit if I had a good reason. I opted to only use the Orbitron font for the large “Admin Portal” text in the top nav, and for the alert titles. I used PT Sans for the rest of the design mainly because Orbitron is a very wide font and it made the designs feel off balance (also, I just don’t like Orbitron very much).

The stakeholders agreed with my font choice, and I was able to use PT Sans for most of the design.

The Admin Dashboard

For the admin dashboard, only the UI was updated. The functionality remains the same.

The new collaborator page

During this phase of the design, the BECI team decided to change “clients” to “collaborators.” This decision was made because the word clients is used in NSPEC as the client of a collaborating company. So in my designs, the companies that use NSPEC are now collaborators, and their customers are now clients.

Collaborators & clients

While editing a collaborator’s page, I added a new section dedicated to the collaborator’s clients.

When a collaborator accesses NSPEC, they can create a list of their clients that they will track with NSPEC, and that list is added here for the admins to view.

Admins can add other clients from the NSPEC system to this list using the dropdown, and they can remove clients from the list as well.

Adding a new user, but this time in hifi

By clicking the send invite button, an email will be sent to the users email address and they can open NSPEC for the first time.

Conclusion

I handed the designs over to the developers, and they had it up and running in no time. I received positive feedback from the BECI management team for this project. They wanted me to redesign the NSPEC tool in this same style, and fix some of the UX issues along the way as well.

Overall, this project went really smooth, and I got to spend a lot of time working directly with the BECI developers to make it happen.