Select Page

Web App Design Case Study

Celanese

Celanese is a B2B industrial materials company that produces a wide range of specialty materials used in automotive parts, medical devices, consumer electronics, and industrial equipment. This project focused on leading the UX and design of MyCelanese, an e-commerce application used by external customers and internal account representatives to efficiently create and manage orders.

Goals

01. Strategically improve the user experience by addressing both user and business needs
02. Provide a richer, faster, and more efficient app experience
03. Modernize the design following current trends in UI and Design
04. Create a simple and intuitive experience that prioritizes accessibility and usability standards

Title

UX/UI Designer 

Skillset

Research, Content Strategy, Information Architecture, Wireframes, Design, Testing

My Process

Scope

Define, Gather, Align

Research

Inquire, Observe, Engage

 

Ideate

Define, Brainstorm, Sketch

Create

Prototype, Design, Build

Validate

Test, Refine, Iterate

Scope

Discovery Workshop

The application was highly complex, involving various stakeholders across business, engineering, administration, branding, and multiple user levels. To navigate this complexity, a week-long co-creation workshop was conducted with key stakeholders to tackle discovery, define goals and requirements, and align all teams with the plan moving forward.

Key Findings

01.

One Hub

Merge six business units under one unified portal for a consistent and streamlined order management experience.

02.

Operational Efficiency

Implement self-service options for customers (external users) to help optimize customer service team’s (internal users) performance.

03.

Improve Expereince

Enhance customer experience, reduce errors in order entry and provide customers access and support 24/7.

Understanding the Users

Surveys

Insights were gathered from 10 internal app users through remote surveys. Key data points collected include:

– Overall experience in terms of frustrations

– Roles and responsibilities

– Primary goals on app

– Frequent tasks and step by step explanation of tasks

– Improvement suggestions 

– New functionality and feature suggestions

Research Findings

01.

Top User Pain Points

(In order from most frequent to least)



-Long and complex ordering process prone to errors
-Important documents not easily accessible on app
-Cannot access account information on the go
-No direct way to email or share documents
-App frequently not responsive or working at all

-Login very slow, sometimes can’t login at all
-Delays and bottlenecks in the ordering process
-Customer reps are more reactive and less proactive

02.

User Tasks

(in order from most frequent to least)

-Order entry / Re-ordering
-Access, print and email documents
-Retrieve data (order or payment status)
-Edit orders
-Create, maintain and delete user accounts (admins)

03.

User Roles and Responsibilities

 (Different privileges and access according to user roles)

-Customer Account Reps (internal users) – Manage customer orders and accounts and provide support throughout the ordering process
-Customers (external users) – Create, track and manage orders, print documents
-Super Users / Admins (internal users) –
Access to all user accounts, change and update account settings, assign customers to account reps, create and delete accounts

04.

Experience Ranking

(From worse to best)

-Ease of accomplishing goal
-Visual appeal
-Organization of the site
-Ease of navigation
-The quality and readability of the content

Ideation

Information Architecture

Affinity mapping was utilized to gain a deeper understanding of the workflow and touchpoints within each process. This information guided the creation of a sitemap, which outlined the various pages and sections of the app and their interconnections.

Brainstorm Sessions

During the weeklong workshop, a lean approach was employed to plan the layout, UI, and identify essential features and functionality. The process began with quick, basic whiteboard sketches, where ideas were shared and refined with the team. This iterative method resulted in the creation of 47 detailed wireframes for both mobile and desktop.

Proposed Solutions

Each wireframe was meticulously planned and annotated to provide clear guidance on layout, functionality, interaction elements and showcase the proposed UX/UI solutions.

Dashboard

The dashboard offers fast access to what users need most based on their top tasks.

  • Gives a quick overview of recent orders and payments
  • Quickly mail documents from the dashboard
  • Access older files easily by searching the document type or PO#
  • Simplified navigation with global nav for easy access to profile, settings and shopping cart

Optimized Ordering Process

Designed a straightforward and user-friendly experience focusing on a simplified step-by-step process.


  • Organized the checkout process into clear steps and grouped content for easy organization and readability.
  • Incorporated expand/collapse elements to streamline scrolling and prevent clutter.
  • Formatted the progress bar to visually represent the order fulfillment process, allowing users to navigate back and forth easily.

Templates

Created templates to streamline purchasing, save time, ensure consistency and prevent errors.

  • Users can save, edit or delete templates to keep their collection organized and up-to-date
  • Flexibility to preview and modify templates before adding to their cart

Real-time Notifications

Keep users continually informed about pending transactions, status updates and additional instructions to reduce customer support calls and troubleshooting.

Admin Accounts

  • Switch easily between the customer accounts and admin interfaces
  • Simple and organized process to
    create, edit and delete accounts
  • Easily change and update notifications and login settings

Designing a Fresh and Intuitive Experience

The app was designed for ease of use across both phones and computers. The interface is clear and simple to navigate, featuring well-defined sections and categories. The workflow is straightforward, divided into simple steps, while the design is fresh and engaging, with vibrant colors and a clean layout.

Account Login view

Dashboard view

Order Creation view (laptop), Shopping Cart view (mobile)

Validation

5-Second Validation Test

Prior to the final release, a 5-second validation test was conducted with 5 new participants to evaluate the information and visual hierarchy of the dashboard design. This test also assessed the clarity and effectiveness of the content.

How the test works

Participants were shown the old and new dashboard designs for 5 seconds each, after which the designs were removed from view. They were then asked about their initial impression, the main goal of the page, and the key elements or features they remembered.


5-Second Validation Results

Usability Test

Following the validation test, usability tests were moderated with the same 5 app users, revealing valuable insights and issues.

The findings confirmed that:

• Users navigated through the new app with ease and quickly accessed the information and documents they needed
• Users found ordering was a smoother and more informative experience
• Progress UI features helped clearly reduce uncertainty and increase transparency
• There was some confusion with icons and active/inactive links in the ordering process that were easily fixed 

Usability Test Results

Key Take-aways

  • The project culminated in a successful product that not only impressed visually but also performed flawlessly, leading to a significant improvement in user engagement.
  • Collaborating with professionals from diverse disciplines provided valuable learning opportunities, offering insights into various approaches across business, engineering, and leadership.
  • Achieved success with a small team, despite limited time and resources, navigating a highly complex process.
  • This project marked the first experience of working remotely with an international team. Although coordinating across time zones was challenging, the team managed to overcome these obstacles effectively.