JMMB Moneyline App Redesign
PROJECT OVERVIEW
This project focuses on redesigning the JMMB Moneyline Login and Signup pages to address critical usability challenges. The goal was to create an accessible, user-friendly interface by enhancing visual design, improving WCAG compliance, and reducing cognitive load
Key Issues Identified
The original login experience presented several usability and accessibility challenges that hindered user interaction. Key issues included:
1. Accessibility Challenges:
- IInput fields lacked accessible labels, limiting screen reader functionality.
- Poor contrast in error messages and links reduced readability.
2. Feedback and Error Handling:
- Error messages lacked actionable guidance.
- Modal dialogs were inaccessible to users relying on assistive technologies.
3. Visual Design Challenges:
- Small font sizes and tight spacing hindered readability.
- Placeholder reliance created cognitive load for users.
the current welcome page
Solutions and Redesign Highlights
To address the identified issues, the redesign focused on improving accessibility, error handling, and overall visual design. Key solutions included:
1. Accessibility Enhancements:
- Persistent labels replaced placeholders to support screen readers.
- Contrast for text and buttons was updated to meet WCAG AA standards.
2. Improved Feedback and Error Handling:
- Actionable error messages now guide users (e.g., "Check your credentials or reset your password").
- Modals were fixed to ensure focus moves to interactive elements.
3. Visual Improvements:
- Font sizes were increased to enhance readability.
- Clearer alignment and spacing created a more streamlined layout.
Accessibility and Inclusivity
Accessibility was a priority throughout this project, ensuring the interface meets the needs of users of all abilities. Key enhancements include:
- Screen Reader Support: Persistent labels and clear alt text improve navigation.
- WCAG Compliance: Enhanced contrast and larger touch targets ensure better readability and usability.
- Mobile Responsiveness: Optimized spacing and interactive elements enhance usability on smaller screens.
Additional Consideration
Rational for redesign:
I redesigned the JMMB app's login, signup page, and error handling to enhance usability, align with design principles, and simplify future updates. Error messages were consolidated into a single, user-friendly modal, reducing cognitive load and eliminating anxiety-inducing prompts. The login page was refreshed with a minimalistic design, featuring background imagery inspired by JMMB's social media branding to create a more intuitive and cohesive experience. This redesign not only caters to their target audience of young adults (18–30) and middle-aged users (40+), primarily from mid to low socioeconomic backgrounds, but also ensures accessibility, user-friendliness, and ease of future modifications to keep the design flexible and adaptable.
Mobile Responsiveness:
Ensured all touch targets (buttons, links) meet the minimum size of 44x44 pixels for better usability on smaller screens.
Conclusion
By implementing these changes, the JMMB Moneyline mobile app has been made more accessible, user-friendly, and inclusive. These enhancements aim to provide a seamless experience for all users, reflecting JMMB’s commitment to accessibility and excellent customer service
Reviews
1 review
This redesign is a solid example of prioritizing accessibility and usability while keeping the visual design fresh and engaging. The updates address key usability challenges and align well with modern design standards.
What’s Great:
- Accessibility First: Persistent labels instead of placeholders? It's a big win for screen reader support. Contrast updates? WCAG AA compliance is nailed. It’s great to see accessibility being treated as a priority.
- Error Handling Done Right: Actionable error messages are a game-changer. Instead of leaving users stranded, they now get clear guidance like, “Check your credentials or reset your password.” This is what a user-friendly design looks like.
- Visual Refresh: The new design introduces friendly imagery, better font sizes, and optimized spacing. These tweaks make the app not just easier to use but also more welcoming. It’s clean, it’s modern, and it works.
- Audience-Centric Approach: Minimalistic design paired with elements inspired by JMMB branding hits the right balance. It appeals to both younger users and middle-aged audiences without overcomplicating things.
- Mobile-Friendly Touchpoints: With touch targets meeting the 44x44px standard, usability on smaller screens is smooth and frustration-free. This attention to detail really makes the difference.
What Could Be Better:
- Interactive Details: While modals are now accessible, a bit more testing with assistive tech might reveal additional opportunities to refine the flow further.
- Personal Touch: Adding a layer of personalization—like user-specific greetings—could make the experience even more engaging for diverse audiences.
- Showcasing User Feedback: Including snippets of user feedback from testing would add more depth to the project and reinforce how these changes directly benefit real users.
You might also like
Smartwatch Design for Messenger App
Bridge: UI/UX Rebrand of a Blockchain SCM Product
Pulse Music App - Light/Dark Mode
Monetization Strategy
Designing A Better Co-Working Experience Through CJM
Design a Settings Page for Mobile
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
