As a developer, one highlight of working at BitBakery is the variety of projects and challenges I get to tackle. Every project is different. Every client has its own unique needs.
We might work on a new mobile app one week and then a website overhaul the next. There are also multiple projects where we help clients with digital transformation projects. These projects can be complex ones where we're helping them replace entire systems and databases. Others are seemingly more straightforward, such as taking a pen and paper process and making it a digital one. Even though these projects appear to be simple, they are critical to our clients' business – and we treat them as such.
We recently helped a client digitally transform two pen and paper processes into modern web-based forms. The first process is for financial advisors to manage contributions for their clients. The second process is for those same financial advisors to make withdrawals for their clients.
Our development team designed and created the templates for the project's front-end in this collaboration while their development team completed the back-end wiring work. The project was designed to work with their existing front-end framework – Kendo UI.
Why Kendo UI?
Kendo is a comprehensive HTML5 user interface framework for building interactive and high-performance websites and applications. It comes with a massive library of user-interface widgets and data-visualization gadgets. The framework's structure is Model-view-viewmodel (MVVM) that separates the business logic from the presentation of the data.
Kendo UI is an excellent choice for a front-end framework when you need to create complicated components that CSS and HTML can't do out-of-the-box. Like Bootstrap, developers use Kendo UI to match the end product to your brand guide or user-interface look and feel.
There was one limitation when it came to the Kendo UI requirement – it’s a licensed framework that our client purchased. Working around this is second nature for us since we often work with multiple frameworks as we help our clients with different projects.
Step 1: Requirement gathering with Balsamiq
When we have projects with quick turnaround times, speeding up requirement gathering is critical. In an earlier post, we wrote about our favourite tool for this – Balsamiq. Using Balsamiq allows us to quickly create static screen mockups to help our clients understand the flow of the forms before we start building. We can iterate quickly as the client provides feedback which leads to a vetted set of requirements before the design and development work begins.
Step 2: From static screens to interactive mockups
Earlier we said that we needed to work around Kendo UI since it’s a licensed framework that our client uses – one we don’t have a license for. We’d normally use a staging environment for situations like this, but since our client has sensitive customer data, this wasn’t an option. Not to worry though, thanks to the beauty of web standards, we’re able to create the HTML, CSS, and JavaScript for the project using Bootstrap in place of Kendo UI.
For projects like this, we deliver interactive templates that the client’s backend developers can use to integrate into their website. These are fully functioning templates that show what happens when a radio button is clicked or how select options work on a form.
Step 3: From Bootstrap to Kendo UI
The interactive templates we deliver are designed in a way that the client’s dev team can easily swap out stock components. The main lesson here: modularize things as much as possible so that each component can be easily found and replaced. These components included everything from drop downs to data tables – and all the components had analogs in Kendo UI.
So how do we get those Kendo components to match the customized styling to meet the client's brand guidelines? All it takes is some inspecting to see what visual components need to be restyled in Kendo UI. Once we have that list, we created an override CSS file where we restyled those components. Once our client’s dev team swapped out a Bootstrap component for a Kendo UI component, the styling stayed the same.
Lessons learned
We love projects like this one because they challenge us to create solutions that are adaptable in a short period of time. They also give us an opportunity to learn about new frameworks and technologies – it’s continuous learning at its best.
- Rapid prototyping with Balsamiq or other tools like Adobe XD and Figma helps to clarify requirements
- Interactive mockups help our team – and the client’s team – see the forms in action
Digital transformation can be flexible
As an outsource development team, we've been supporting teams remotely since day one. We specialize in digital transformation and can help you upgrade your legacy systems no matter what your stack is….contact us today!
