LMS Portal

UI/UX DIRECTION  ||. PROJECT LEADER  ||  FRONT-END DEVELOPER

This project began in March 2017 with the goal of creating a user-friendly Customer Relationship Management (CRM) program tailored for service bureaus and companies such as tax preparers, insurance firms, and business management agencies. The company had previously used various programs like Infusionsoft, Base, Workato, vCita, and Hubspot, but none met their specific needs. This led them to invest in developing their own CRM system.

My role was focused on UI/UX design, and I was the lead web developer for the front-end. Our team included two to three other front-end developers and a backend developer, who usually headed the project. We utilized AngularJS as our structural framework and followed the MVC architecture to keep the program organized by separating different logics from the user interface—Models, Views, and Controllers.

We started with a base template, which I enhanced using HTML, CSS, JavaScript plugins, and occasionally AngularJS. I primarily created the design, then handed it over to the other front-end developers to integrate the functionality using AngularJS, while coordinating with the backend developer to connect the front-end and backend through APIs.

We ensured that the CRM was not only designed for desktop use but also responsive for mobile, understanding the importance of accessibility across devices.

Login page
The sign up page consisted of three steps due to the back-end developer's API. After signing up, you would receive a token in your email where you would click and then sent to the password page to create a new password for your account. When the fi
Email verification page.
This image is the dashboard page. Nothing was decided yet on what to display on the dashboard.
The inside of the main side navigation.
If you pressed the little arrow on the top right of the side navigation, a list of modules would appear showcasing what modules we had in mind as we developed the portal.
This was the search engine. You could quickly search anything by pressing a character on your keyboard and the search engine would automatically appear.
A quickview modal that would display notes, alerts, and a chat center. The button to activate this modal was display in the header to the right.
An email design system that was inspired by Gmail and vCita's email.
The email composing page
A calendar mainly developed for the front desk people and other employees to help keep track of appointments and their schedule. This was also a feature to be added for other companies that decided to invest in our CRM program.
A dropdown menu that would pull from our contacts list. The object was to select the customer like vCita and then upon selecting the already existing company a schedule form would pop up.
A modal that slides out whenever you want to edit an appointment.
This file manager page was inspired by Google Drive, Dropbox, and vCita's document sharing. This was still in the developing stage.
This file manager page was inspired by Google Drive, Dropbox, and vCita's document sharing. This was still in the developing stage.
A module to add a new office.
A module to edit the existing office.
When you clicked an office in the table, their profile and the rest of their information would be displayed. This main part was for the accounting department for them to keep track of what was owed and other necessary information. I designed this in
To the side was a button tag where the employee could view all the offices at a quick glance. The IDs were also color coded like green was what was owed and red was what was due. Tabs were also utilized to separate the color coded individuals in thei
The edit office modal for the profile.
Previous

Castle Doors & More
Next

Illustrations