eBroker/IOIx Software

Case Study

Objective

IOIx Software aimed to improve the accessibility and usability of its healthcare client portal across desktop, tablet, and mobile devices. The existing WordPress-based portal lacked consistency and functionality on smaller screens, leading to user frustration and reduced engagement. The goal was to create a responsive design that ensured seamless navigation and brand consistency for healthcare clients.

Challenge

The portal needed to support a diverse user base, healthcare administrators and staff, accessing it on various devices with differing screen sizes and operating systems (Windows, iOS, Android). Key issues included:

• Non-responsive layouts causing text overlap and inaccessible buttons on mobile.
• Inconsistent branding across breakpoints.
• Slow load times impacting user retention.

Approach

1. User Research: Conducted interviews and surveys with healthcare clients to identify pain points, focusing on device usage and navigation preferences. Analyzed usage data to prioritize mobile-first design.
2. Wireframing & Prototyping: Created wireframes in Photoshop to map out responsive layouts, ensuring critical features (e.g., patient data access, support forms) remained intuitive across devices. Built interactive prototypes to test navigation flows.
3. Responsive Design Implementation: Utilized CSS and HTML within WordPress to develop a fluid grid system, adapting layouts from desktop (1200px) to tablet (768px) and mobile (320px). Incorporated media queries to optimize images and reduce load times.
4. Collaboration: Worked closely with developers to integrate proprietary software into 80+ client websites, ensuring compatibility and consistency. Partnered with stakeholders to align designs with brand standards.
5. Usability Testing: Conducted tests with users across devices, iterating based on feedback to refine button sizes and touch targets for mobile users.

Solution

Delivered a fully responsive WordPress portal with:

• A flexible grid layout adapting seamlessly to all screen sizes.
• Optimized visual assets (e.g., compressed images, scalable icons) reducing load times by 30%.
• Consistent typography and color schemes adhering to brand guidelines across breakpoints.
• Accessible navigation with touch-friendly controls, meeting WCAG 2.0 standards.

Results

• User Satisfaction: Post-launch surveys showed a 40% increase in satisfaction scores due to improved accessibility and ease of use.
• Engagement: Mobile usage rose by 25% within three months, reflecting better functionality.
• Efficiency: Reduced support queries related to navigation by 15%, freeing up staff time.

Key Takeaways

This project highlighted the power of responsive design in meeting diverse user needs while maintaining a cohesive brand experience. It reinforced the importance of user research and iterative testing in crafting intuitive, device-agnostic solutions, skills honed over 20+ years of design experience.