Web Application UX/UI Modernization [Case Study]

Established Canada-based vendor of on-demand printing services.

Client

The client is an established Canada-based vendor of on-demand printing services. They provide B2B and B2C companies (print stores, dealers, package and label producers) with a suite of web-to-print software for designing and printing custom photo products (business cards, signs, postcards, etc.).

The company has successfully run business for more than 20 years and won countless awards. There was only one problem. Their web-to-print services were designed 20 years ago and haven’t been updated since then.

In 2020, they realized that to outrun the competition they need to replace their outdated design with a fast and sleek web interface. The goal of the UX/UI modernization project was to redesign the legacy web application, revise and improve user experience, and enhance performance using modern frontend frameworks.

This change would secure the company’s leadership in the niche and boost client retention. Moreover, it would help them expand the line of services and, as a result, attract new customers and clients.

Discovery Project, complete web application UX/UI redesign and reengineering.

Our role

The client had an in-house backend tech team but was missing essential design and engineering experience to start UX/UI modernization. To develop a feature-rich interactive interface for this application, they would need to find frontend engineers with strong math backgrounds and domain knowledge.

Our team, on the other hand, had over 10 years of relevant industry expertise at that time and senior designers and engineers on board who could take over these complex tasks. We kicked off with the Discovery, followed by an end-to-end UX/UI application redesign and frontend development.

During the course of the project, we engaged different specialists, including BA, UX experts and designers, and lead engineers. The team leveraged niche and tech expertise at every stage of the project from Discovery to design to frontend development, thus ensuring rapid progress and optimized development workflow. Moreover, by bringing in tested solutions and shortcuts, we could skip unnecessary iterations and significantly reduce development costs.

Discovery included in-depth user research, competitor landscape analysis, and strategy for the redesign project.

Insight-driven redesign strategy

We began with a 6-week Discovery to conduct in-depth user research, study the competitor landscape, and work out a detailed project roadmap for the following redesign project. By the end of this phase, key stakeholders received:

Defined project objectives.
Detailed audience and competitor analysis report.
Documented requirements and features for basic functional components (print store features, photo editing, designer workflow, etc.).
Proposed redesign concept and new design outlook.
UX/UI modernization project breakdown and estimate.
Visualized project roadmap and timeline.

User-centered design, customizable UI.

User-centered design

Discovery Project laid the basis for the following 2-month redesign phase, providing both the client and design team with valuable insights for user experience modernization. Combining these insights and domain expertise, the team:

Developed easy-to-grasp user-centered UX and customizable UI.
Simplified UX/UI preserving all existing functionality.
Added new features to make the user experience more intuitive without complicating user journeys.
Implemented modularity to enable fast and easy integration into customers’ workflows.
Enhanced key eCommerce and conversion features (modern product grid, interactive product designer, preview and order, easy checkout, etc.).

React-based web development to create fast and responsive UI and provide high performance.

React-based web application development

The engineering team was assigned to develop fast, highly interactive frontend with multiple image/photo editing and product design features (crop, resize, rotate, layers, guidelines, etc.) on top of eCommerce functionality (product pages, shopping cart, order and checkout, shipping, etc.). This was a non-standard task from the very beginning due to extremely high performance requirements. To address these requirements, the team:

Moved essential business logic for editors/designers to the client application, thus turning it into a fully-fledged engine able to immediately respond to user commands and ensure zero latency.
Chose a modern React framework to develop responsive UI that could withstand the trial of time and provide the requested performance and scalability.
Used custom API to communicate with the .NET backend and third-party services providing seamless and secure connectivity.
Leveraged unique domain expertise to implement image/product editing functionality and speed up project development.

Rich industry and tech expertise was the key to the successful UX/UI modernization of the client’s web application. Tapping into experience, the team could suggest an insight-driven design concept from the start and quickly solve complex engineering problems during the development stage without causing costly tests and refactoring.

Legacy web application redesign and reengineering.

Highlights