First Principles of SaaS UX · CHAPTER 3 OF 7

Understanding and structuring data

Structuring Data

Understanding Data Is Only the Beginning

Data Also Needs to Be Structured, Knowing what data exists is not enough.

​

It must be organised so the right user finds the right information at the right time, That is what turns raw data into a usable software experience.

Illustration accompanying Understanding Data Is Only the Beginning
Illustration accompanying Understanding Data Is Only the Beginning

Understanding Data Is Only the Beginning

Data Also Needs to Be Structured, Knowing what data exists is not enough.

It must be organised so the right user finds the right information at the right time, That is what turns raw data into a usable software experience.

Illustration accompanying Understanding Data Is Only the Beginning
Illustration accompanying Understanding Data Is Only the Beginning

Understand the Data

Know what each data point means and how it works.

Three Steps to Structure Data: Understand the Data Know what each data point means and how it works. Set Hierarchy & Priority Decide what users need first and what can come later. Data Logo Logo Logo Logo Logo Data Hierarchy Organize data into clear screens, sections, an

Set Hierarchy & Priority

Decide what users need first and what can come later.

Connected data cards arranged around a data board.

Data

Logo

Logo

Logo

Logo

Logo

Three Steps to Structure Data: Understand the Data Know what each data point means and how it works. Set Hierarchy & Priority Decide what users need first and what can come later. Data Logo Logo Logo Logo Logo Data Hierarchy Organize data into clear screens, sections, an

Data Hierarchy

Organize data into clear screens, sections, and navigation.

Three Steps to Structure Data: Understand the Data Know what each data point means and how it works. Set Hierarchy & Priority Decide what users need first and what can come later. Data Logo Logo Logo Logo Logo Data Hierarchy Organize data into clear screens, sections, an
Isometric cubes illustrating structured data.

Flows

Data

Access

Intuative

Tasks

Prior

Users

Three Steps to Structure Data

Structure Software Data in 3 Steps

Three Steps to Structure Data

Structure Software Data in 3 Steps

Understand the Data

Know what each data point means and how it works.

Set Hierarchy & Priority

Decide what users need first and what can come later.

Logo

Logo

Logo

Logo

Logo

Data Hierarchy

Organize data into clear screens, sections, and navigation.

Step - 1

Understand The Data

Step - 1

Understand The Data

Understand the Data

In software, data is any information users enter, view, update, or use to take an action.

​

It can be a name, ID, status, date, amount, prescription, document, or any other information the workflow depends on.

​

Before structuring the software, we first need to understand these data points clearly.

Understand the Data: First Name Last Name Patient Id Age Gender Phone number Email Address Prescription Details Enters Data Adds Data View Data Update Data

First Name

Last Name

Patient Id

Age

Gender

Phone number

Email

Address

Prescription Details

Enters Data

Adds Data

View Data

Update Data

Understand the Data: First Name Last Name Patient Id Age Gender Phone number Email Address Prescription Details Enters Data Adds Data View Data Update Data

Understand the Data

In software, data is any information users enter, view, update, or use to take an action.

It can be a name, ID, status, date, amount, prescription, document, or any other information the workflow depends on.

Before structuring the software, we first need to understand these data points clearly.

Understand the Data: First Name Last Name Patient Id Age Gender Phone number Email Address Prescription Details Enters Data Adds Data View Data Update Data

First Name

Last Name

Patient Id

Age

Gender

Phone number

Email

Address

Prescription Details

Enters Data

Adds Data

View Data

Update Data

Understand the Data: First Name Last Name Patient Id Age Gender Phone number Email Address Prescription Details Enters Data Adds Data View Data Update Data

Small Details Can Create Large Problems

During research for a healthcare product, we noticed that a blood-test input field was too small to display the complete test name.

​

Two tests started with similar letters.Users could not properly validate which test had been selected.

​

The result?

The wrong test was performed and hundreds of samples were wasted.

Small Details Can Create Large Problems: Test Details : Test name Blood test... Blood type B - other details on text

Test Details :

Test name

Blood test...

Blood type

B -

other details on text

Small Details Can Create Large Problems: Test Details : Test name Blood test... Blood type B - other details on text

Small Details Can Create Large Problems

During research for a healthcare product, we noticed that a blood-test input field was too small to display the complete test name.

Two tests started with similar letters.Users could not properly validate which test had been selected.

The result?

The wrong test was performed and hundreds of samples were wasted.

Small Details Can Create Large Problems: Test Details : Test name Blood test... Blood type B - other details on text

Test Details :

Test name

Blood test...

Blood type

B -

other details on text

Small Details Can Create Large Problems: Test Details : Test name Blood test... Blood type B - other details on text

Understanding Data Prevents Bad Decisions

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Human error

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Workflow failure

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Operational cost

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Rework

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Data inconsistency

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Delays

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

User confusion

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Missed information

Process breakdown

A Small Misunderstanding At The Data Level Can Become

Never Treat Data as Just Text in a Box. The size, format, source, purpose, and dependency of a data point can directly affect the solution. That is why important data points need to be broken down properly.

Understanding Data Prevents Bad Decisions

Never Treat Data as Just Text in a Box. The size, format, source, purpose, and dependency of a data point can directly affect the solution. That is why important data points need to be broken down properly.

A Small Misunderstanding At The Data Level Can Become

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Human error

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Workflow failure

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Operational cost

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Rework

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Data inconsistency

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Delays

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

User confusion

Understanding Data Prevents Bad Decisions: Human error Workflow failure Operational cost Rework Data inconsistency Delays User confusion Missed information Process breakdown

Missed information

Process breakdown

Understand These 4 Things

Format

How does the data appear?

Source & Alternatives

Where does the user get it from, and what happens if they cannot find it?

Purpose

Why does the software need it?

Dependencies

What actions or workflows rely on it?

Understand These 4 Things

Format

Source & Alternatives

Purpose

Dependencies

How does the data appear?

Where does the user get it from, and what happens if they cannot find it?

Why does the software need it?

What actions or workflows rely on it?

Example

USC Number

Example

USC Number

USC Number

In the TG Electricity Bill app, every electricity connection has a Unique Service Number — USC.

​

This one data point is used across several important actions in the application.

​

Will break it down using the framework.

Illustration accompanying USC Number
Illustration accompanying USC Number
Illustration accompanying USC Number
Illustration accompanying USC Number

USC Number

In the TG Electricity Bill app, every electricity connection has a Unique Service Number — USC.

This one data point is used across several important actions in the application.

Will break it down using the framework.

Illustration accompanying USC Number
Illustration accompanying USC Number
Illustration accompanying USC Number
Illustration accompanying USC Number

Understand the Format

Format Defines How Data Should Be Entered

​

A USC number contains: 9 Numeric Digits

Knowing this immediately affects the UI.

​

Instead of leaving users guessing, the input should clearly communicate that 9 digits are expected and allow users to validate what they entered.

Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000
Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000

Add USC Number

​

Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000
Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000

Add USC Number

Select one or more USC numbers to pay the bill

000-000-000

Understand the Format

Format Defines How Data Should Be Entered

A USC number contains: 9 Numeric Digits

Knowing this immediately affects the UI.

Instead of leaving users guessing, the input should clearly communicate that 9 digits are expected and allow users to validate what they entered.

Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000
Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000

Add USC Number

​

Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000
Understand the Format: Add USC Number ​ Add USC Number Select one or more USC numbers to pay the bill 000-000-000

Add USC Number

Select one or more USC numbers to pay the bill

000-000-000

Understand the Source

Source: Where Will Users Get This Data From?

​

The USC number is available on the user's electricity bill.

​

But if the app simply asks: “Enter USC Number”

without explaining where to find it, users may get stuck before the workflow even begins.

​

Understanding the source helps us provide the right guidance.

Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source

Understand the Source

Source: Where Will Users Get This Data From?

The USC number is available on the user's electricity bill.

But if the app simply asks: “Enter USC Number”

without explaining where to find it, users may get stuck before the workflow even begins.

Understanding the source helps us provide the right guidance.

Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source
Illustration accompanying Understand the Source

Design for When the Source Is Missing

Users Will Not Always Have the Ideal Source

What happens if the electricity bill is not available?

​

The user may need to find the USC through: Previous SMS / Email, Meter, Customer Support

​

Good UX needs to account for these alternate paths too. Do not design only for the happy path.

Alternate Paths

Ideal path

Design for When the Source Is Missing: Alternate Paths Ideal path

Design for When the Source Is Missing

Users Will Not Always Have the Ideal Source

What happens if the electricity bill is not available?

The user may need to find the USC through: Previous SMS / Email, Meter, Customer Support

Good UX needs to account for these alternate paths too. Do not design only for the happy path.

Alternate Paths

Ideal path

Design for When the Source Is Missing: Alternate Paths Ideal path

Understand the Purpose

Why Does This Data Exist?

​

The USC identifies a particular electricity connection.

It is used to:

​

Pay Bills

View Bill History

Register Complaints

Request Services

Complete Registrations

​

Understanding its purpose tells us how important the data is across the software.

USC Number

Complete Registrations

View Bill History

Register Complaints

Request Services

Operational cost

Understand the Purpose

Why Does This Data Exist?

The USC identifies a particular electricity connection.

It is used to:

Pay Bills

View Bill History

Register Complaints

Request Services

Complete Registrations

Understanding its purpose tells us how important the data is across the software.

USC Number

Complete Registrations

View Bill History

Register Complaints

Request Services

Operational cost

Understand the Dependency

What Depends on This Data?

​

In the TG Electricity app, the USC is required for nearly 80% of key actions, such as paying bills, raising complaints, and requesting services.

​

Understanding this dependency helps us structure the navigation and prioritize access to the USC accordingly.

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Chats

Services

Notification

Rasie complaint

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Chats

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

USC Number

Complaints

Quick actions

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Legacy UI

Complaint status

Archive

Bill History

Archive

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Legacy UI

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Understand the Dependency

What Depends on This Data?

In the TG Electricity app, the USC is required for nearly 80% of key actions, such as paying bills, raising complaints, and requesting services.

Understanding this dependency helps us structure the navigation and prioritize access to the USC accordingly.

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Chats

Services

Notification

Rasie complaint

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Chats

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

USC Number

Complaints

Quick actions

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Legacy UI

Complaint status

Archive

Bill History

Archive

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Legacy UI

Understand the Dependency: Chats Services Notification Rasie complaint Chats USC Number Complaints Quick actions Legacy UI Complaint status Archive Bill History Archive Legacy UI

Understanding Data Sets Priority

Understanding each data point its format, source, purpose, alternatives, and dependencies helps us design the software around how that data is actually used, reducing confusion, errors, and workflow breakdowns.

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown
Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Reducing Confusion

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Errors

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Workflows breakdown

Understanding Data Sets Priority

Understanding each data point its format, source, purpose, alternatives, and dependencies helps us design the software around how that data is actually used, reducing confusion, errors, and workflow breakdowns.

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Reducing Confusion

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Errors

Understanding Data Sets Priority: Reducing Confusion Errors Workflows breakdown

Workflows breakdown

FRAMEWORK CONTENTS

First Principles of SaaS UX

Search documentation

Search scope

Search across all eight guides.

Diagram detail