EdTech / Mobile App / UI Focus
A lightweight companion app built for ZIM students, ZIM Helper supports users in managing their learning experience.
Project overview
Overview
ZIM Helper is an all-in-one English learning support app tailored for ZIM students. While the app offers powerful tools like progress tracking and personalized study plans, its outdated UI and inconsistent design theme created friction in the overall experience.
This project focused on reimagining the app’s visual identity to feel more modern, consistent, and student-friendly - without compromising functionality. The goal was to create a cohesive theme that reflects ZIM’s evolving brand and enhances usability across all screens.
What I actually did in this case study
In this case study, I led the theme redesign for ZIM Helper - from auditing the existing UI to crafting a refreshed visual system. I conducted a UI/UX audit to identify visual inconsistencies, then developed an updated theme with improved colors, typography, and spacing.
I rebuilt core UI components for better visual cohesion, ensured responsiveness and accessibility across mobile screens, and worked closely with developers to implement the new theme smoothly into production.
The Challenges
Problem Statement
The current ZIM Helper app UI lacks visual consistency, clarity, and mobile-optimized structure - making it harder for students to navigate learning resources, track progress, or interact with features meaningfully. Despite being a mobile-first solution, the design carries over many elements from a desktop mindset, affecting usability and engagement.
ZIM Helper - Current App UI
Inconsistent Design Language
Lack of standardized spacing, color tokens, and component styling leads to visual inconsistency and poor scalability.
Poor Mobile Optimization
Some UI elements are clearly inherited from desktop workflows, which disrupts the mobile experience.
Overwhelming Information Layout
Too much dense content packed into a single view - making it hard for users to focus or take action.
Disconnected Navigation & Flows
Users may get lost as they switch between features due to inconsistent navigation and lack of clear feedback or flow continuity.
Research Summary
Before building the system, I knew that a strong structure was essential for long-term scalability and easier team adoption. So, I focused my research and exploration on three key areas:
Understanding How Students Really Use the App
To gain deeper insights, we also planned to track real user behavior across the app - focusing on how students navigate, which screens they spend the most time on, and where they tend to drop off. This data would help us identify pain points that aren’t always visible in the UI itself and guide decisions on layout, content hierarchy, and interaction improvements.
User Screen-flow - Student account
By combining tracked screen flow data with direct user feedback from students and Education Consultants (ECs), I uncovered several experience issues affecting usability and clarity in the ZIM Helper app:
60%
people check the timesheet daily
86%
people use the timesheet on Friday
Most colleagues expect the same functionality for the new timesheet
Understanding How Students Really Use the App
To gain deeper insights, we also planned to track real user behavior across the app - focusing on how students navigate, which screens they spend the most time on, and where they tend to drop off. This data would help us identify pain points that aren’t always visible in the UI itself and guide decisions on layout, content hierarchy, and interaction improvements.
Design foundation
Based on the research findings, I established a set of design principles to guide the redesign. The goal was not only to modernize the interface, but also to create a more approachable learning experience for students across mobile devices.
The redesign focused on improving information hierarchy, reducing visual complexity, and creating reusable UI patterns that could scale with future features.
Information Hierarchy
Research showed that students primarily visit ZIM Helper to check their schedules, continue learning, and access course-related resources. These high-frequency tasks became the foundation for reorganizing the homepage.
Rather than presenting every feature with equal importance, I prioritized the most commonly used actions and reduced visual competition between essential learning tools and secondary utilities.
Homepage Content Prioritization
I also restructured the utility menu to better match different user groups. For enrolled students, learning-related features such as schedules, assignments, AI practice, and course support are surfaced first. For guest users, the menu emphasizes publicly available tools and promotional content instead of course-specific features.
Grouping utilities by purpose and prioritizing them based on user needs created a clearer navigation experience while making important actions easier to discover.
Grouping & Rearranging Utilities
Grouping utilities by purpose
Visual Language
The visual style was refreshed to feel lighter and more approachable without losing familiarity for existing users.
Rounded components, simplified illustrations, subtle gradients, and consistent iconography create a friendlier learning environment while maintaining a clean and structured interface.
Applying the Design Language Across Key Features
Reusable Components
To improve consistency and support future development, commonly used patterns such as cards, buttons, badges, navigation bars, and status indicators were designed as reusable components.
This foundation made it easier to maintain visual consistency across different features while reducing design and implementation effort.
UI Components
Final Design
After rethinking the visual language of ZIM Helper, the updated design delivers a cleaner, more cohesive user experience across both mobile and tablet.
Revamped Home Page
The redesigned homepage now offers clearer hierarchy and better visual balance. Key features are grouped more intuitively, and the new layout adapts seamlessly across mobile and tablet views.
New Home Page - Tablet
New Home Page - Mobile
Before & After Comparison
A side-by-side look clearly shows improvements in structure, spacing, and readability.
Visual language was unified with a stronger color system, modern typography, and streamlined icons.
The home screen became more personalized and action-driven, giving users immediate access to study tools and recommended content.
Forum and learning screens now follow a clearer layout, better supporting skimming and quick actions like commenting or submitting assignments.
We introduced a more vibrant and modular card layout to support content density while maintaining readability.
Design Show Case
Overall, the redesign improves clarity, user motivation, and daily engagement - while giving the app a more professional and approachable look.
New App Thumbnails
To match the refreshed identity, we also designed new promotional visuals that showcase the app's most helpful features. Each screen highlights a core benefit, making the app feel approachable and useful from the very first impression.
ZIM Helper - App thumbnail
Retrospective
Looking back, the ZIM Helper theme redesign was more than a visual refresh - it was a strategic shift in how we support students through design. By unifying the visual language, prioritizing key learning actions, and aligning the interface with mobile usage patterns, I turned scattered experiences into a connected journey.
Throughout the process, I've learned that:
Consistency builds trust
Unifying themes and components gave the app a more professional, reliable feel.
Content hierarchy matters
Reorganizing layouts to match real student needs (like quick access to progress, materials, and help) drastically improved usability.
Small details make a big difference
From icon choices to spacing, every UI detail played a role in helping users feel at ease and in control.
While there’s still more to uncover through real-world testing, this redesign laid a solid foundation for future improvements - and most importantly, helped make learning a little easier, every day.
