A Window of Opportunity. A Catalog App for VEKA
VEKA 2.0: an app with the catalog of windows and their specifications. Developed with KMM. It runs on iOS and Android.
12 types of profiles
available for comparison
16 ready-made solutions
with their own profile combinations
2 models
for profile visualization
Task
Develop an app for the B2B segment — for the partners that manufacture windows — to demonstrate the products the customer makes. The app should include the customer’s window profiles and all related products and services.
Solution
We have developed a KMM app with a catalog of window profiles. Each profile is available as a 3D model, which can be viewed from every angled with various lamination options.
We have also implemented a section with ready-made solutions for various types of interiors, which combine the required profile types. This section allows the user to choose the color of fittings and profiles in a dedicated interactive model viewer.
All profiles and solutions can be compared with each other.
Users can also request a callback to ask a question or order window installation.
Development Process
Kotlin Multiplatform Mobile development. We were free to choose the development tool, and so we went with KMM. We have extensive experience of working with it, as well as many custom libraries, which speeds up the development process. KMM enabled us to write business logic for both Android and iOS versions at the same time and reduce the cost of developing the iOS app for the customer.
App logic. The app is a catalog of window profiles with their specifications. The user can choose a suitable profile and compare it to other options using the dedicated feature. Built-in 3D models make it easy to view the selected profile from every angle.
The app also has a Ready-Made Solutions section. It features pre-selected profile sets for various applications. For example, windows for single-family houses, purpose-built windows with noise reduction, or windows with sun protection. This section has built-in interactive models that allow the user to try different colors of profiles and fittings.
In-house admin panel with flexible settings. To store and load profile specifications, we used our in-house framework — ‘admin toolkit’. This is an out-of-the-box deployed admin panel with all the required tools, which we can customize. This allowed us to fast-track the development process.
In order to automatically fetch the required values into the Ready-Made Solutions section, we had to reorganize the object linking logic in the admin panel. As a result, the app can check whether a lamination type is compatible with the selected ready-made solution and loads only the available options.
Request distribution. User requests are sent via API to the customer’s server from where they are automatically distributed among customer’s partners in the relevant city. The assigned partner then contacts the user for a follow-up.
Future prospects. The customer plans to expand this service into an entire ecosystem. We have already built two apps for it:
- VEKA Measurer. This is an app for customer’s partners. They enter measurement data in the app and place direct manufacturing orders.
- VEKA Calculator. Provides calculations of work expenses based on the specifications and materials entered.
The Hardest Part
This was our first time working with 3D model transfer, which presented some difficulties. The models transferred into the app were displayed incorrectly and lost some of their content.
How we solved these tasks
The first time we encountered this issue — on transferring test models — we sent our corrections to the customer, and they made changes to the models on their side. Yet when we started to transfer other models, the issue reoccurred. We then tried converting models into various formats, which solved the issue.
Technology Stack
Backend on Kotlin
Frontend on React
Android on Kotlin
iOS on Swift
iOS on KotlinResults
The final app includes the entire catalog of window profiles offered by the customer. Users are able to choose any of the presented profiles and look at a 3D model of it from every angle.
Users can also check the Ready-Made Solutions section, which contains profile sets for various applications and interiors. Prices and specifications of the ready-made solutions are automatically fetched based on the selected profiles. This section allows the user to change the color of profiles and fittings to size up the future appearance of the window.
It is also possible to request a callback in the app to ask a question or order window installation.
Users can select the window profile they like and look at it from every angle by manually rotating the model.
