Mathe Magic App

Making Math Fun for Everyone UI/UX REDESIGN

Overview

MatheMagic is an educational app designed to make learning math fun and easy for students. The app focuses on teaching basic mathematical operations such as addition, subtraction, multiplication, and division through interactive and engaging content.

Project Brief

The project was about completely redesigning an app to make it easier and more fun for students to learn math. The new design added a colorful and interactive interface. These changes were made to help make learning math more enjoyable and engaging for everyone.

My Role

As the UX/UI designer of this project, my main responsibilities included analyzing the given briefs and the existing design and developing a new, engaging interface adapted to different learning styles.

Tools

Figma: Collaborative design work, and final UI design.
Adobe Photoshop: Utilized for creating custom icons, illustrations, and other visual assets.
Figjam: Facilitated brainstorming sessions

Define

Example of a few pages from the old version of the app

Problem Definition

The core issue identified with the current MatheMagic app is its failure to effectively engage users, particularly young students.

Initial Insights: During the initial project briefing, feedback from the product manager highlighted several critical shortcomings of the current app:

1. User Engagement Issue: The app struggles to keep users engaged due to a lack of interactive elements and visually stimulating content.
2. User Attraction and Retention Issue: The app fails to attract new users and retain existing ones, largely because it does not offer a compelling or enjoyable learning experience.
3. Redesign Necessity: It was clear that a complete redesign was necessary to address these issues and make the app more appealing and effective for its target audience.

Discover

1. User Feedback

At the start of the project, user feedback provided by the product manager played a crucial role in shaping the redesign strategy. Although direct user research was not conducted by me, the following key insights were gathered from existing user interactions and feedback:

2. Benchmarking

To address the issues identified through user feedback, I conducted extensive research on other successful educational apps to identify best practices and draw inspiration for the redesign:

- Khan Academy Kids: Known for its user-friendly and minimalist interface, this app uses vibrant and encouraging color schemes that make learning enjoyable.
- Duolingo: The gamification elements and reward systems in Duolingo were particularly inspiring, as they significantly enhance user motivation and engagement.
- ScratchJr: This app features a creativity-focused interface with simple navigation, which is highly suitable for young children. Its design encourages exploration and learning through play.
- QuickMath: The quick feedback mechanisms and user-friendly quiz formats in QuickMath provided valuable insights for incorporating instant feedback in the MatheMagic app.
- Epic!: Epic!’s rich visual content and colorful interface demonstrated the importance of visually stimulating environments in promoting learning and engagement.
- BrainPop Jr: The interactive elements in BrainPop Jr, such as animations and interactive quizzes, were particularly effective in capturing children's interest.

3. Literature Review

Design Principles: I conducted a literature review to learn about effective design principles for children. This included researching how to capture and enhance young users' attention and interaction, and applying these principles to make the app more suitable for its young audience. Some examples of these principles are:

Designing Global Applications for Children (#Smashing Magazine)
I explored how to design for cultural diversity and universal appeal. This involved adapting design elements like colors and icons to reflect cultural variations, ensuring the app is inclusive and resonates with a broad audience.
https://www.smashingmagazine.com/2011/09/designing-global-applications-for-children/
UX Testing for Children (#Nielsen Norman Group)
The importance of interactive features and quick feedback was emphasized. I applied these principles by integrating engaging elements and providing instant feedback, which made the learning process more dynamic and motivating for children.
https://www.nngroup.com/articles/childrens-websites-usability-issues/
UX Design for Children (Ages 3-12) (#Nielsen Norman Group)
I focused on tailoring the design to different age groups. For younger users, I used larger buttons and simpler visuals, while for older users, I incorporated more complex tasks and detailed content to match their developmental stage.
https://www.nngroup.com/reports/children-on-the-web/
Nielsen Norman Group - Designing for Young Users: Cognitive Considerations
I investigated design strategies suited to the cognitive and developmental stages of children. The research highlighted the importance of simplifying navigation, using clear and intuitive icons, and providing visual cues to support comprehension. This approach ensure that the app’s design appeals to children and aligns with their developmental needs, making learning more accessible and effective.
https://www.nngroup.com/articles/kids-cognition/

Ideation

1. Previous Design Analysis

The analysis of the previous MatheMagic app, informed by benchmarking and literature review insights, as well as user feedback, revealed several critical issues affecting user experience and engagement. Key findings included:

Button Heights: Benchmarking and literature review indicated that buttons should be designed to be child-friendly. The previous app's buttons were not appropriately sized for younger users, making interaction challenging.
Homepage Mascot: The previous app's homepage lacked a visually appealing mascot, crucial for capturing young users' attention and making the app more inviting.
Font Sizes: According to the literature on child-focused design, font sizes in the previous app were too small, making it difficult for children to read and interact with the content effectively. A more playful and readable font is recommended.
Reward System Icon: Benchmarking best practices highlighted the importance of visual indicators for reward systems. The previous app did not include a clear icon for the reward system, which is important for motivating users by visually indicating progress and achievements.
Chat Button Visibility: User feedback and design guidelines suggested that interactive elements need to be easily accessible. The chat button in the previous app was not prominently displayed, making it easy to overlook and affecting its functionality.

Design

1. Colors

Selected color palettes were inspired by successful educational apps researched during the benchmarking phase. Colors were chosen to be bright and engaging, drawing from the vibrant and appealing schemes used by apps such as Khan Academy Kids, Duolingo, and ScratchJr. This approach ensures that the app’s color scheme is not only visually stimulating but also effective in capturing and retaining children’s attention.

2. Font

The fonts were selected as Quicksand for their readability and playful style, ensuring that text is easy to read and aligns with the overall tone of the app. This design choice supports the app’s goal of making math learning both fun and accessible.

3. Visual Elements and Layout

I designed the visual elements and layout of the app to be both engaging and functional. This included creating custom icons, buttons, and illustrations that align with the app’s theme and are appealing to children. I ensured that all visual elements were consistent with the app’s overall aesthetic and contributed to an enjoyable user experience.

4. Feedback Screens

To further enrich the user experience, I have introduced a set of feedback screens that appear based on the user's performance after attempting a math level. These screens are designed to provide positive reinforcement and constructive feedback without causing frustration:

Congratulations Page: Displayed when users successfully pass a math level, celebrating their achievement and encouraging continued progress.
Don't Worry Page: Shown if users do not pass the level, offering encouragement and reassurance to help them stay motivated and try again.
Almost There! Page: Presented when users are close to passing the level but fall slightly short, providing a motivational message that highlights their near success and encourages them to persist.

These feedback screens are designed to offer supportive and constructive feedback, ensuring that the app remains a positive and encouraging space for learning.

Prototype

2. User Testing and Feedback

User testing is generally an important step for validating the effectiveness of a design; however, in this project, user testing was not conducted directly by me. Instead, feedback was gathered from the project manager and other stakeholders during the design process.

A comprehensive design strategy was developed based on existing research and best practices to enhance children's math learning experiences. Reviews and feedback from the project manager and other stakeholders confirmed that the design aligned with business objectives and met user expectations. As a result, evaluations of the design's accuracy and validity demonstrated that the design contributed to the project's overall success at its current stage.

3. Final Design

The final design was completed following the creation of high-fidelity prototypes. All design elements were reviewed and finalized to ensure they met the project goals and requirements. The final design included all visual and functional aspects, providing a comprehensive solution for the app. The design was then handed over to the product manager for further development and implementation.

Page updated

Google Sites

Report abuse