UX Design Projects

Morph - UX Case Study

Morph -

UX Case Study

Designing how Pharmaceutical manufacturing companies organizes and manage their operations

My role: UI/UX Designer


Timeline: Aug 2024 - Nov 2024

Problem Statement

Pharmaceutical manufacturers have traditionally relied on manual systems or disconnected software solutions to manage their complex operations. This fragmentation leads to inefficiencies, compliance risks, and potential errors in critical processes.

But how can we streamline their processes while ensuring operational efficiency?

User research

Our legacy systems showed that pharmaceutical managers spent excessive time switching between different platforms, leading to inefficiencies and potential errors in critical processes.


Dashboard Conflict: The current system attempts to serve multiple user types simultaneously. For example, laboratory technicians use the same interface to log test results while sales teams need it for order tracking and customer management.


Fragmented Customer Data: The dashboard lacks a unified view of customer details, orders, and sample requests across different product lines.


Complex Approval Workflows: The system doesn't effectively streamline the multiple approval stages required for pharmaceutical sales.


Inadequate Tracking: Difficulty in managing and tracking test samples, stock, sales.

User interviews

After extensive consultation with pharmaceutical manufacturing companies of varying sizes, we identified key pain points:


• Difficulty in tracking inventory across multiple locations

• Complex approval workflows slowing down operations

• Challenges in maintaining regulatory compliance documentation

• Lack of real-time visibility into sales and production metrics

Competitive Analysis

We examined ERP systems from leading companies. Key success factors included:


• Structured Sales Workflow

• Actionable Sales Data

• Comprehensive Timeline Views

• Milestone-Based Insights

Design intent

Our primary goal was to increase operational efficiency while ensuring strict adherence to pharmaceutical industry standards. We aimed to create a unified platform that would streamline workflows from inventory management to customer invoicing.

How ?

  1. How might we provide an experience that streamlines complex pharmaceutical manufacturing workflows while ensuring regulatory compliance?

  2. How might we provide a tailored experience that allows different user roles (Production, Quality Control, Sales) to see what's most important to them?

  3. How might we simplify approval processes without compromising security?

Sidebar navigation

Notifications

Action items

Key performance indicators

Recent records

Sales

Purchase

Inventory

Manufacturing

Approvals

System settings

User profile

Dashboard

Customer Management

Sales Order Processing

Test Management

Order Entry

Approval Workflow

Order Tracking

Sample requests

Sample tracking

Test results

Sample inventory

Customer Details

Quotations

Payments

Invoices

Activity Log

Mails

Information Architecture

Phase - 1 Development Cycle

Information Architecture

Phase - 1 Development Cycle

Sidebar navigation

Notifications

Action items

Key performance indicators

Recent records

Sales

Purchase

Inventory

Manufacturing

Approvals

System settings

User profile

Dashboard

Customer Management

Sales Order Processing

Test Management

Order Entry

Approval Workflow

Order Tracking

Sample requests

Sample tracking

Test results

Sample inventory

Customer Details

Quotations

Payments

Invoices

Activity Log

Mails

Iterative design process

Based on all findings mentioned above, the key area of focus finalised are as follows :


  1. Easy access and navigation

  2. Priority based content display

  3. Configurable table view

  4. Role based data access

  5. Simplify complex data

Challenges and compromises

There were both technical and time constraints, some of which are mentioned below:


  1. The action bar was initially designed to appear in an animated way that pushes the table below automatically adjusting between filters and the table. But it was developed without animating ensuring the table was in fixed position as the animation might not be smoother when accessing from low network areas, also animating the table’s position might increase complexity and affect performance.

  2. The comments section in the approval page was initially designed with call to actions right next to the comment if any action was mentioned to be taken. Example: If the Manager’s comment was to modify the rate in the invoice, Edit invoice CTA would be placed next to the comment. This enables quicker and faster resolution of issues. Although this was a useful feature due to time constraint this was not developed for the first phase of product launch.

Design System

H2

Light

56

H3

Regular

40

H5

Regular

20

H4

Regular

32

H6

Regular

18

SubTitle

Regular

16

Body

Regular

14

Small

Regular

12

H1

Light

72

Aa

Primary: Inter

abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ @#$%&

Aa

Accent: Inter

abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ @#$%&

Text Colors

All text must use one of the following colors. We use opacity in the color so that as the background darkens the text will darken and increase contrast.

Primary Text

Secondary Text

Disabled Text

Link Color

#F9FAFF

100%

100%

80%

50%

#F9FAFF

Opacity

Hex Code

Style

#F9FAFF

#4E4AFF

Primary Text

Secondary Text

Disabled Text

Link Color

#080026

100%

100%

80%

40%

#080026

Opacity

Hex Code

Style

#080026

#4E4AFF

Brand

|

Typography

Brand Fonts

The Inter typeface is the main typeface I have selected to use throughout the Morph ERP system.


All type should have distinct levels of hierarchy between headlines, subheads and body copy. Type should always use brand colors. The minimum size for any typeface is 10px for digital material.

Our Iconography Style

We use minimalist, outlined icons that stand out. We also try to use rounded corners as much as possible, though sometimes sharp corners are needed to communicate an idea.

How to access

You can access all icons directly from the below link

We get 2000+ icons from Material Design

How to style icons

Icons are a great way to add color to a page. Use the primary and secondary brand colors or the brand alert color that conveys the appropriate meaning. Avoid the darkest shades so icons don’t stand out too much. At the same time, avoid making them so light they have a poor contrast.

Brand

|

Iconography

Brand

|

Logo Design

Our color palette is both calming and energizing.


The primary color blue represents innovation, reliability, trust.


The secondary color purple represents transformation, growth, and scalability

Color Inspiration

Concept

Minimal, modern logo design that captivates the essence of the brand morph

Custom font to match the roundness of the icon to create a balanced logo design

Icon design

Wordmark design

Letter ‘m’ + ‘o’

Transformation / metamorphism

Final logo

+

=

UI Elements

Search

I

Search

I

mailnew@gmail.com

placeholdertext

placeholdertext

Field name

Field name

Field name

Field name

Input fields

Default

Hover

Active

Filled

Error state

Field Name

mailnew@gmail.com

Error message here

Filters

4

Priority : High

Expiry date : This week

Add customer

Save as draft

Discard

Cancel

Submit

Cancel

CTAs

Primary button(M)

Filter button

Selected filter item

Secondary button(M)

Tertiary button(M)

Primary button(S)

Secondary button(S)

Tertiary button(S)

Total Customers

Past week

49

14.8%

14%

Overall sales growth

View report

Last month

Set as default

Edit only current selection

Passed

Under Testing

Sent

Failed

Created

Mathew Perry Williams

Asst. Manager Operations

Updated on 12 Jan 2024

Metric cards

Info card

Settings card

Tooltip

Status label

Print

Point of Contact

Company Details

Billing Details

Shipping Details

Company Details

Point of Contact

Billing Details

Shipping Details

Anchor link with status

Illustrations

Custom illustrations were created in the pharmaceutical manufacturing theme following the brand’s visual identity.

Key Features Implemented

Some of the user-centric features designed are as follows :


  1. Action items in the homepage enables users to access priority data at the first instance.

  2. Transparent and streamlined approval process was enabled by displaying request initiated time, initiator, approver details and deadline for approval.

  3. Tailored data view and role based access decreases discrepancies in data.

  4. Activity log to track both financial and non-financial transactions enables hassle free data maintenance and easy retrieval as and when required through simple timeline filtration.

  5. Comments section in the approval page enhances better understanding and provides context for pending approvals and rejections while also acting as a log of actions to be taken specific to the request.

  6. Anchor links enables easy access of extensive and long forms while also conveys the completed/incomplete/error status of the form.

  7. Customisable terms and conditions in the invoice, sales order pages enables the data to be dynamic and scalable as per the business needs.

Key performance indicators

The ERP system is expected to


  1. Reduce time spent switching between systems

  2. Increase first-time-right approvals

  3. Improve inventory accuracy eliminating data inconsistencies

  4. Optimize operations

  5. Improve proactive risk management

  6. Enhance regulatory compliance

Learnings

Most important takeaways are


  1. Designing with scalability in mind from the beginning of the design process is the key to a sustainable product design.

  2. Priority based display of information reduces cognitive load to the user significantly improving usability.

Next Steps

There is always scope for improvement. Based on the customer feedback and reviews user pain points has to be identified and in-depth user interviews across various roles has to be conducted.


Implementing guided tours for new features would help users get acquainted to the system.

Visual Design Projects

Visual Design Projects

Visual Design Projects

Motion Design Projects

Motion Design Projects

Motion Design Projects

Let's talk

copy mail

c

All copyrights reserved 2025

Let's talk

copy mail

c

All copyrights reserved 2025

Let's talk

copy mail

c

All copyrights reserved 2025