top of page
KOMPOT CRM

​KOMPOT is a Customer Relationship Management platform for small businesses to help manage and support the bookkeeping cycle. 30 student engineers were working on the software while I was working on research, conception and creation with some help from the Product Manager and the Tech Lead. I participated in daily meetings with the student engineers and got to know a lot of valuable insights into creating a wireframe suited for engineers of beginner to medium levels and got to know the tools they use to code, which made my design more engineer friendly and efficient in functionality. My designs were used by all engineers and I was responsible for the communication together with the Tech Lead and the Product Manager. 

​

When finished, the software would be used by the PASV school as the first client.

GOAL

Build a demo wireframe of a bookkeeping CRM for PASV in Figma.

LANDING PAGE

Landing Page consists of the top navigation for new users. There is a headline, supporting paragraph, CTA button and a Hero Shot that is followed by more information about the software.

User. Home.png
SIGN IN AND SIGN UP

The goal was to make a most clean and simple design.

User. Create an Account.png
User. Login.png
ONBOARDING WIZARD

This simple wizard was designed to create the most simple and intuitive onboarding. It consists of only the most important information to get the user signed in and using the platform as effortlessly as possible. It asked for an email verification, Company Name, Phone Number, Email and voila! You're in.

User. WIZARD step 1.png
User. WIZARD 2 Email verified.png
CREATING AND EDITING COMPANY ACCOUNT

Once you have created your account and already using the software, the user gets to fill out more details about the company, profile, addresses and this is also where settings would be placed, such as changing one's password.

User. Company Account.png
VIEW OF ALL CLIENTS

Once details are filled out, the user, a small business owner, may add, edit and view all its clients in this simple window. The main navigation bar consists of tabs important for bookkeeping, such as Estimates, Orders, Invoices, Payments, Main Schedule, Admin, Addresses, Products, Vendors and Purchase Orders.

options for main menu.png
Client. Dashboard.png
CLIENT DETAILS

To see more details about each Client, the second vertical menu appears on the left once a Client is chosen. All tabs are shown with max 10 recent lists, to give the user an instant overview of the most recent activity with the Client. 

​

These sections include Client Details, Addresses, Orders, Estimates, Invoices, Payments, Schedule, Recent Messages Thread and Recent Calls. 

​

Form this window, the user may edit, delete or add a new item, such as a new Order, Invoice or Payment. The user may also expand to see the full view of any item or section.

Client. Details. (vertical side nav, scroll).png
options for edit.png

For smaller screens, the left vertical menu may collapse to provide more room for details.

Client. Details. Closed Related Lists.png
CLIENT VIEW WITH EMPTY FIELDS

In order to guide the user with the first flow of creating an order, the Estimates, Invoices and Payments are grayed out and disabled, since the client has to make the Order first, before creating an Estimate, which then leads to the creation of an Invoice and proceeding with receiving payment. This flow has been carefully crafted and integrated into the mock up as well as the backend by the developers. Each Order has a number ID that is assigned and makes it easier to keep track of all the records and activity.

Client. Details. Empty fields.png
CLIENT EDIT FORM

This is a pop-up where the user may Edit the information of any given client and save it. 

Client Edit Form.png
SUPPORT PAGE

On this page, the user may submit a technical problem to the engineering team by selecting pre chosen categories, a description of the problem as well as an attachment and reCAPTCHA for security purposes.

User. Support.png

These are all the categories listed for implementation.

SUPPORT options.png
FAQ

The FAQ page covers a few important questions for users to read through as well as a simple form to quickly shoot a message or ask a question.

User. FAQ.png
bottom of page