Overview

The client requested a comprehensive UI overhaul for their multilingual resource library app. This redesign involved multiple stages, including wireframing, creating a new design system (covering text styles, colors, and components), redesigning each existing page, and enhancing interactive elements such as animated icons.

Wireframing

To accommodate a new feature—a daily content widget—we restructured the dashboard layout. This required refining the navigation bar, grid system, and carousel UX to improve usability and accessibility.

For resource detail pages, we focused on optimizing content presentation by addressing issues such as cluttered layouts, inconsistent typography, and difficult navigation. We structured key details into clearly defined sections, including descriptions, authors, related content, and various content formats. This approach enhanced readability and created a more intuitive browsing experience.

Design System

We carefully integrated every original design component into the updated system to ensure consistency across the app.

• Colors: We followed the Material Design naming scheme to enable scalable theme variations while ensuring proper state representation. Additionally, we developed a color system that supports both light and dark themes.

• Typography: Languages using the Hindu-Arabic alphabet utilize the Poppins font, while other scripts are supported by Noto Sans, ensuring compatibility across diverse languages.

• Components: We standardized UI elements such as buttons, modals, form inputs, and tooltips to create a cohesive experience across all screens. Each component was designed with accessibility and responsiveness in mind, ensuring seamless interaction on various devices.

UI Design

Given the extensive scope of the application, we prioritized key screens that were the most frequently used and critical for user engagement to deliver a streamlined and impactful redesign within the six-month timeline. The selected screens included:

• Dashboard: Redesigned to accommodate the daily content widget, improving navigation efficiency and content discovery.

• My Library: Enhanced with improved categorization, filtering, and sorting options for better content management.

• Menu: Simplified for a more intuitive user experience, ensuring seamless access to core features.

• Daily Content: Optimized for readability and engagement, ensuring smooth integration with the overall app structure.

• Search: Refined with enhanced filtering and keyword suggestions to improve search accuracy and usability.

• Resource Detail Pages (Video, Audiobook, and Book): Standardized layouts across different media types, ensuring consistent and intuitive content presentation.

• Global Sharing Impact: Introduced a dedicated section to highlight user contributions and engagement, reinforcing community-driven content sharing.

Icon Design & Animations

To enhance user interaction and engagement, we incorporated animated icons into the navigation bar. These icons smoothly transition and animate when clicked, providing users with visual feedback and reinforcing navigation flow. The animations were created using Rive, allowing for lightweight, high-quality animations without compromising performance.

Conclusion

This UI overhaul significantly improved the app’s usability, visual hierarchy, and user engagement. By implementing a cohesive and scalable design approach, we ensured that the app remained accessible across multiple languages and content types. The structured updates enhanced navigation, readability, and overall user experience, resulting in a more seamless and engaging platform for its users.