Inspiration The inspiration for Think and Tally comes from the need to make learning math fun and interactive, especially for younger learners. Traditional math apps or websites can often be dry, so we aimed to create a visually engaging platform that motivates users to solve problems through an enjoyable, gamified experience. By integrating a user-friendly design, intuitive navigation, and interactive elements, we aim to foster curiosity and learning in a playful way.
What it does Think and Tally is a math-focused web platform designed to provide users with engaging and challenging math puzzles. The platform features:
Basic Challenges: Simple arithmetic problems for kids to practice. Advanced Challenges: More complex math puzzles for older users. Educational Resources: YouTube links and math notes to assist with learning. Timer: Some levels include a timer for added challenge. Reward System: A potential future feature where users earn points or achievements for completing challenges. Currently, the focus is on designing a visually appealing UI/UX to support these functionalities, enhancing user experience through effective layout and design in Figma.
How we built it For the Think and Tally project, we focused solely on UI/UX design using Figma. The key steps involved in building the UI/UX were:
User Research: Understanding the target audience (children, young learners, and older users) and their needs for a fun yet educational interface. Wireframes: We began by sketching wireframes to map out the structure of key pages, including the homepage, challenge pages, and user progress tracking. Prototyping: We built interactive prototypes in Figma, allowing us to simulate the flow of the application and gather feedback on the user experience. Visual Design: Using Figma, we applied color schemes, typography, and icons that are playful and welcoming to children while still being professional enough for older users. The goal was to create a balance between fun and functionality. Testing and Feedback: Iteratively tested the design with mock users to gather feedback and make improvements. Challenges we ran into Target Audience Design Balance: One of the major challenges was designing a UI that appeals to both young children and older users. Creating a playful, engaging aesthetic for kids while ensuring the design doesn't feel too juvenile for older users required careful balancing. Responsive Design: Ensuring the platform is responsive across all devices, especially for young learners who may be accessing it via tablets or mobile devices. Interactive Elements: Designing intuitive interactions, such as how the timer and challenge buttons would function, while maintaining simplicity and clarity in the UI. Accomplishments that we're proud of User-Centric Design: We’re proud of the intuitive, simple interface that was specifically designed to be easy for young learners to navigate while still offering challenges for older users. Interactive Prototypes: Using Figma, we were able to create fully functional prototypes that simulate the user experience, allowing for quick adjustments and real-time feedback. Consistency in Visual Design: We’ve successfully maintained consistency in colors, typography, and icons, which helps users feel comfortable and engaged throughout the platform. What we learned Importance of Feedback Loops: We learned that collecting feedback early on through prototyping and testing with real users can significantly improve the design. It helped us avoid common usability issues and adjust features to be more user-friendly. Balancing Simplicity and Functionality: Creating an interface that is both simple enough for children to use, but functional enough for more advanced learners, was a valuable lesson in understanding design balance. Design Iteration: We discovered the importance of iterating quickly. Figma’s ease of use allowed us to quickly make changes and test multiple design options, ensuring we arrived at the best possible user experience. What's next for MathRush Building the Full Website: We will move forward with implementing the design into a working web application using HTML, CSS, JavaScript, and potentially React. User Testing: Further testing will be conducted on the UI to ensure it meets the needs of our target audience. Expanding Features: Adding the timer functionality, more complex reward systems, and interactive elements such as animations. Ongoing Design Iteration: As new features are implemented, we will continue to refine the UI/UX to accommodate any changes and feedback from users.
Built With
- figma
Log in or sign up for Devpost to join the conversation.