Magrid

Objective: Redesign Magrid application - Improving UX/UI design

Role: User research, Interaction and visual design, Wireframing and prototyping

Client: Magrid Learning Solution

Tools: Figma, Miro, Zeplin

Duration: 8 Weeks

Overview:

Magrid is a language-neutral app created to improve preparatory math skills in multilingual schools, addressing a significant challenge for both teachers and students.

Initially launched in Luxembourg, Magrid received approval from the Luxembourg Ministry of Education. With an emphasis on simplicity and ongoing enhancement of its UX/UI design, Magrid has extended its reach to target global markets.

Problem Statement

Making the app more intuitive was a priority. Given that the app relies solely on visuals with no text or voice, creating a seamless navigation experience posed a challenge. Additionally, I was tasked with maintaining the app's existing look and feel for the initial phase of the project.

Timeline

UX Research

Interview and Observation

Several research studies were conducted involving students, and I also gathered feedback from teachers regarding usability and app issues.

I began by observing five children using the application in various sessions. The findings from all research and feedback sessions are summarized as follows:

Lack of consistency.
Confusion regarding button functionality.
Unclear information regarding the number of questions in each level.
Accessibility issues.

Competitor Analysis

While I didn't find any app similar to Magrid that doesn't use language in its instructions, I analyzed various educational applications for children. Unlike other apps, Magrid prioritizes education over entertainment. Therefore, I aimed to maintain a simple and minimal design to minimize distractions.

Meet the Users

By synthesizing the research findings and drawing from my previous knowledge of the Magrid app, I developed the personas. Allow me to introduce Julia and Eli.

Ideation

While staying at home due to COVID-19, I participated in a Figma jam and engaged in real-time communication via Zoom. Here are some initial ideas I contributed. Though they may appear vague, after thorough discussions and background research, they served as my reference points for further design work.

User Flow

Improving the flow was essential for Magrid as the existing app was confusing from the outset. With three elements on the homepage that barely resembled buttons and had unknown functionality, there was a high risk of users getting lost.

Sketches

Preliminary sketches were created based on the user flows. This was done shortly after completing the user flows to ensure that all details were fresh in our minds.

Mid-Fidelity Wireframes and Iterations

I opted to skip sketching and jump straight into mid-fidelity wireframes, keeping the visual aspect in mind. This approach saved me time and facilitated A/B testing to determine which design users found more comfortable.

Design System

During the initial briefing, I was given the Magrid brand book and tasked with minimizing changes. Despite the strict guidelines, I developed the following style guide.

Final Design

The final design of Magrid embodies a user-centric approach, emphasizing intuitive navigation and visually engaging elements to enhance the learning experience. Iterative testing and refinement have played a crucial role in optimizing the app's interface for accessibility and effectiveness across various educational environments.

Retrospective

Reflecting on this project, designing an interface without relying on text cues posed a significant challenge that I successfully tackled. Throughout the project lifecycle, I recognized the indispensable role of conducting usability testing at various stages to ensure optimal user experience. Embracing a user-centric mindset, I prioritized the needs of the end-user above personal preferences, underscoring the importance of empathy in design.

Looking forward, there are areas for improvement that I aim to address in future iterations. I aspire to introduce lighter color schemes to certain UI elements, such as the background, which were initially restricted in the project's first update. Additionally, I intend to allocate additional time to develop features enabling teachers to efficiently manage students' activities, track progress, and assign tasks, thereby enhancing the overall user experience.