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
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?
What are their motivation?
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?
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.
Use matrix analysis to find VisMath's orientation, which should be artistic and self-paced learning oriented.
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
Highlight reputation & partnership to customers.
Video & quiz are main format for online education.
Provide interactive courses, quizzes and community.
-
Resources Classification
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
Create editable content or use editable component like button, control strip in graph can cultivate users‘ interest through gamification.
Use feedback and guidance to cultivate user's active learning and problem-solving interest.
-
User Track
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.
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?
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.
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
Define needs and potential solutions
Ideate
Goal: To develop concepts for potential solutions based on research insights.
%20-%20uxchunks_com%20(Community)%20(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.
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.
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.
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.
It can be paired with algebraic symbols, chalk lines, books and other elements.
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.
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
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
