Step by step — Redesigning AgileCRM’s Home UI Dashboard
“The memory of how we work will endure beyond the products of our work.” — Jonathan Ive.
Without a doubt, CRMs (Customer Relationship Management) have been consistently peaking upwards for about four decades now. From the technology bigwigs such as Microsoft (with Microsoft Dynamics), SAP (with SAP CRM), and Zoho (with Zoho CRM); to open source, enterprise-class products such as OpenCRX and the ambitious SuiteCRM, the revolution has already taken place and the results felt across the vast corporate space.
Today, we shall be looking at redesigning AgileCRM’s Home UI Dashboard, courtesy of the Balkan Brothers’ design inspiration, and using Bunifu UI:
The Design Process…
Before you begin, please ensure that you have your copy of the Bunifu UI Framework library. You can download the one-week free trial to have feel of it. Likewise, please have a copy of Icons8 software for “all-things-icons” and Just Color Picker utility for picking colors from any area of the UIs displayed hereafter. These are handy tools that will help you design faster.
- Let’s begin by creating a new Windows Forms Project in Visual Studio; in the newly created Form, add a BunifuEllipse; we will also be using Roboto as the main font for the entire UI so feel free to download it:
- We then add a BunifuCard and place it appropriately as the Dashboard’s navigation panel and dock it to the left of the form; the BottomShaddow and the LeftShaddow should be set to False; also, ensure that you change the color of the form to mimic the inspiration’s dashboard:
- Add another BunifuCard, set it at the top-most area, and resize it to scale across the width of the form. Set its Anchor property to: Top, Left, Right in order for it to be re-scaled horizontally whenever a user resizes the form:
- Now add another BunifuCard as the body panel that will cover the rest of the form. Likewise here, set its Anchor property to: Top, Bottom, Left, Right in order for it to be re-scaled horizontally whenever a user resizes the form:
- We can then move to designing the navigation panel. Here, we’ll use BunifuImageButtons for the icons in our navigation panel as previewed in the inspiration:
- Next, we design the top-area panel. It consists of the “Sales” title, the tagline: “Welcome to Agile CRM Dashboard,” and the basic account management functions. Below is a preview of the controls to be used:
For the colors, please ensure that you’ve picked each one well (or just close enough to the previews…) as per the controls shown with Just Color Picker.
- We can then move to the next section which is the body panel. We’ll begin by designing the first card which is the Emails Sent card. Here we’ll use a BunifuCard to host all the controls featured. Below is a map of all the controls used:
- Next, let’s design the four mini cards displaying the Deals and Contacts statistics. We will look at only two of them then you can hopefully replicate the same design for the others:
- The final design for this section should mimic this:
- After the upper-section is completed, we can then go ahead to the Active Tasks section where some bit of work will be put into. Firstly off, see what we can use for the section:
As you can see, the section includes a very well customized List Box containing a list of activity tasks. Since Visual Studio’s tooling has no such control as this (and as of this release of Bunifu UI — v 1.5.3), we will head over to creating a very quick and custom List Item control which we can then add to a Panel control for usage.
So let’s begin:
- Go to Project > Add User Control, and name your control TaskItem.
- Once done, you’ll see a form-like view automatically created. Now, head over to the Properties section and set the size of the control to: 443, 76.
- For the remaining controls to be added, below is a map of them; use it to design the control then we get to writing some code for it:
- After you’re finished with designing the control, we can get to adding some code for it. Now, for the control to be customizable for the various tasks as viewed, we will need to create a method that can change texts, apply the necessary colors to specific controls, and finally hide or show a few controls.
- For the purposes of the code to be used, please rename your controls as show below:
- Below is the code for the TaskItem control, both in VB.Net and C#:
- After pasting the above code inside your new “TaskItem.vb” or “TaskItem.cs” control class, we now need to add a panel inside our Dashboard, right within the Active Tasks card section.
- After adding the panel, we need some code for creating and adding each TaskItem control as an item inside our panel; for this, go to your Dashboard form, right click it then select view code and add the code below:
- Ensure that you’ve added the method “AddTasks” inside your Dashboard’s form-loading event. Your final output for the Active Tasks should look similar to this:
- And now on completing this section, we can finally move over to our final section which is the Tag Graph section that houses a chart with some specialized data on the CRM product under development. So first design the card section using the controls map below:
- Add a BunifuDataviz component inside the BunifuCard control, then add a Timer control (which will default to the name Timer1), set the timer’s Enabled property to True, and then add the code below related to running the Spline chart method:
- After completing the above step, we can now add the final touches for ensuring that the Dashboard can both render the charts with our preferred colors and add the task items immediately the form is loaded. Below is the Dashboard’s form-load event for our project:
- With the code added, we can now finally preview a snapshot of our Charts:
Finally…
This marks the end of our inspirational design… Below is the final output for all the job done both in design and code:
Isn’t it just beautiful…
Conclusions
It’s always a catchy little temptation to create a product without considering all the essentials of the design process, the framework to consider, and the overall flow of interactions between the user(s) and the product.
We’ve been able to complete redesigning AgileCRM’s Home UI Dashboard, and without a doubt, crafting a design that would literally be impossible with the standard WinForms controls, all thanks to Bunifu UI.
I do hope that this article has truly inspired you in building beautiful products.
All in all, happy coding and designing!
