Origametria
Ed-tech platform blending origami with geometry for enriched learning
My Role: UI/UX designer
About Origametria
Origametria is an ed-tech platform designed to revolutionize geometry education by integrating it with the art of origami. Through interactive animations and an intuitive platform, it enables teachers to facilitate hands-on, research-based learning experiences, significantly enhancing student engagement.
​
The platform supports a comprehensive geometry curriculum for Kindergarten to Grade 7, offering a unique approach that is proven to be beneficial for all students, including those with learning difficulties.
Goals
-
Design an intuitive and engaging user interface that enhances the learning experience for students and aids instruction for teachers.
​
-
Create a user-friendly navigation system that simplifies the selection of lessons by grade and topic.
​
-
Incorporate functionality for tracking and visualizing student progress and performance statistics, aiding teachers in understanding student learning patterns.
​
-
Develop a visually appealing and effective interface for the video lessons, aligning with the overall aesthetic of the platform.
​
-
Establish a design system that serves as a foundation for project programmers and the founder to create additional pages in the future.
Target audience
The primary target audience for Origametria includes educators teaching geometry from Kindergarten to Grade 7, and their students.
​
Secondary audience is agents responsible for distributing subscriptions to schools globally.
Design Scope
Device focus
The UI/UX design was specifically optimized for PC and Laptop use, considering a screen size width of 1440 px, which aligns with the predominant hardware usage in classroom settings.
​
User centricity
With teachers and students as the main target audience, the design strategy prioritized minimalism and ease-of-use. Decorative elements were restrained to avoid distractions and maintain user focus.
​
Origami-inspired aesthetics
The design mainly incorporated geometric elements with non-rounded corners, capturing the precision of origami folds, while striking a balance between the playful spirit of origami-based learning and the academic seriousness of geometry education..
Homepage
Lessons Page Objectives
First Section - Education Methods Description:
​
-
Provide a concise description of the educational methods used in the platform, targeted at teachers.
​
-
Include an option for teachers to read a full article about these methods for a more in-depth understanding.
​
-
For users not registered on the platform, there should be a button linking to the subscription page.
Second Section - Lessons Listing and Filtering:
​
-
Include a filter feature to sort lessons by topic.
​
-
Implement a never-ending scroll feature, showcasing animated GIF previews of each lesson along with a brief description.
​
-
Each lesson preview should have a call-to-action (CTA) button.
Lessons Page Version 1.0
Lessons Page - Usability Test Results
Here's a summarized report of the usability test results for the 1st version of the lessons page, based on feedback from 3 math teachers and 2 kindergarten workers:
Space-Consuming Methods Description
The description of teaching methods at the top of the page was deemed too space-consuming, hindering users' realization that they needed to scroll down for more content.
​
Distracting Animations
The simultaneous running of animations was found to be distracting by the teachers.
​
Loading Time Issues
The loading time for the never-ending scroll was too long, and it was not clear to users that more lessons were loading.
​
Excessive Call-to-Actions
Users felt overwhelmed by the number of call-to-action buttons, finding them to be annoying.
​
Unclear Tag Colors
The ability to filter lessons by topic was highly appreciated for its user-friendliness by all users but some users had difficulty discerning which tags were selected tags were selected due to variety different of colors.
​
Redundant Features
The serial number and the option for a table view of the lessons page were found to be unnecessary and not useful.
​
Free Search Option
Users expressed the need for a free search option with suggestions for most popular searches to enhance navigation and findability.
Filter by Difficulty
There was a clear need for additional filter to indicate the difficulty level of lessons, providing an easy and intuitive way for teachers to identify the appropriate level of the lesson.
​
Lessons Page - Version 2.0
Following user feedback, significant updates were made to the Origametria lessons page to enhance its functionality and user experience:
Introduction of a Search Bar
A new search bar was implemented, featuring popular and recent searches, facilitating easier and more efficient lesson discovery for users.
Condensed First Section
The detailed methods description was replaced with a link to a related article. This change made the first section more concise, allowing the lessons list to be visible above the fold and immediately accessible to users upon page load.
Improved Topic Filter Clarity
Adjustments were made to the topic filter, making it more evident which filter is currently selected, thus enhancing user navigation.
New Filter by Difficulty
A filter for difficulty level was added, providing users with an intuitive way to select lessons based on their specific difficulty requirements.
Redesigned Lesson Layout
The layout of the lessons was changed from stripes to card format, improving the page’s responsiveness across different device sizes and enhancing the overall visual appeal.
Replacement of Animations with Final Figures
Instead of animations, the final origami figures are now displayed. This change gives teachers a clear understanding of what the completed origami model will look like, aiding in lesson planning.
Clear Difficulty Indication on Each Lesson Card
Each lesson card now includes a clear indication of its difficulty level, allowing teachers to quickly assess the suitability of lessons for their classes.
About Us Page
The aim was to make the 'About Us' page not just informative, but also a reflection of the innovation and passion behind Origametria, thereby engaging and inspiring visitors to delve deeper into the platform.
Lesson UI
The lesson UI for Origametria was crafted in close collaboration with teachers. Through testing various initial designs, we finalized a simple, user-friendly interface with a customizable Head-Up Display (HUD), allowing color adjustments to suit different preferences.
Next Steps
Testing with Students and Agents
Expand testing to include pupils for educational feedback and agents for market insights.
Iterative Improvements
Refine the platform based on this feedback to enhance usability and engagement.
Boost Sales
Use these improvements to increase the platform's market appeal and drive sales growth.