Case Study: Modernizing a Carbon-based Application UI

This case study outlines the redesign of a Carbon-based application UI from version 9 to 11. It addresses key challenges, implements solutions, and achieves positive results through consistent design and user-focused improvements. The project transforms a disorganized interface into a modern, user-friendly application.

Project Overview

This case study explores the comprehensive UI redesign of a Carbon-based application, transitioning from Carbon 9 to Carbon 11. The project aimed to address inconsistencies, improve user experience, and modernize the application’s look and feel.

Duration: 2019 - 2022 (Carbon 9 to 10, then to 11)

Tools: Carbon Design System, InVision, Sketch, Figma, Mural

The Challenge

Redesign the application UI to:

  • Establish consistency across all pages and components
  • Improve user focus and reduce visual clutter
  • Modernize the look and feel using the latest Carbon design system
  • Enhance usability and information hierarchy

My Role

As the UX designer for this project, my responsibilities included:

  • Analyzing the existing application for usability issues and inconsistencies
  • Designing new UI components and layouts using Carbon design system
  • Collaborating with developers to implement the new designs
  • Conducting user interviews to gather feedback and iterate on designs
  • Ensuring consistency and adherence to Carbon design principles throughout the application

The Process:

1. Initial Analysis and Problem Identification

I began by thoroughly examining the existing application, identifying key issues such as:

  • Inconsistent UI elements across different pages
  • Overuse of primary action buttons, causing user confusion
  • Ineffective information hierarchy and data presentation
  • Inconsistent search functionality and table layouts

CTA update

The Process:

2. Redesign and Standardization

To address these issues, I focused on:

  • Streamlining datatable views for consistency across the application
  • Implementing a unified search functionality
  • Redesigning card views for better information presentation
  • Introducing selectable columns in datatables to cater to different user needs

datatable update

The Process:

3. Visual Modernization

The transition to Carbon 11 involved:

  • Updating all UI components to the latest Carbon design specifications
  • Ensuring a consistent and modern look across the entire application
  • Refining color schemes and typography for improved readability and aesthetics

details update

Outcomes and Impact

The redesign successfully:

  • Established a consistent user interface across all pages
  • Improved user focus by reducing visual clutter and enhancing information hierarchy
  • Modernized the application’s look and feel, aligning with the latest design trends
  • Enhanced user productivity through customizable data views and streamlined functionality

dashboard update

Key Learnings

This project reinforced several important UX design principles:

  • The importance of consistency in creating a cohesive user experience
  • The value of user feedback in identifying and prioritizing features
  • The impact of information hierarchy on user comprehension and efficiency
  • The benefits of following a standardized design system like Carbon

Conclusion

The Carbon application redesign project demonstrates the significant impact that thoughtful UX design can have on legacy systems. By focusing on consistency, user needs, and modern design principles, we transformed a cluttered and inconsistent interface into a streamlined, user-friendly application. This case study showcases the importance of iterative design, user feedback, and adherence to design systems in creating effective digital products.