Back to all work

UI/UX Design · ConnectClient

Admin platform UI rebrand, inside SAP Fiori's constraints

ConnectClient is an internal admin and back-office platform built on SAP Fiori. The existing UI wasn't user-friendly and didn't follow DKSH branding. The goal: improve usability and visual consistency while working entirely within SAP Fiori's system constraints.

Role
Senior UX/UI Designer
Constraints
Built on SAP Fiori, CSS-only customization
Focus
UI RebrandUsabilityPrototypingStakeholder Alignment
ConnectClient platform overview

Key Issues

Three problems, one enterprise system

01

Inconsistent Branding

Visual elements didn't align with DKSH brand guidelines.

02

Confusing Navigation

Users struggled to find key features and workflows.

03

Poor Visual Hierarchy

Important information got lost in cluttered layouts.

Focus Group

Validating usability issues with internal users

I conducted a focus group with internal users to validate usability issues before proposing changes. Two insights stood out: dense layouts felt overwhelming, and clear hierarchy directly improved user confidence, while consistent branding increased trust in the platform.

Discovery & Research

An internal tool with an external consequence

ConnectClient is used by internal reps, but every delay shows up in a client's inbox. Research focused on the reps themselves and how ConnectClient sits inside the wider SAP Fiori ecosystem.

Note on confidentiality: these are internal enterprise platforms. Due to company data policy, full working files, raw research data, and complete dashboards can't be published here. The previews below use illustrative, non-production data to represent the structure, format, and thinking behind each deliverable.

Persona: Priya Nair

Research
Priya NairInternal Client ServiceRepresentativeHandles 40+ tickets/dayCross-system lookupsSAP familiarity

Represents the internal rep who checks order status and approvals across SAP Fiori and ConnectClient daily.

Persona: Hafiz Zulkifli

Research
Hafiz ZulkifliApprovals SupervisorReviews escalations dailyOversees team queueSAP familiarity

Supervises the approvals queue and steps in when reps flag a status conflict between systems.

Persona: Grace Wong

Research
Grace WongSAP Integration AnalystMonitors data syncInvestigates mismatchesSAP familiarity

Owns the data pipeline between SAP and ConnectClient, and is the first call when sync breaks.

Persona: Daniel Ooi

Research
Daniel OoiClient Account ManagerFollows up with clients on statusRelies on rep updatesSAP familiarity

Doesn't use ConnectClient directly, but depends entirely on what the internal team reports back to clients.

Proto Persona: Approvals Supervisor

Research
Approvals Supervisor (proto)ASSUMPTION-BASED · LOW FIDELITYNeed: see all pendingapprovals in one queueFrustration: switching betweensystems to confirm status

Early assumption persona built before supervisor interviews were scheduled.

Proto Persona: New Client Service Rep

Research
New Client Service Rep (proto)ASSUMPTION-BASED · LOW FIDELITYNeed: learn where SAP dataactually lives without askingFrustration: unclear whichsystem is the source of truth

Assumption persona for onboarding new reps, before shadowing sessions were arranged.

Proto Persona: Compliance Reviewer

Research
Compliance Reviewer (proto)ASSUMPTION-BASED · LOW FIDELITYNeed: confirm every approvalhas an audit trailFrustration: permission logicisn't visible on screen

Used to frame governance requirements ahead of a compliance stakeholder review.

Proto Persona: IT Support Analyst

Research
IT Support Analyst (proto)ASSUMPTION-BASED · LOW FIDELITYNeed: diagnose sync issuesquickly when a rep flags oneFrustration: no error log isaccessible from within

Assumption persona representing the support escalation path, pending IT team interviews.

Empathy Map

Research
SAYS"Which system has thelatest status?"THINKS"Is this data even insync?"DOESCross-checks SAP andConnectClient beforeresponding to clientsFEELSUncertain about datafreshness

Synthesized from shadowing 6 client service reps over two weeks.

Stakeholder Map

Research
ProductClient Service RepApprovals SupervisorIT IntegrationSAP AdminComplianceClient Account TeamDirectInfluencing

Maps the internal operators against the governance and integration owners around ConnectClient.

Ecosystem Map

Research
SAP FioriClient PortalApproval EngineAudit LogNotificationServiceConnectClient

Highlights ConnectClient's role as the internal layer between SAP and client-facing systems.

Affinity Diagram

Research
SYNC DELAY"Status lags SAP""Refreshunreliable"ACCESS"Permission errors""Unclear who canapprove"SEARCH"Hard to find oldorders""No filters"

Raw research notes clustered into themes during a synthesis workshop, surfacing the patterns behind user pain points.

Design Approach

Working within the system, not against it

Clean Layouts

Simplified interfaces with better spacing and organization.

Strong Visual Hierarchy

Clear prioritization of information and actions.

DKSH Brand Alignment

Consistent colors, typography, and design language.

No Structural Changes

Delivered entirely within SAP Fiori's system constraints.

Journey & Flow

Where SAP data and ConnectClient disagree

Because ConnectClient has limited-access SAP Fiori integration, the flow and blueprint work centred on data handoffs, mapping exactly where sync delays and permission gaps were introduced.

Journey Map

Journey
QueueSearchVerify SAPApproveNotify3.8

End-to-end emotional curve across the approval review journey, from first touch to task completion, mapped against satisfaction (1–5).

Service Blueprint

Journey
FrontstageBackstageSupport Systems

Frontstage actions, backstage operations, and supporting systems mapped against each other to expose handoff gaps.

User Flow

Journey
Open queueSearchorderData syncedVerify inSAPApprove/RejectNotifyclient

Primary task flow through the product, including key decision points and drop-off risk areas.

Information Architecture

Journey
ConnectClientApprovalsPendingHistoryOrdersSearchStatusAdminPermissionsAudit Log

Navigation and content hierarchy used to structure menus, dashboards, and permissions.

Before & After

Login & homepage

Impact

Current Achievements in DKSH

Scale and ownership across the ConnectClient portal, from strategy through to delivery.

  • Led UX and CX strategy for a client platform supporting 5 regional markets.
  • Designed 50+ enterprise workflows spanning orders, returns, inventory and customer management.
  • Simplified information architecture, improving navigation efficiency by ~35%.
  • Reduced clicks for common tasks by ~25%, speeding up everyday use.
  • Facilitated 20+ workshops with Product Owners and Business stakeholders.
  • Supported digital transformation across multiple client-facing business functions.
  • Produced 25+ personas, journey maps and service blueprints to align teams.

Strategy & Prioritization

Prioritizing a fix within a constrained system

With limited ability to change the underlying SAP system, the numbers below track what ConnectClient itself could control, shown as before → after against the pre-redesign baseline.

VOC Dashboard

Voice of Customer
BeforeAfterSAP data sync delay17% (was 35%)Status visibility13% (was 28%)Approval workflow clarity10% (was 23%)Search performance8% (was 19%)Access permission clarity6% (was 16%)

Share of support tickets and feedback tied to each theme, before the redesign shipped versus today.

CES Dashboard

Voice of Customer
"It was easy to complete my task"5.4/7was 3.0/7wasCUSTOMER EFFORT SCORE

Effort score improved from 3.0 to 5.4 out of 7 across 132 responses. Lower effort correlates with higher retention.

Microsoft Clarity Analysis

Behavioural Analytics
Rage clicks143Dead clicks98Avg. scroll depth (%)58Sessions reviewed1860

Session recordings and heatmaps reviewed for rage clicks, dead clicks, and scroll depth to locate friction.

Power BI Dashboard

Behavioural Analytics
Active usersConversion %FebMarAprMayJunJul

Monthly active users against conversion rate, tracked to monitor adoption after each release.

Opportunity Matrix

Prioritization
Table stakesOverservedUnderservedExcel hereReal-time SAP syncUnified approval queueAdvanced searchPermission clarity UIMobile accessImportanceSatisfaction

Unmet needs plotted by importance vs. current satisfaction to surface where the biggest opportunity gaps sit.

KPI Dashboard

Strategy
96%▲ was 84%Data accuracyrate74%▲ was 41%Adoption9/wk▲ was 14/wkTicketescalations19s▲ was 48sSearch time

North-star and supporting metrics compared against their pre-launch baseline to show whether the redesign is actually working.

Roadmap

Strategy
Q1Q2Q3Q4Fiori integration auditUnified approval queueReal-time status syncPermission governance

Quarterly delivery plan covering discovery, build, rollout, and iteration phases.

Executive Summary

Strategy
Closed the visibility gap between SAP andclient statusMapped every sync delay point between SAPUnified queue design reducedPhase 1 delivered measurable turnaround31%Faster turnaround19%Fewer escalations31NPS

One-page leadership readout summarizing problem, approach, and measurable outcome.

Why This Matters

This project shows my ability to improve usability in real enterprise systems with tight constraints. Working within SAP Fiori's limitations, I delivered meaningful UX improvements: clearer UI, consistent enterprise branding, and positive stakeholder feedback, that enhanced daily workflows for internal users while maintaining system integrity.