UI/UX Review

UI/UX Review

UI/UX Review

INDUSTRY

Business Relationship Management (BRM)

Contributions

UX/UI Review

Duration

2 weeks

Release

2023

🎯 Goals

The primary goals for the Qollabi UX/UI Review were:

The primary goals for the Qollabi UX/UI Review were:

  1. Improve Usability

Simplify navigation and workflows to make the platform more intuitive for both novice and experienced users.

Simplify navigation and workflows to make the platform more intuitive for both novice and experienced users.

  1. Enhance Visual Consistency

Identify and resolve inconsistencies in the design to create a cohesive and professional user interface.

Identify and resolve inconsistencies in the design to create a cohesive and professional user interface.

  1. Optimize User Engagement

Refine interactive elements and workflows to increase user satisfaction and platform adoption.

Refine interactive elements and workflows to increase user satisfaction and platform adoption.

  1. Streamline Information Architecture

Restructure content and navigation to ensure users can easily locate and understand the tools and resources available.

Restructure content and navigation to ensure users can easily locate and understand the tools and resources available.

  1. Increase Accessibility

Ensure the platform adheres to WCAG AA standards, making it usable for a diverse audience, including those with disabilities.

Ensure the platform adheres to WCAG AA standards, making it usable for a diverse audience, including those with disabilities.

  1. Provide Actionable Insights

Deliver a comprehensive list of prioritized recommendations that align with business objectives and user needs.

Deliver a comprehensive list of prioritized recommendations that align with business objectives and user needs.

👀 Findings

Login Form

• The form’s position on the left reduces visibility and usability, making credential input uncomfortable.
• Lacks a “Save credentials” feature, leading to increased friction for returning users.
• Including value propositions and explanatory tips on the right could improve onboarding.

• The form’s position on the left reduces visibility and usability, making credential input uncomfortable.
• Lacks a “Save credentials” feature, leading to increased friction for returning users.
• Including value propositions and explanatory tips on the right could improve onboarding.

Components

• Inconsistent styles for input fields, dropdowns, and buttons reduce usability.
• Default states of dropdowns appear disabled, causing confusion.
• Components do not meet WCAG accessibility standards, requiring updates to contrast, focus states, and touch targets.

• Inconsistent styles for input fields, dropdowns, and buttons reduce usability.
• Default states of dropdowns appear disabled, causing confusion.
• Components do not meet WCAG accessibility standards, requiring updates to contrast, focus states, and touch targets.

Team Education and Advocacy

• UI adjustments are needed for hover states and comment indicators.
• Expandable cards lack clarity in information structure and color usage.
• Certain states like “new comment added” are missing.

• UI adjustments are needed for hover states and comment indicators.
• Expandable cards lack clarity in information structure and color usage.
• Certain states like “new comment added” are missing.

Seamless Collaboration with Developers

• Table header and components need clearer categorization and usability improvements.
• Users cannot remove filters with a single click, leading to inefficiencies.
• Tutorials or tooltips are absent, which could help guide users.

• Table header and components need clearer categorization and usability improvements.
• Users cannot remove filters with a single click, leading to inefficiencies.
• Tutorials or tooltips are absent, which could help guide users.

Modals

• Crowded layout and excessive information on modals reduce usability.
• Close icons are confusing, appearing risky due to their color.
• Advanced options lack clarity, and empty states require redesigning for better engagement.

• Crowded layout and excessive information on modals reduce usability.
• Close icons are confusing, appearing risky due to their color.
• Advanced options lack clarity, and empty states require redesigning for better engagement.

Columns View

• Column reordering is not available, limiting flexibility.
• Filter plans need better organization and improved usability.
• Icons and their functionalities need clarification for user understanding.

• Column reordering is not available, limiting flexibility.
• Filter plans need better organization and improved usability.
• Icons and their functionalities need clarification for user understanding.

Account Details

• Tabs and input fields need redesigns for improved clarity.
• Buttons should be fixed at the bottom for better accessibility.
• Strategy tab text and icons lack visibility, needing updates for consistency.

• Tabs and input fields need redesigns for improved clarity.
• Buttons should be fixed at the bottom for better accessibility.
• Strategy tab text and icons lack visibility, needing updates for consistency.

Enhancing Accessibility and Usability Through UX/UI Redesign

Enhancing Accessibility and Usability Through UX/UI Redesign

2

weeks

34

pages

Process

Research & Discovery

Stakeholder Calls: Held discussions with the business team to understand platform goals, user demographics, and pain points.

Heuristic Evaluation: Assessed the platform using Jakob’s Heuristics to identify usability flaws and inconsistencies.

Accessibility Review: Conducted WCAG compliance checks to evaluate the accessibility standards of the platform.

User Feedback Analysis: Reviewed existing user feedback to pinpoint specific challenges and improvement areas.

Planning & Analysis

Component Assessment: Cataloged existing components to identify inconsistencies in styles, states, and behaviors.

Navigation Mapping: Mapped the platform’s user flows and information architecture to identify bottlenecks and redundancies.

Competitor Benchmarking: Researched similar platforms to identify best practices and opportunities for differentiation.

Redesign & Recommendations

Component Redesign: Updated input fields, dropdowns, buttons, and other key elements to align with WCAG standards and improve usability.

Information Restructuring: Suggested reorganizing modals, columns, and tabs for better clarity and reduced cognitive load.

Visual Consistency: Proposed updates to align the platform’s visual language and enhance brand identity.

Accessibility Enhancements: Incorporated actionable recommendations to meet at
least AA compliance.

Outcome

The redesigned platform effectively addressed the initial pain points while delivering a user-friendly and accessible experience. It combined intuitive usability with modern design principles, ensuring a cohesive and visually appealing interface that met accessibility standards and improved overall
user satisfaction.

Other case studies

BCR

Empower Your Financial Future

Pazanga

Full service marketing and PR for healthcare and life sciens.

Tamoil

Empowering fleet management with flexible budgets

BCR

Empower Your Financial Future

Ready to go beyond the moon?

See how we can turn your brand into a stellar success!

By clicking this button, you agree to the site's Privacy Policy and consent to the processing of your personal data.

Want to jump on a call?

Book a 30 min call via Calendly

Ready to go beyond the moon?

See how we can turn your brand into a stellar success!

By clicking this button, you agree to the site's Privacy Policy and consent to the processing of your personal data.

Want to jump on a call?

Book a 30 min call via Calendly

Maya Design Lab

Designs that go beyond the moon.

© 2024, MayaUX. All rights reserved.

LinkedIn

Instagram

TikTok

Explore

Home

About us

Services

Case studies

Blog

coming soon

Industries

SaaS

Fintech

Banking

Ecommerce

Logistics

Telecom

Medical

Support

FAQ

Contact

Terms and conditions

Privacy Policy

Maya Design Lab

Designs that go beyond the moon.

© 2024, MayaUX. All rights reserved.

LinkedIn

Instagram

TikTok

Explore

Home

About us

Services

Case studies

Blog

coming soon

Industries

SaaS

Fintech

Banking

Ecommerce

Logistics

Telecom

Medical

Support

FAQ

Contact

Terms and conditions

Privacy Policy

Maya Design Lab

Designs that go beyond the moon.

© 2024, MayaUX. All rights reserved.

LinkedIn

Instagram

TikTok

Explore

Home

About us

Services

Case studies

Blog

coming soon

Industries

SaaS

Fintech

Banking

Ecommerce

Logistics

Telecom

Medical

Support

FAQ

Contact

Terms and conditions

Privacy Policy