top of page
origametria thumbnail copy 3.png

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.

Frame 2.png
Frame 4.png
Frame 3.png
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
preview2.png
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 list page wireframe.png
lessons list page.png
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
lessons list page.png

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.

about us page.png
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.

lessons preview.png
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.

bottom of page