The goal of this tutorial is to build a basic prototype using the Kleeen platform. The project is a basic CRM for e-commerce that tracks customer data and their related sales. Using this simple project, we can demonstrate the power of a front-end application built using Kleeen's platform.
This project should take you between 45 to 60 minutes to complete. Once finished, an instant prototype is generated using synthesized sample data that provides a user experience similar to a production application. If you're curious about Kleeen's instant prototypes, you can explore one here.
To get started we will take a couple of quick tours, first of what we are building and second of the Kleeen Authoring Tool used to build it.
Step 1: The Foundation
Before starting, let's define the scope of the project. This project is being built for e-commerce merchants that sell directly to consumers through their website. They need to understand, project their sales numbers, and begin to profile their customer base to build marketing strategies around them. In the later stages of the project, other aspects of the business will be addressed. Below is a tour of the product we will be building. For all of the videos in this tutorial, you can open them in the Loom player and view a transcript.
Now let's take a quick tour of the Kleeen Authoring Tool so we can get to work.
There are two key parts to building a project with Kleeen: Things and Workflows. In optional steps, you can update styles, navigation, and branding elements. While this sample project will not demonstrate the full power of Kleeen’s platform, it is a solid foundation.
The first step is to create an account on Kleeen.Cloud on the login screen. You can create an account with AWS or Sign In With Google. If you already have credentials provided to you from Kleeen support go ahead and use those.
Once you have successfully logged in, you will see the Authoring Homepage. This is where you will launch your prototype once it is ready. To launch a prototype, you will need to have at least one Thing and one completed Workflow. Now is probably a good time to understand Things and Workflows. To make it easier to read, the names of Things and Workflows will be italicized.
Things and Workflows Explained
Things are the semantics of your product or what it is about. In this sample project, we will have two main Things and their related attributes. The main components are Customers and Sales. Looking at customers they will have related things like email address, revenue, and customer name. The thing Sales will have related attributes like purchase amount, payment method, and Customer. The use of semantic modeling has proven to dramatically improve the quality of the user experience and interface, as described by Dan Rosenburg.
Once you have Things in the application, they need to do something or be put to work. This is what we call Workflows. Workflows are what you want a user to understand, take action on, or investigate with the Things in your application. Workflows are built from the foundation of a User Story and then expressed as Experiences and Insights. For this product, we will make Workflows to understand the company's sales as a whole, the insights for a group of customers, and the details of one particular customer.
Step 2: First Things First
Since you can't have a business or sales without customers, let's build the model for customers first. The central thing to identify a Customer is the Customer Name. The other things that relate to customer records will be built around this. In the back end of an application, you will likely use something like a customer record number as the key identifier. For an end-user, an email address is a much more intuitive approach.
This video shows adding the first thing to the prototype.
Next, we will add the central object for order tracking invoices, the Invoice Number.
Before we move forward, we will add some fine-tuning to the Invoice Number. This will help the prototype look more realistic and create the actions needed for Invoice Number.
Step 3: Fast Forward - Importing Things
You may have noticed that in the process of creating a Thing there are buttons to Import and Export Things. Kleeen makes this available to reuse common models and build sharable libraries of Things making the authoring process quicker and easier. These functions can also be an easy shortcut for repeatable builds of applications.
To make your first sample project easier we are going to import the remaining Things for this project. This will also import the relationships, sample data, and actions as well. You can continue building these Things manually using the spreadsheet as a guide or explore additional things you may want to add on your own. To begin download this spreadsheet. The video below will show the remaining steps.
Step 4: Putting Things to Work
Workflows are the screens your users will need to view, analyze, investigate and modify data in your application. In the product tour at the beginning of this tutorial, we saw workflows for a Revenue Report, Customer Overview, Invoice Details, and Customer Details. We will use the model of things we have created to build those Workflows in this sample application. We have more articles on Workflows in that section of our knowledge base.
You will build Workflows by starting with a user story. User stories have three to four components in Kleeen.
- The first is the role, this is the type of person using the workflow a clerk, manager, executive, system admin, and so on.
- The next is the verb, this is what I am doing and can be anything you want with two exceptions. Report and Configure have distinct workflows that are built if you select a scope of The Entire Product Domain. That brings us to scope.
- Scope determines the granularity of the data available to a user.
- Single is focused on record and its attributes, for example, a single invoice and the data it contains.
- A Collection is a group of records, for example, all the invoices for a merchant.
- The Entire Product Domain as the scope will let me view records from my entire Thing model for a comprehensive view of many data groups.
- Thing determines what data is available in my workflow unless I select a scope of The Entire Product Domain. In our example project, we will focus collections on Invoice Number and Customer Name as they are key points in our data model that are connected to the data we need to see.
The Revenue Report is an overview of all the company's customer and invoice data. This is a great way to look at the big picture of a data set which will help users decide where to focus their attention next. This can also be a useful view for business leaders to see the metrics they need to make business decisions.
The videos below will show how to build this view.
With the user story created and the report view ready, we can make the first widget as described below.
For our second widget, we will make a summary statistics card. This will give us valuable insight into the store's lifetime revenue or a period selected with the Workflow's filter.
The next widget to build is a table view of invoices.
The next desired insight is the customers that have spent the most money in the store. This is accomplished by building a bubble chart to look for the outliers with the most revenue.
The next two charts will show us payments by their current status and the discount codes that are producing the most sales. These are similar-looking charts that display important information for understanding payments and gauge the value of marketing efforts.
The final widget in our report view is the items with the most sales.
As mentioned in the video this is a good time to build the first version of our instant prototype and look at the output Kleeen is producing. The first build will take 10 minutes or less and subsequent builds will be closer to 5 minutes depending on the scope of your changes. We can continue authoring while that builds to keep moving forward or you can take a break and come back before continuing. To kick off the build navigate to the Homepage and click Launch Your Prototype. After the build is complete you will see a success message and the URL to view your instant prototype.
Step 5: It's All In the Details
While the application is building we can continue working. The next view that we want in the application is a Workflow giving the details of an individual customer. This workflow will allow us to drill in wherever the Customer Name appears.
For the second part of our Customer Details page, we will create a table of their invoices.
Now that the Customer Details page is complete, we can return to the home page to look at the status of the build we launched. As soon as this is complete, we can click on the URL below the button and look at the progress so far.
Step 6: Details, Details, Details
Now we will create an Invoice Summary, that will let us drill into one individual invoice number.
This will crosslink automatically wherever we use the Invoice Number field. This is useful functionality for easily navigating between customers and their invoice details or going from an invoice to a customer.
The second part of this workflow will add in a widget and the ability to email an invoice copy as well as change the payment status.
Step 7: Time to Collect
There is one final screen we want to build. That is a collection or group of Things. After reviewing our progress so far, the product owner was so impressed they introduced scope creep. It was determined there was a need to look at a collection of customers for the customer service and marketing teams. However, the company financials shouldn't be shown to these users, so an additional Workflow is required. Kleeen has baked RBAC into the code that is generated from using the authoring tool, so this goal is easily accomplished by giving users access to only the widgets or workflows they need. Let's get started.
To complete our Customers screen, we will need to build a dashboard with some important customer information. This will provide some profile information that can be used by the Marketing department and Customer Service team.
This demonstrates one of the greatest advantages of Kleeen, additional work that may have caused dramatic delays to a project was easily managed and leveraging the Detail pages we already created.
While the build completes you can review the first build of the project. You may notice in the second build the crosslinking of invoices in the table on the report is now available.
Step 8: Finishing Touches
This is really the icing on the cake to making a great-looking prototype. Here you can apply a logo and change the application theming and color.
Let's take a quick look at what we built today.
Now that you've completed your first prototype, let us know when you're ready to get started on your own project or continue experimenting with this CRM to see what you can do.
One of the best things about Kleeen's authoring platform is that we produce human readable, well formatted, and commented code. This is just like what you would expect from your own developers or working with an Agile team. To help prove that value, we have attached a zip file download of the Git repository for this project. We will explain how to run this locally and some other advanced features in this article.