PayFlex Member Website: Dashboard Graph Redesign
Company Overview
PayFlex, now better known as Inspira Financial, is a leading provider of financial wellness solutions, helping individuals and employers manage health and financial benefits with ease.
Roles
UX Design
UI Design
Research & Analysis
Prototyping
Wireframing
User Testing
Responsive Design
Design Process
1. Discovery Phase: Identifying Problems Through Research
The initial horizontal bar graph layout posed several usability challenges:
Users struggled to interpret their financial data quickly due to cluttered visual elements.
Critical information, such as "Available Funds," lacked sufficient emphasis.
The design, though functional, did not fully optimize the mobile experience for clarity and ease of use.
User feedback and usability testing underscored the need for a clearer and more intuitive financial visualization.
2. Define Phase: Brainstorming Solutions
Key objectives for the redesign included:
Simplifying the layout to ensure clarity across devices.
Highlighting "Available Funds" prominently for quick access to essential financial data.
Enhancing mobile responsiveness to ensure a seamless experience for users on smaller screens.
Low-fidelity wireframes were created to explore layout improvements and presented to stakeholders for feedback.
3. Design Phase: Prototyping the Improved Design
The redesigned horizontal bar graph featured:
Prominent "Available Funds" Section: Bold colors and larger fonts drew attention to this critical data point.
Mobile-Optimized Responsiveness: The layout dynamically adjusted for smaller screens, with streamlined spacing and touch-friendly interactions.
Improved Visual Hierarchy: Labels and bars were simplified to enhance readability, with contrasting colors providing clear differentiation between financial categories.
4. Testing Phase: Usability Testing and Iteration
User testing was conducted to evaluate the updated design. Key findings included:
The emphasis on "Remaining election" and “Funds used” was well-received, with users commenting on its improved visibility.
The mobile experience was praised for its responsiveness and intuitive navigation.
Minor tweaks, such as increasing bar padding for better touch interactions, were implemented to further enhance usability.
5. Implementation Phase: Finalizing the Design
The final design achieved the following improvements:
Clear Visuals: Financial data, especially "Available Funds," is now easy to identify at a glance.
Mobile Optimization: The graph seamlessly adapts to mobile and desktop environments, ensuring accessibility across all devices.
Modern Aesthetic: A clean, minimalist design supports effortless data interpretation.
