Making a geometry buddy
Timeline
December 2022-2023
Tools
Figma
After effect
UseBerry
Outcome
Mobile App
Role
UI/UX Designer
An educational tool designed to assist students in grasping the concepts of 3D geometry, which aims to enhance mathematical spatial and learning experiences
They acknowledged that there was a problem where students did not understand the shape they were learning, but no one really answered why this problem was occurring
What do I do?
Involve designing an interactive and intuitive mobile app. This app should cater to diverse spatial abilities, conducting user research to understand students' specific needs, creating user-friendly prototypes with engaging visualizations and interactive tools, and testing the design with actual users to ensure usability and effectiveness.
Method
To understand the user's behaviors, preferences, and pain points, extensive observations and in-depht interviews were conducted with twelfth-grade students in the West Sumatra region, Indonesia, where 3D geometry is taught at that educational level.
[observtion]
[Source: Nidya Putri (personal documentation)]
[in depht interview]
Affinity Diagram
Pain point
Difficulty drawing shape
Sometimes mistaken in naming, so it does not match what is known in the problem.
Losing lines when drawing due to line overlapping (especially for cube and pyramid shapes).
Difficult to distinguish the front and back parts of a shape, so they understand the spatial structure of the shape.
Cannot rotate the shape without having to redraw.
Difficulty identifying the plane image to be drawn.
Cannot understand the shape and size of the plane if the shape is rotated.
Difficult to distinguish planes inside the shape if there is more than one plane.
At this stage, I am actively identifying several user personas to better understand their diverse needs, all of which are crucial for success and satisfaction. There are several user personas that I can identify:
After identifying user persona Raisa, I am conducting a competitive and comparative analysis to gain deeper insights. This analysis involves evaluating competing products or services in the market to understand their strengths, weaknesses, and unique features. By comparing these findings with Raisa's needs and preferences, I aim to identify opportunities for improvement and innovation. This process will inform our product development strategy, ensuring that we meet and exceed Raisa's expectations effectively
Competitve and comparative analysis
After completing competitive and comparative analysis following the identification of user persona Raisa, I am now crafting a user story. This user story aims to encapsulate Raisa's needs, preferences, and pain points identified through the analysis phase. It will outline tasks that Raisa needs to accomplish with our product, emphasizing the value and benefits she expects. By aligning the user story with Raisa's specific requirements and insights gained from the analysis, we can prioritize features and functionalities that will enhance her experience and satisfaction
After identifying the features Raisa needs based on the user story, I am now in the ideation phase. This involves creating user flows and scenarios that depict how Raisa will interact with our product, ensuring a seamless and intuitive experience. Additionally, I am gathering requirements from Raisa's perspective, focusing on features that address her specific needs. This process will guide the design and development efforts to deliver a solution that meets and exceeds her expectations.
[User Flow]
[Scenario]
Overview
Currently, Raisa is working on a three-dimensional geometry math task. Raisa faces challenges in drawing shapes, leading to the loss of planes within the shape. When attempting to extract those planes, Raisa also encounters difficulty as the drawn shapes may not appear as intended. Additionally, Raisa has made mistakes in placing point sequences. Due to these challenges, Raisa is finding it difficult to complete the task, and it is taking a considerable amount of time to finish.
The first page features options to log in now or later, influencing the functionality to complete tasks
There is a screen that guides Raisa to create a new project or open a previous project
After choosing to create a new project, the next step is to name the project
After naming the project, the next step is to start drawing the shape. There will be default shapes options that appear
Raisa can change the shapes and also the color of the shapes if needed through buttons at the bottom of the screen
After selecting the shape, the next step for Raisa is to add points. The keyboard will automatically appear to assist Andi in adding those points
After adding the points, the next step is to connect those points.
Raisa can rotate the completed shape to view the planes formed inside the structure from different angle
Requirement
The user can choose to log in now or later; this choice won't affect their work, only the option to save the work
Giving a job a name is necessary so that when the user saves the work, they can access it again.
On the screen for naming, the keyboard will appear immediately so that the user can promptly provide a name.
The first time entering the system, it should provide a default structure.
The main canvas is connected to the user's home screen and the save feature.
Sub-canvases (structure, point, and area) are linked to the main canvas.
The keyboard will appear immediately when the user adds a point.
When a point is added, the structure automatically rotates.
The undo feature is only available on sub-canvases or after the user completes a task.
Rotation can be done with a button to avoid damage and moving the structure.
The area color is automatic, matching the structure and the following areas
After finalizing architecture and wireframes based on Raisa's needs, I'm now focusing on usability testing. This phase involves gathering feedback to refine our design, ensuring it meets Raisa's expectations and usability standards
Test plan
Overall goal:
Assessing the user-friendliness of the existing interface when users create a new file, name it, and draw the 3D geometric shape.
Specific objectives:
Assess the clarity of the steps involved in initiating a new file, including the ease of creating and naming the new file.
Evaluate the ease of selecting and initiating the 3D geometric drawing feature.
Assess the intuitiveness and effectiveness of the drawing tools and interface.
Gather user feedback on challenges faced and collect suggestions for improvements.
Methods:
Unmoderated testing; screen recording, screen captures derived from click tracking
Location:
Remote
Partisipant:
6 participants, namely 12th-grade high school students or their equivalents.
After conducting usability testing, I identified problems and assessed their severity. Based on these findings, I developed recommendations to address the issues and improve the overall user experience for persona Raisa
Finding
Issue
Severity level
After identifying problems and developing recommendations from usability testing, I am now iterating on the design. This phase involves refining and optimizing the product based on feedback to enhance the overall user experience
[Launch the App]
Before
The 'buat baru' button on the home screen for adding new tasks is not functioning properly, as it is frequently confused with the 'buka' button
After
The iteration brings a stronger focus to the 'buat baru' button, featuring a floating style and clear separation from the navbar
[Name the work]
Before
The 'buat baru' button on the home screen for adding new tasks is not functioning properly, as it is frequently confused with the 'buka' button
After
The iteration brings a stronger focus to the 'buat baru' button, featuring a floating style and clear separation from the navbar
[Choose Shape]
Before
An issue in this section arises from a flow error. The 'bidang' button at the bottom was originally intended to activate automatically upon the user completing the created plane, but this has caused confusion
After
With the iteration, the 'bidang' button will be replaced by the 'pilih' button. Users can now easily stop whenever they need to, whether it's after drawing a line or creating a plane
[Button]
Before
The challenge users face is due to the unclear design of the initial button and the similarity in the icon design
After
After the iteration, the hierarchy of the buttons becomes clearer, especially for the function of the toggle button at the top of the screen
[Add Point]
Before
In previous designs, a keyboard would appear to indicate the task, but it lacked sufficient information. Additionally, a point was placed in one corner, leading to users often pressing it by mistake
After
After the iteration, it not only prompts the user with a pop-up keyboard to indicate the need for a point but also displays a notification (toast) to label the points. In addition to marking points, the toast is also utilized for various other tasks
[Connect]
Before
An issue in this section arises from a flow error. The 'bidang' button at the bottom was originally intended to activate automatically upon the user completing the created plane, but this has caused confusion
After
With the iteration, the 'bidang' button will be replaced by the 'pilih' button. Users can now easily stop whenever they need to, whether it's after drawing a line or creating a plane
[View]
Before
The rotate feature in its current form may function, but it lacks a significant impact on spatial issues. It serves as a free rotation button without any additional transformative effects
After
In this iteration, the rotation feature will be part of the view screen, which also shows planes that form in the shape. No dedicated rotate button will be present; instead, users can rotate by selecting a point, line, or plane perspective in the view layer. This aims to improve users' spatial understanding of shapes as they view planes consciously from desired angles.
[Delete & Undo]
Before
The initial concept had users delete a plane by clicking on it, risking user error with potential selection of the wrong plane or point. Additionally, there was a lack of information about the specific plane or point to delete and the outcome of the delete interaction
After
The delete flow is clarified through the user's selection of the plane or point. The new design provides a preview of the object to be deleted, accompanied by a toast notification and the total point that the shape has for user awareness. An undo button is also available in case users change their minds
This section showcases how users would interact with Geome3 in its final form. The prototype simulates real product behavior, demonstrating key interactions such as shape creation, spatial adjustments, and tool functionalities. By closely mirroring the intended experience, these interactions provide a tangible vision of how Geome3 would function when fully developed.
[Prototype]
to
drawing
Shapes feature aims to reduce user confusion and drawing time significantly, unlike traditional methods that may result in shapes not accurately representing the intended form
[Prototype]
to
Editing
If users accidentally or intentionally put a point in the wrong spot, it might create a shape they didn't want. That's why we have delete and undo buttons for users to fix things
[Prototype]
to
Editing
If users accidentally or intentionally put a point in the wrong spot, it might create a shape they didn't want. That's why we have delete and undo buttons for users to fix things
[Prototype]
to
Memory recalling
Just like notes, exercises, and homework, naming and saving work allows users to revisit their assignments when necessary. This will help such users when they are studying again for exam preparation
[Prototype]
to
Memory recalling
Just like notes, exercises, and homework, naming and saving work allows users to revisit their assignments when necessary. This will help such users when they are studying again for exam preparation
After multiple iterations, this version of Geome3 has addressed major usability concerns and now offers a more intuitive experience tailored to Raisa’s needs. While significant improvements have been made, further refinements will focus on enhancing usability and optimizing the overall interaction flow.
