The client – a US-based technology leader in the personal systems and printing space – is focused on driving digital transformation for customers and service communities worldwide. Their printing business, in particular, aims to optimize customer workspaces, manufacturing processes, and printing needs.

The client previously used an in-house product label designer application to design printable labels for its customers. The application offered limited design capabilities and no direct customer involvement, leading to frustrating feedback cycles, increased costs and prolonged time-to-market. It became critically important to streamline the label design process and empower customers to create their own designs.

The client engaged Techlogix as a software development consultant to build an interactive label designer for its end customers. The designer needed to provide rich interactive features like templates, alternative options, and print preview. This shift in the design process from manufacturer-dependent to end customer-driven, significantly enhanced collaboration, reduced costs, and improved efficiency.

The Challenge: Limited end customer engagement

Our client – the printer manufacturer – was designing labels for its end customer’s products at its own facility. Since these products belonged to customers from diverse industries, the designs were highly variable, making the design process time and resource intensive. Once the end customer viewed the final design, accommodating revisions was slow and tedious. This significantly delayed time-to-market because the customer did not have visibility before design finalization by the manufacturer.

The existing in-house application had the following drawbacks:

• Lack of Design Control: End customers were not involved in the design cycle so labels could not be previewed or edited in real time, causing limited design flexibility and slower iteration cycles.
• Cluttered UI: The designer application was not user-friendly and posed a steep learning curve which restricted intuitive usage, leading to frequent errors and reduced productivity.
• Inefficient Design: Users were not notified of errors and had to identify and correct design inefficiencies without support.
• Complex Layering: Users had to navigate multiple design layers, leading to layout deficiencies.

Solution: Rich interactive design for end users

Giving due consideration to customer reviews and pain points, Techlogix solution designers introduced the following features in the new solution:

• Cloud Enablement: End customers can directly access the label designer over the web, enabling instant preview and real time editing, thereby significantly reducing iteration times.
• Personalized Design: End customers can design labels from scratch or choose a template from a host of pre-defined designs.
• Versioning History: Designs are locked during editing and edit history is saved against user ID, date, and time. Users can also access, edit, and duplicate past company designs.
• WYSIWYG Design: Users can preview label mockups before submitting for printing.
• Third-party Integration: XML templates are automatically generated and submitted for printing after user approval.

UI/UX overhaul for enhanced customer experience

Techlogix realized that the existing UI was too complicated for end users, so a solution was devised to make the software more user-friendly for first-time (especially non-technical) users. These UI/UX changes included the following:

• Configurable Templates: Users can select and specify label attributes (label sizes, orientations, fonts, date formats, and barcode formats) through a questionnaire without needing extensive training. The designer automatically prepopulates labels against values (e.g., asset tag number) provided by end user.
• Configurable Defaults: An admin panel is accessible to the client’s engineering team and provides an additional layer of control, allowing users to adjust the weight of fields, set up default field values, and modify the list of fields displayed.
• Design Capabilities: A dedicated toolbar at the top of the canvas provides easy access to label field actions and features like drag-and-drop, undo/redo, rotation, positioning, alignment, re-sizing, and zoom-in/out, enabling faster design execution.
• Error Guides: Warning messages are displayed as pop-ups in case of spelling mistakes, text or field overlaps, unsaved changes, and duplicate submissions so mistakes can be identified and corrected easily.
• Simplified Design: The new canvas tool eliminates the need for design layering, further simplifying the design process.

The Technology: Clean Architecture

The Techlogix team comprised of a product manager, a cloud architect, a UI/UX designer, front-end engineers, full-stack developers, and QA testers to deliver the new and improved label designer. The project followed agile methodology implemented by a scrum framework via CI/CD deployment, encompassing regular sprint reviews over 5 iterative releases.

The system was developed using .NET core 8, featuring web APIs accessible through a front-end single-page web application developed by Angular v16 and hosted on the client’s cloud. Submitted labels triggered a REST API call, converting the auto-generated XML file into the required format for printing after passing through a service-based authentication mechanism. End user and client data was also stored on the Azure SQL database so users could access and edit previous label versions. The backend application follows a clean architecture, where the business logic is decoupled from data access and infrastructure dependencies.

The deployment of CDN on MS Azure promised ultra-fast speeds and high scalability. Additionally, App Insights were deployed to consistently monitor performance, diagnose errors, and track user interactions.

Key Benefits

The new label designer application developed by Techlogix provided the following business benefits:

• Higher Efficiency: Simpler UI and real-time editing dramatically improved efficiency and customer satisfaction.
• Faster Time-to-Market: Empowering end users to develop their own labels reduced miscommunications and the need for multiple revisions, which ultimately reduced time-to-market.
• Elevated Customer Experience: Cloud enablement enhanced the potential for collaboration and scalability, improving speed and resource utilization because users could edit past designs and maintain version control.
• Fewer Errors: System warnings eliminated most errors and improved design consistency. End users could also view label mockups before finalizing for printing, lowering rework costs.
• Productivity Gains: Simpler navigation and UI eliminated the existing learning curve while simultaneously boosting user adoption and overall productivity.