top of page
  • LinkedIn
  • email
Frame 14.png

​VisMath
Math Education Website

Overview:

A math education website provide educational resources to primary school, junior school, high school student and teachers through visual interactive animation which express math concept in STEM application. And provide platforms and resources to users to share and recreate math interesting contents.

Objective:

VisMath requires a design for a website, along with clearly defined branding that can be presented in a prototype which effectively shows the key features users need from a math educational website.

Role: UX/UI Designer

  • Researcher

  • Interaction Design

  • ​UX Writer

  • Visual Design & Branding

Timeline: 2 weeks

Deliverables: Website Prototype & Branding

Tools: Figma, Adobe Illustrator, Photoshop, Sketch

one.png

​RESEARCH

Goal: To understand the current industry and audience through research.

Market Analysis

I began the project with market research, in order to establish an understanding of the math studying users and trends within the K12 education industry. I focused on discovering who are the users, what are their motivations, the existing market and the general standard requirements of this industry.

Who are the users?

Users.png

What are their motivation?

Motivation.png
Industrial pain points.png

What are the exsiting industry's general standard requirements?

Potential direction Analysis:

  • Find a clear target market: Online education industry has too many categories and a high degree of product homogeneity in each segment. 

  • Reduce choice fatigue through comprehensively considered and intelligent solutions: The increasing resources has led to rising costs for learners to choose. Therefore, communities like this one for classification, aggregation, and comment sharing will become increasingly important.​

  • Systematic education services has more values: Except the traditional to C model, to S and to B business value aims in providing schools or institutions with integrated products and services and require systematic and quality control of its content base. 

Source: iResearch

Problems Define

How might we provide useful solutions to assist in the education of math concept and its STEM application? How might user use online tools?

stem.png

Competitor Analysis

Conduct the detailed competitor analysis to identify potential competitor and evaluated their performances in aspects including function, content, customization learning, learning & operating difficulty and their problems. And to defined the style and orientation for VisMath website.

Competitor Analysis.png

Use matrix analysis to find VisMath's orientation, which should be artistic and self-paced learning oriented.

矩阵分析.png
VisMath

Function Analysis

Analyze the important features that customers need and our products can learn and apply and gain valuable insights for VisMath website, and better prepare for the following design process. 

  • Product Orientation & Explanation
Symbolab Math Solver - Step by Step calculator_page-0001.jpg
Brilliant _ Learn interactively_page-0001.jpg
Khan Academy _ Free Online Courses, Lessons & Practice_page-0009.jpg
introduction.png
customer comment.png

Highlight reputation & partnership to customers.

Video & quiz are main format for online education.

Provide interactive courses, quizzes and community.

  • Resources Classification
Khan Academy _ Free Online Courses, Lessons & Practice_page-0001.jpg
classification.png
classification1.png
categories.png
courses.png

Divide resource into several big topics and guide user to more detail topics after clicking.

Use different colors, images, icons to classificate courses or topics.

  • ​Interactive Problem-solution
problem-solving.png

Create editable content or use editable component like button, control strip in graph can cultivate users‘ interest through gamification.

屏幕截图 2023-04-07 053545.png
solutions.png

Use feedback and guidance to cultivate user's active learning and problem-solving interest.

  • User Track
survey.png
personalization1.png
屏幕截图 2023-04-11 165115.png

Firstly form a user profile through strutured survey questions and users' data.

Regularly recommend new resources to user, like when they complete one task or browse more topics.

Give user feedbacks or reminds of what they have learned will foster their positiveness.

two.png

Define

Goal: To define the target user’s needs, goals, motivations and frustrations based on research findings.

Interview

To understand our target users, I conducted user interviews with teachers and students to gain their perspectives on online resources. The research goal is aiming in how they choose it, what aspects (content and functionality) would make it effective for them, problems and perceived areas for improvement when they use online platform.

 

General questions:

1. How do people remember choosing an online education platform for their learning? What was the purpose?
2. Points in the learning process that they found interesting
3. What kind of learning assistance they would like to receive?
4. Existing learning platform websites currently in use and the reasons for using them?
5. What do they recall about using existing learning platforms that they did not feel comfortable with?
6. What other features might they like to see in these platforms?

Teacher feedback.png

Teachers may choose online education sites that offer high quality content that is comprehensive, aligned to their curriculum and standards, can be customized to meet their students' individual learning needs, allow them to monitor their students' progress and performance, and provide cost value.

Student feedback.png

Students are likely to choose online education sites that offer high quality content, are user-friendly and can be customized and provide interactive features.

Persona

persona.png

Define needs and potential solutions

6-3-5 Method final.png
three.png

Ideate

Goal: To develop concepts for potential solutions based on research insights.

Information Architecture (FigJam) - uxchunks.com (Community) (1).png

Information Architecture

After user and market research, and a couple of iterations based on the feedback of product manager, I started thinking about structure of all the general and potential features of the product using information architecture.

four.png

Design

Goal: To design layout, look, and feeling of VisMath website.

Visual Identity

I created a visual identity system as a guide for the visual design of the website, establishing colour palette, typography styles, and imagery that would then be applied across the mid-fidelity prototype.

visual identity.png

Branding Pattern

To establish unique branding for VisMath, I select the "tangram" in math games as the branding pattern of VisMath website, complied with other math elements and design brushes to finish the design of final prototype.

image 13.png
树.png
人.png

The use of tangrams as a brand element represents most of the geometric elements in resources, but also implies a visual metaphor of stimulating the unending creative potential of the user.

4e4660e4c213820f40f51b98c7042ca9.jpg

It can be paired with algebraic symbols, chalk lines, books and other elements.

image_2-removebg-preview.png

Logo

Being assigned the task that design the logo that contains character V or M in VisMath name, I brainstormed the elements related to math like books, pens, paper plane, students, coordinate system, complied with the various color and design brushes to explore the logo. Finally, selected the one that mostly transmit VisMath's sense and iterated a detailed version.

Frame 37.png
Frame 7.png
logo7.png
logo5.png
logo9.png
logo1.png
logo8.png
logo2.png
logo6.png
logo4.png
logo3.png

Wireframes

Wireframes helped me to express the idea quickly and think about the layout of the product and help me to fine-tune all the features with the branding pattern.

Final version
(Use tangram features)
Primary version
VisMath_wireframe_Eng.png
VisMath_wireframe_tangram.png
five.png

Prototype

Goal: To develop a model for the VisMath website that could be tested and improved.

Interface Design

I implemented the researched features in high-fidelity prototype, making sure to adhere to the design direction outlined in the visual identity system and branding patterns. These prototype will be used for usability testing.

Homepage

VisMath_wireframe_Chi.png
学生登录页面.png

Platform login page

教师登录页面.png
bottom of page