{"id":14505,"date":"2023-09-01T08:25:32","date_gmt":"2023-09-01T08:25:32","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=14505"},"modified":"2026-01-26T13:29:23","modified_gmt":"2026-01-26T13:29:23","slug":"web-design-educational-platform","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/web-design-educational-platform\/","title":{"rendered":"Case Study: Magma Math. Web Design for Educational Platform"},"content":{"rendered":"

Our new design case study invites you to dive into the world of education, which is both useful and exciting. Let’s review the website design process for Magma Math, the educational platform that combines educators’ experience with innovative technology and approaches to broaden the horizons of learning and training.<\/p>\n

Project and Client<\/h2>\n

Magma Math<\/a> (earlier known as Matteappen) is an ed-tech company that offers the mathematics platform established to support teachers in making more informed instructional decisions in the classroom and create opportunities for more profound student-driven discourse and collaboration.<\/p>\n

The project has been set up by a global team of educators, tech innovators, life-long learners, and self-proclaimed math mavericks. They believe in mathematics as a creative subject that serves as both a window and a mirror for students worldwide and set a mission for Magma Math to enable educators to create dynamic, student-centered classrooms where all students are challenged and supported appropriately.<\/p>\n

The client approached us with the request to do the UX audit of their product, namely in the aspect of teachers’ interaction with it, and get their website redesigned. Initially, the platform was based in Sweden and on the Swedish educational approach to maths programs; however, at that stage, they were already expanding their presence on the American market as well.<\/p>\n

The creative team engaged in the project from the tubik side included Anton Chyrskyi, Ernest Asanov, Roma Chornyi, Ivan Shvindin, Kyrylo Yerokhin, Natalka Mamchur, Oleksandra Mykhalyk, and Olga Syrotkina.<\/p>\n

In this case study, we will focus on the web design and graphic design part of our collaboration.<\/p>\n

Web Design<\/h2>\n

The client came to us with an already working product, visual identity style, and a clear understanding of what audience they target and what impression they want their website to make on visitors in Sweden and the USA. The primary goal was to find the golden medium and make the websites reflect the consistent and integral brand image in both targeted markets to enhance usability, visual and emotional appeal, informativeness, and engaging user-friendly communication. That’s what we started with.<\/p>\n

\"<\/p>\n

After having done a detailed deep review of the existing product user experience and visual style, having analyzed the target markets and clients’ vision and values based on the current branding, the creative team, in deep collaboration with the client’s team, developed a set of recommendations for visual identity enhancement steps that would unite all the communication touchpoints and channels via which the brand communicates with its audience and offers the solution to its problems. Moreover, these steps had to adapt the existing branding and product to appeal to the American educational services and technologies market. So, the recommendations also formed the foundation of the website design.<\/p>\n

The typography choice for web design fell on the Buenos Aires typeface, showcasing solid readability and a friendly aesthetic with subtle and playful elements. As the creators of the fonts, Luzi Type, mentioned, the open forms of this typeface make it well-suited for both body text and titles, and even more, the font includes an alternate set of lowercase a and l, adding versatility while maintaining consistency.<\/p>\n

\"Typography<\/p>\n

The color scheme for the website uses the power of color contrast, with the combination of traditional black, paper white, and gray setting a solid basis for the effective presentation of text content and bright, cheerful shades of pink, yellow, and orange providing great color accents and adding liveliness and positive vibes to the general design style.<\/p>\n

\"Colors<\/p>\n

Having discussed the general strategy and all essential details, we moved to the UX wireframing stage, at which the structure of the website and particular pages, as well as content arrangement, are thought out to make everything work most efficiently. At this stage, together with a client, the team can play out and test most user scenarios, prioritize content presentation and performance, and see what kinds and amount of media content will fit those needs and support the text and interactions successfully.<\/p>\n

\"UX<\/p>\n

The light and airy home page<\/a> for the website sets the instant association with the student’s textbooks and notebooks. It allows for an effective combination of different types of content on the page: text, maths problems and formulas, videos, photos, custom graphics, and interactive elements. Solid visual hierarchy lets a website visitor quickly skim and scan the pages, moving smoothly from one section to another and diving into the service’s functionality and benefits to the teachers and students. The primary navigation is quickly noticeable and reachable in the website header, using dropdown menus for each section to extend the navigation opportunities without overloading the page, and can be accessed easily from any point of interaction with the website as the header is sticky. Take a look at the layouts and interactions for some of the web pages below.<\/p>\n

\"Home<\/p>\n