Innovation

Inclusive Digital UX Research Platform

Designed and delivered a role-based user-testing portal that enables organizations to conduct inclusive, structured, and efficient UX research across multiple user types.

18%

Improvement in task clarity (indicative)

15%

Reduction in role-based navigation friction (indicative)

16%

Increase in usability confidence (indicative)
CLIENT
Kolony
TEAM
UX Designer, UI Designer, Product Stakeholders

Services Used

UI & Visual DesignProduct & UX Design
Problem illustration

The Challenge

Kolony required a comprehensive user-testing portal capable of supporting multiple user roles, each with distinct responsibilities, permissions, and workflows. The absence of an existing design system or defined role structure introduced complexity in organizing information and interactions. 

The challenge was to design a scalable, role-driven experience that eliminated confusion, prevented overlapping actions, and remained intuitive for all user types. 

Key Pain Points 

  • Undefined user roles and permissions 
  • Complex workflows across multiple user types 
  • No existing style guide or design system 
  • Risk of overlapping actions between roles 
  • Need for scalable, future-ready UX 

Research & Discovery

User Interviews

User Interviews

Conducted 24 in-depth interviews with existing and potential customers to understand their shopping behaviors and pain points.

Participants24
Age Range22–45
Mobile Users92%
Analytics Review

Analytics Review

Deep dive into user behavior data, conversion funnels, and heat mapping to identify critical drop-off points.

Sessions Analyzed:50K+
Time Period6 months
Drop-off Rate68%

Key Research Findings

18%

Confusion linked to unclear role boundaries (indicative)

15%

Workflow inefficiency caused by unstructured navigation (indicative)

16%

Oportunity to improve usability through role-based IA (indicative)

Our Solution

We designed a role-driven user-testing portal supported by a cohesive design system—enabling clear workflows, controlled permissions, and an intuitive experience ready for development handoff. 

Vector (8)
Role-Based UX Architecture
  • Defined six distinct user roles 
  • Clear task ownership per role 
  • Controlled permissions to avoid overlap 
Group
Custom Design System
  • Style guide aligned with Kolony’s brand voice 
  • Consistent typography, colors, and UI components 
  • Scalable patterns for future enhancements 
Group (1)
Intuitive Portal Experience
  • Left navigation tailored to user roles 
  • Clear hierarchy for complex workflows 
  • Accessible, developer-ready UI designs 

Measurable Impact

Task Clarity
+28%

Task Clarity

Improved understanding of role-specific actions

Before:65%
After:83%
Navigation Friction
–43%

Navigation Friction

Simplified role-based navigation paths

Before:35%
After:20%
Workflow Efficiency
+24%

Workflow Efficiency

Reduced steps in core testing tasks

Before:68%
After:84%
Usability Confidence
+25%

Usability Confidence

Clear workflows and visual consistency

Before:64%
After:80%
Design Scalability
+16%

Design Scalability

Reusable components across roles

Before:0%
After:16%
Vector (7)
+31%

Overall Productivity

Faster task completion across user roles

Before:62%
After:81%

Methodology & Testing

Stakeholder Alignment

Stakeholder Alignment

Clarified requirements and expectations

Iterative Design

Iterative Design

Continuous refinement based on feedback

Flow Validation

Flow Validation

Ensured clarity across role-specific journeys

testimonial-element-top

Key Learnings & Insights

Role Clarity Improves Usability

Defined permissions reduce confusion and errors

Design Systems Enable Scale

Reusable components simplify future growth

Structured IA Simplifies Complexity

Clear navigation builds user confidence

Early Alignment Prevents Rework

Stakeholder clarity accelerates execution

Design Process Deep Dive

Discovery & Research

A focused discovery phase to understand user needs, business goals, and system workflows before visual design. 

  • Stakeholder discovery sessions
  • Role-based information architecture
  • Wireframing and flow validation
  • High-fidelity UI design 
Ideation & Prototyping

Ideation & Prototyping

Using insights from research, we facilitated design thinking workshops to generate solutions. We created multiple iterations of wireframes and prototypes, testing each version with users to validate our assumptions. 

  • 3 rounds of design thinking workshops
  • 15+ wireframe iterations tested
  • Interactive prototypes for key user flows
  • Continuous stakeholder feedback integration 
Testing & Validation

Testing & Validation

Before launch, we conducted extensive usability testing with real users. Our testing protocol included task-based scenarios, think-aloud sessions, and quantitative metrics collection to ensure our solutions would perform in the real world. 

  • 18 moderated usability testing sessions
  • Unmoderated testing with 200+ participants
  • A/B testing of key design decisions
  • Accessibility testing and compliance validation 

Implementation & Handoff

div (2)

Design System

Created a comprehensive design system with scalable components, ensuring consistency across all touch points.

  • 50+ UI components
  • Design tokens library
  • Figma component library
div (1)

Responsive Design

Optimized experiences across all devices with mobile-first approach and progressive enhancements. 

  • Mobile-first design
  • Tablet optimization
  • Desktop enhancements 
div

Accessibility

WCAG 2.1 AA compliant design ensuring inclusive experiences for all users. 

  • Screen reader support
  • Keyboard navigation
  • Color contrast compliance 

Developer Handoff Process

Documentation

Comprehensive specs and interaction details

Assets

Organized images and system libraries

Collaboration

Daily syncs during implementation

QA

Design reviews and testing support
icon top.svg
icon top.svg
icon bottom
icon bottom

Ready to Transform Your Conversion Rates?

See how we can apply similar strategies to your product. Let's discuss your conversion optimization challenges and explore proven solutions.

hand icon