Back to Portfolio Barloworld
UI/UX Case Study

4flow

Revamping an intelligent process-automation platform to meet modern UI/UX standards — and to flex to every client's own branding and workflow.

Role UI/UX Lead
Tools Adobe XD · Illustrator · Bootstrap
Team Self-Directed + Devs & Clients
The Brief

Challenge & Objectives

Challenge

The existing 4flow application faced significant challenges in usability, navigation, and user experience. Clients encountered difficulties in navigating the app due to its cumbersome interface and excessive steps required to accomplish tasks. Furthermore, the app lacked efficient customization options, hindering its adaptability to various client needs. Recognizing these shortcomings, our team embarked on a mission to overhaul the app's design and functionality to enhance user satisfaction and streamline operations.

Objectives

Our primary objective was to revamp the 4flow application to meet modern UI/UX standards, providing users with a seamless and intuitive experience. Additionally, we aimed to improve the app's customizability, enabling it to adapt flexibly to the branding and workflow requirements of diverse clients.

Project Scope

Redesigning the app interface, enhancing customization, and ensuring multi-platform compatibility.

Tools

Adobe XD, Adobe Illustrator, Visual Studio, GitHub,C#,ASP.NET,JS,Razor

Role

Leading UI/UX design, collaborating with developers, and managing project execution for client satisfaction.

Team

Self directed, with feedback from the devs and clients.

The Research

Research Synthesis

To synthesize the qualitative data gathered from user interviews, I created an empathy map to identify patterns across users of 4flow, uncover key insights, and generate actionable needs. This helped in understanding user frustrations, goals, and how they interact with the app.

Insights

  • Users want a more intuitive way to create workflows without unnecessary complexity.
  • Users prefer a streamlined interface that minimizes the number of steps required to complete a task.
  • Users encounter difficulties when navigating through multiple levels of customization and settings for their forms.
  • Users find it challenging to track progress and ensure that each stage of the workflow is properly completed.

Needs

  • Users need a more simplified and efficient workflow creation process that saves time and effort.
  • Users need a more flexible and intuitive form builder that allows for easy customization to meet their specific needs.
  • Users need a better way to track their progress and ensure that tasks are completed in the correct sequence.
  • Users need an easier way to manage complex workflows involving multiple team members or stakeholders.
Going Deeper

Research & Strategy

Plan & Goals

Understand the challenges users face when creating workflows and forms in 4flow.
Identify pain points in the current navigation and feature discoverability.
Learn client preferences around customisation, branding, and white-labelling.
Analyse competitor usability to surface clear opportunities for improvement.

Assumptions → Findings

Tap a row to see what the research found.

0 / 3 revealed
✓ Confirmed

Users consistently prioritised fewer steps and faster task completion over feature richness. The demand for intuitive, efficient tools is growing — and competitors are already delivering on it.

✓ Confirmed

Usability testing confirmed that step count was the biggest driver of frustration. Users preferred solutions that minimise steps and automate repetitive actions — competitors with fewer clicks had measurably higher satisfaction.

✓ Confirmed

Clients valued branding options that let them customise the interface without technical expertise. A white-label experience that matched their CI was a key differentiator — not a luxury.

Methodologies

  • Market Research — Mapped trends in workflow and form-building tools to understand where user expectations are heading.
  • Competitive Analysis — Identified strengths and weaknesses of similar platforms to establish clear usability benchmarks.
  • Heuristic Evaluation — Assessed 4flow's existing interface against established UX heuristics to surface specific design flaws.
  • User Interviews — Gathered qualitative insights into frustrations, expectations, and the features users actually want versus what they have.
  • Usability Testing — Observed users navigating 4flow live to identify bottlenecks, confusion points, and task abandonment.
  • Surveys — Collected quantitative data on satisfaction levels and feature preferences across a broader user base.
Design Principle
"Fewer steps, more flow."

Every extra click is a potential exit point. The redesign treated step reduction not as a feature but as the foundation — every screen earned its place or was removed.

The Product

One Platform, Built to Rebrand Itself

The blue workflow builder is 4flow's own platform — the green mobile app is the exact same product, reskinned for a client. Customization isn't a feature here, it's the whole point.

4flow workflow builder canvas with user action, rule, and notification nodes Workflow Builder

Drag-and-drop rules, notifications, and user actions into a live process map.

4flow organisation chart builder showing a business cluster hierarchy Org Chart Builder

Map reporting lines and role hierarchies directly into a workflow.

4flow account and profile management screen with user roles and security groups Profile & Roles

Account details, user roles, sites, and security groups in one panel.

4flow stand-by user transaction form with signature capture Transaction Form

Configurable forms, validation, and digital signatures per transaction.

4flow grid testing form layout builder with map and signature fields Form Layout Tools

Grid, map, and signature fields, laid out and tested live.

4flow transaction types admin table with permissions and current rules Transaction Admin

Create, edit, and permission every transaction type from one table.

Outcome

What We Delivered

A fully rebuildable process-automation platform — faster to navigate, easier to brand, and flexible enough for every client's workflow. Fewer steps, more flow.

Back to Portfolio Next: Barloworld