UX/UI Case Study: M-hibis Bank App Redesign

‍Overview: Toaster Studio collaborated with HRC Company, a leading provider of comprehensive banking software solutions, to redesign the M-Hibis mobile banking app. The project's primary focus was on enhancing the user experience (UX) and user interface (UI) to ensure a seamless and enjoyable banking experience. This redesign aimed to modernize the app, integrate advanced features, and align with contemporary design trends. E-laborat played a crucial role as a partner in research and planning, bringing additional expertise to the project.

Background: HRC Company is renowned for its Hibis banking system, a modular solution used by numerous banks and savings institutions both domestically and internationally. The need for a modern, user-friendly interface that aligns with current banking needs led to the initiation of the M-hibis mobile bank redesign project.

Project Goals:

1. User-Centric Design: Develop an intuitive interface to improve user engagement and satisfaction.
2. Streamlined Navigation: Create a seamless navigation experience for users to easily access banking services.
3. Modern Aesthetics: Update the visual design to reflect contemporary trends and enhance brand identity.
4. Feature Integration: Incorporate new features that align with current banking needs and user expectations.
5. Rapid Prototyping: Utilize tools like Webflow for high-fidelity prototyping and fast iterations to refine the design efficiently.

Challenges:

• Designing an interface that balances aesthetics with functionality.
• Integrating new features without compromising usability.
• Ensuring a cohesive and modern visual identity that aligns with the brand.

Solutions and Features Implemented by Toaster Studio:

1. Enhanced User Interface (UI):
   • Adopted a clean, modern design language with a focus on simplicity and clarity.
   • Utilized a consistent color palette and typography to create a cohesive brand identity.
   • Implemented adaptive design techniques to ensure optimal performance across various devices.
2. Improved User Experience (UX):
   • Conducted user research to understand pain points and preferences, informing the design process.
   • Simplified navigation flows to enable users to perform tasks with fewer steps.
   • Designed interactive prototypes and conducted usability testing to refine the user experience.
3. Advanced Functionalities:
   • Quick Loans: Integrated a feature allowing users to apply for quick loans directly through the app, with an easy-to-follow process.
   • ATM Locator: Developed a comprehensive ATM and branch locator with real-time updates and alerts.
   • Digital Onboarding: Enabled new users to open accounts and complete KYC processes digitally, enhancing convenience and reducing onboarding time.
4. Design-Focused Aspects:
   • High-Fidelity Prototyping: Used Webflow to create high-fidelity prototypes, allowing for rapid and accurate visual representation of the final product.
   • Fast Iterations: Leveraged Webflow’s capabilities for fast iterations and easy adjustments based on continuous feedback.
   • Collaborative Design Process: Worked closely with developers to ensure the design was feasible and aligned with technical requirements, while E-laborat’s input enriched the planning and research phases.

Design Process:

1. Discovery Phase:
   • Conducted stakeholder interviews and user research to gather insights.
   • Defined project goals, user personas, and key performance indicators (KPIs).
   • Collaborated with E-laborat, leveraging their expertise in research and planning to create a solid foundation for the redesign.
2. Conceptualization Phase:
   • Created wireframes and low-fidelity prototypes to map out the user journey.
   • Iterated on the design based on feedback from HRC Company and E-laborat.
3. Design and Development Phase:
   • Developed high-fidelity prototypes using Webflow, allowing for rapid and accurate visual representation of the final product.
   • Utilized Webflow for fast iterations and easy adjustments based on continuous feedback.
   • Collaborated with developers to ensure the design was feasible and aligned with technical requirements.
4. Testing and Refinement Phase:
   • Conducted usability testing sessions with real users to gather feedback.
   • Iterated on the design to address usability issues and enhance the overall experience.

Results:

• Increased Engagement: User engagement metrics improved significantly, with higher user retention and satisfaction rates.
• Operational Efficiency: The streamlined design reduced the time required to perform key banking tasks.
• Market Competitiveness: The updated app positioned HRC Company as a leader in mobile banking solutions, attracting new users and retaining existing ones.
• Positive Feedback: Received positive feedback from users and stakeholders, highlighting the app's improved usability and aesthetic appeal.

Conclusion: The UX and UI redesign of the M-hibis mobile banking app by Toaster Studio successfully met its objectives, creating a modern, user-friendly interface that aligns with current banking needs and design trends. The collaborative effort with HRC Company and E-laborat resulted in a cutting-edge mobile banking solution that enhances user experience and operational efficiency. This case study demonstrates the importance of user-centric design in developing effective digital banking solutions, highlighting the pivotal role of research, planning, and iterative development in achieving a successful outcome.

‍