Redesign of the educational app
How a UX audit and a new design system solved the low conversion problem in an educational app
Key poins
Project overview
ilmi is an educational Android application offering users over 300 courses for professional and personal growth. This project represents a complete redesign of the app, which faced a critical business problem: catastrophically low sales conversion due to serious UX flaws.
The redesign resulted in an intuitive and visually cohesive system that eliminated key barriers on the user's path to purchase and laid a solid foundation for future product development through a new design system.
App audience
1000+
active users
Redesign duration
36 hours
the full work period
My Role
The "Anti-crisis" designer: from fixing mistakes to building a system
In this project, I was the sole designer, which meant full responsibility for the outcome. I joined the team to fix the mistakes of the previous design and lay the foundation for a scalable product.
On this project, I accomplished the following:
  • A complete application redesign: creating all mockups from scratch, based on the findings from the UX audit.
  • Design system development: I designed and built a new design system (excluding the original color palette) to ensure consistency and accelerate future development.
  • Collaboration with development: I went beyond just handing off mockups by implementing a design review process, preparing lists of revisions for the developers, and overseeing the quality of the interface implementation.
Work stages
  1. Audience
User persona
2. Customer journey
Analysis of how a customer becomes a user
3. In-App goals
Defining key touchpoints and functionality
4. Redesign
Changing the app's visuals and logic
5. Component assembly
Building the design system
Problem statement
With an audience in the thousands, the app was generating only a few sales per week. It became clear that the problem was with the product itself, not the marketing.
My initial UX audit revealed that the previous version of the app didn't just look outdated; it actively hindered users from making a purchase. The app was failing its primary function—to sell courses. My task was not just to "refresh the visuals," but to completely rethink the user experience to eliminate these barriers.
Redesign goals
App appearance
To make the application visually appealing to the user, while preserving the brand's style and reducing visual noise.
User experience (UX)
To improve the interaction experience by making the app intuitive, uniform, and consistent. To shorten the user's path to their goal.
Conversion and loyalty
To increase user loyalty through a friendly and responsive interface. To shorten the user's path to achieving their goals during interaction.
Audience
The key target audience is a user who is striving for self-development but is limited in time and may not have extensive experience with educational platforms.
Main page
  • Banner gallery: We tell users about benefits, and showcase promotions and special offers.
  • Navigation menu: Added to the bottom of the screen for convenient navigation through key sections.
  • The first screen: It now introduces the app via a banner, shows key categories in the "Fields of Study" block, and displays popular courses.
  • Profile: Access to the profile is duplicated (at the top via the avatar and in the bottom menu) to accommodate the habits of different user groups.
Field of study page
  • Search bar and sorting: Allow the user to quickly find a course by name or filter by price, rating, and popularity.
  • Course cards: An option to add to "Favorites" has been included. The tile-based layout of the cards is repeated across different pages, creating a familiar and easily recognizable pattern.
Course page: the first screen
  • Social proof: A block was added with the number of students already enrolled, which serves as a trust trigger.
  • "Start Learning" button: This replaced the "Buy" button to reduce psychological pressure and shift the focus to gaining value.
  • Fixed buttons: The purchase and "add to favorites" buttons are fixed to the bottom of the screen and are always accessible while scrolling.
Cart page
  • "Proceed to Checkout" button: Replaced the "Buy" button to test the hypothesis of lowering the psychological barrier.
  • Cart management: The "Clear Cart" and "Remove Course" functions were made less prominent to prevent accidental clicks.
  • Transparency: The course access period and the final price are clearly displayed.
Checkout
  • ilmi Balance: The preferred payment method. The cashback display highlights the benefit of this payment option.
  • Balance: If a user has insufficient funds, a "Top Up" button is displayed, which directs them to the balance top-up page.
  • Cashback: An option to apply cashback via a toggle switch. We also display the amount that will be deducted from the cashback balance.
UI-kit
One of the main problems of the old design was its inconsistency. To solve this problem at its core and simplify the lives of developers in the future, I created and documented a new design system from scratch.
It included all the core components, states, text styles, and spacing. This not only ensured the visual consistency of the new design but also became a valuable asset for the company.
Outcomes
  • A scalable design system was created: The main result of the project is not just a set of mockups, but a ready-to-use system of components. It significantly simplifies and accelerates the development of new screens, saving the company's resources in the long term.
  • Critical UX barriers were eliminated: The new design solved the obvious problems that directly contributed to the catastrophically low conversion rate, creating a clear and logical user path from first exploring the app to making a purchase.
  • A development plan was formed (MVP2): During the prioritization process, a clear backlog was created for the next version of the product (profile redesign, progress bars on cards, expansion of payment functionality), which demonstrates my product vision.
Made on
Tilda