clear

The Ultimate UX challenge

Redesigning a web-to-print legacy eCommerce system

#LegacyApplicationDesign #UXUIDesign #UIDevelopment #OnlinePrintingSiteDesign #B2C&B2BeCommerce

Designing a software application from scratch is fun. It’s like drawing on a blank canvas. Redesigning interfaces built on modern technologies provide large enough space for design experiments. But, when it comes to designing for legacy systems, the challenge level raises by 10x.

The challenge of redesigning a software application built on older technologies and decade-old code is the ecosystem that comes with it:

  • You have to deal with living-on-the-edge engineering teams whose decisions are primarily driven by fear of an unexpected crash.
  • The system survives on the tribal knowledge of a few with little or outdated documentation.
  • The stakeholders’ entrepreneurial instincts are tamed by the worry of disturbance in product usage and resultant loss of business.
  • Inconsistent and incomprehensible data analytics that could lead you into making bad design decisions.
  • Users whose habits are formed around the ux of the existing interfaces.
  • Fear of disturbing the search engine rankings.

When we were awarded the job of redesigning the biggest and oldest online printing site of Los Angeles, we quickly realised that we will have to work with hard boundaries set by the code written, rewritten and refactored over a decade. Reminded us of The Ship of Theseus.

Brief

Our job was to redesign a set of web-to-print eCommerce and enterprise applications with the objective of bringing brand consistency, UI coherence and ease of use.

B2C eCommerce store
Corporate portal (B2B eCommerce)
Order management
General administration

Here are the design goals that we strived to achieve with this legacy redesign project:

Brand consistency

Designing comprehensive user experiences and delivering High quality user interfaces driven by user empathy, marketing aptitude and technical roots.

Modern user interface

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Unified user experience

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Responsiveness

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Faster order processing

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Simplified product selection

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Faster checkout process

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Simplified custom order placement process

With our roots in consumer technologies, enterprise applications and lean development, we’re here to bring the technology that is at our core, to yours.

Design audit

UX/UI design audit of a legacy application is about identifying patterns from multiple sources of truth. We spent a significant amount of auditing time in analysing the stakeholder observations, multiple analytics data sets, feedback of long-time customers as well as new customers, opinions of the engineering team and concerns of the marketing team.

We carried out stakeholder interviews, user research and competition analysis during the audit phase itself.

Technical analysis

Understanding the technical limitations, especially the touch-me-not areas is critical. We regularly conversed with the engineering team of the client to share our ideas, get their feedback and create technically feasible designs. This exercise kept the technical iterations very minimal during the design review stage.

Information Architecture Optimization

The client sells a wide range of printing products. During the heuristic evaluation, we realised that the product grouping was done considering technical parameters, which lacked consideration towards how the users would identify and search their products.

We spent time with the client in reorganizing the product lists, reassessing the product categories, which resulted in simplified information categorization.

Likewise, we looked at product and service attributes for each product category, assigned order of importance to the attributes and suggested search, filter and sorting criteria. This significantly improves product search, navigation discoverability.

User Journey Mapping

Based on the revised information architecture, our findings during design audit, we began optimising the core user journeys such as:

  1. Product search (B2C)
  2. Product selection process (B2C)
  3. Checkout flow (B2C and B2B)
  4. Reordering (Order management)
  5. Order handling flow (Order management)

Here is an example of the user journey we created for product selection process for the b2c version of the online printing site.

Hybrid wireframing
Styleguide

The client already had a loosely defined brand guideline in place. Based on the brand guideline document, we suggested several UI styles to the client.

Product Detail Page

Printing products have many attributes that affect its pricing. Selection of size and quality of paper often resulted in cancellled or modified orders, which put an extra burden on the order management process. We overhauled the entire product selection experience, made it more visual and intuitive.

Component-based approach for Admin

The application that handled the order management and overall administration of the ecommerce system was built over a decade ago. While the features kept adding, the UI remained the same. Since the staff was already using this application, we had to take utmost care in deciding which changes to make and which ones to wait for. Any change that goes against the staff intuition could result in loss of productivity.

We went with a component-based design approach to modernise the UI in a piecemeal fashion. We optimised the forms, the workflows after detailed consultation with the staff over several wireframing iterations.

Corporate portal / dashboard and order tracking

TThe corporate portal primarily served as a place to reorder previously placed orders and place new orders. We realised that this B2B eCommerce portal could be made more engaging for the corporate customers.

UI Development

Once the high-fidelity wireframes were stitched into a UI prototype, we began the Figma to HTML conversion process. All the designs were developed into dynamic frontend pages. Scope of our UI development also included providing design integration support to the engineering team.

Have a project for us?

Let's chat

Your inquiry has been submitted successfully. Thank you

clear