The Client and Their Brief
Established in Japan in 1969, Cosel are one of the world’s leading designers and manufacturers of high performance AC-DC power supplies. When they approached us, they were looking for a developer to replicate their existing product selector algorithm so that it could be implemented within a mobile and desktop application. The reason for this was that the existing product selector was only available via their website and was therefore inaccessible without an internet connection. This was proving difficult for their sales team as they relied on the algorithm to find and suggest products to customers. The application therefore needed to store the algorithm and data for each of Cosel’s products locally, with regular checks to ensure that data was kept up to date. In addition, they also required an app that would deliver functionality not currently available on the website. This included the ability for users to register and log into an account, favourite products for quick access and provide easy access to voltage, current and power calculators.
What We Did
We built the apps using the Angular framework, paired with Ionic to deploy to iOS and Android, and Electron to deploy to Windows and macOS. By using the Angular framework, we were able to construct all four applications using a single codebase. We also constructed a bespoke API to handle communications between the Cosel data sources and our own database.
Product Selector
Our first and largest task was to translate the existing algorithm from PHP to Typescript so that it would operate within the Angular App. This was a tricky process as the documentation and comments within the code were largely written in Japanese. Therefore, to ensure that we replicated the algorithm exactly, we spent time analysing each individual component. In doing so, we were able to replicate and optimise the existing functionality, resulting in an algorithm that operated faster than the website whilst returning the same results.
With the algorithm in place, we constructed an intuitive interface that allowed users to quickly enter the details of their query. This interface consisted of a series of panels for input type, output type, isolation, input voltage range and output current / power. The visibility of each panel was conditional depending on the data input in the panel above. For instance, if the user chose DC-DC as the input type, the isolation panel would be displayed below. As the algorithm operated so quickly, we were able to display the number of results matching the query at each stage almost instantly.
Data Storage & Synchronisation
There are a significant number of products within the Cosel catalogue, with new ones being added frequently. Therefore, it didn’t make sense to store the product data within the app directly. Instead, we created a system that prompts the user to download the data to their device if none is present or if an update is available. Since the images and files for each product take up a significant amount of storage space, we provided users with the option to download these separately. Interestingly, several store-fronts weren’t happy with this process, so we were required to update the app descriptions to inform users of the additional download size required to use the product selector before downloading.
User Accounts & Favourite Products
In order to allow users to favourite products and request product details via email, it made sense that we implement user accounts rather than storing the data on the device. This had the added benefit of ensuring that a user’s list of favourite products persisted across multiple devices. To achieve this, we implemented a registration and login form within the apps with authentication handled via our API. All products added to the user’s favourites then appeared under the favourites page. From here, they could quickly access the data for each product and request that the product information be emailed to them.
Contact Forms & Calculators
To add a level of utility to the app, Cosel requested that we implement a voltage, power and current calculator to assist users when making said calculations. As the calculators only required two fields, we implemented them on a single page with a tabbed interface to easily swap between calculations. Along with this, it was also requested that we implement a contact form to allow the user to get in contact if they had an issue. We constructed the form interface within Angular and submitted the data to the API so that it could be emailed to the correct person via the server.
The Result
We successfully replicated and improved the Cosel Product selector and made it available for use regardless of network connection. The app provides an intuitive interface and provides additional functionality not possible on the site. It is used by staff at trade shows, on business premises and in customers homes to quickly determine which products are required. All of which has led to a far more streamlined sales process.
How It Looks
A Word From The Client
Square Flame are an extremely competent, professional and easy company to deal with. They carried out a task for us which was to create a product catalogue/selector app for sales people to use on the go. This was done with the very best attention to detail and communication and we wouldn’t hesitate to recommend them to anyone.
Similar Projects
Get In Touch
Thank you for your interest in our business. If you have any questions about our services, a project you’d like us to help with, or if you just want to say hello, please don’t hesitate to get in touch. We look forward to hearing from you!
