top of page

​Logic Math ------ Website design and development 

Frame 5.png

Role:

UX/UI Designer
User Researcher 
Web Designer
Illustrator 

Time:

Summer 2021
3 months 

Tools:

Figma
Adobe
Zoom

Team:

Product
Designing

Process:

I discussed the research and design parts of this project with another team member. After the research, we prototyped the landing page to let the kid and parents to understand our product more. We also made couple question page for kindergarten kids as a testing question game page as an examples. 

Overview:

This product was developed by two PHD student who studying math education for years, they discovered that most of kids who already know how to solve Algebra or Geometry question, but they can't fully understand the logic behind the answer, so Logic Math is an website and platform that design for kids to learn and understand the math question through a logic and fun way. The goal is using colorful characters and fun background story to attract kid to understand the why and how behind math problems. 

We worked in an agile workflow with weekly sprints of three mouth as we progressed through the design and development processes.

Challenges :

The first challenges is to design a website that can attract kid's attention to learn some math logic problem, and second challenge is how to design the problem page and story line behind it to show the logic behind the math problem. 

Frame 7.png

Research :

We create an online survey send to 10 families that have 10 questions about their kids' math class and homework behavior. We wanted to gain insight into all of the resources form different family and different age. We also gathered the kids opinions about how they solve one question based on their knowledge. 

Theme for users:

These were revelations we discovered from talking to parents and found out what they wanted for kids' math education, and what's their concerns about education outside of the school.

Frame 14.png
Frame 15.png
Frame 16.png

Begin Design :

I was responsible for:
        • Creating lo-fi prototype
        • Illustrations for homepage and curriculum page
        • Question pages' elements
        • Storyline characters


 

Lo-Fi Sketch  :

Frame 13.png

Design Elements  :

For the illustrations and small elements on each pages, we decided to have me to hand drawing. Hand- drawing Illustrations have that quality to fit our theme -- an education website for kids to have fun. 

Frame 10 (1).png

High-Fi Mockups :

Frame 8 (1).png

Home page:

For homepage, we decided to add some free-hand sketches to attract kids and parents, there will be three slides and sliding from right to left with different slogans include the main ideas we want to share to parents. Slogans includes the purpose of our website, and simple description of how Logic Math website work. Users can easily start curriculum page with just one click. The heading also clearly showed the mapping of the main pages of the whole website. 

Frame 11 (1).png

Goals:

• Attractive to kids and parents.
• Match to our original ideas
Clear direction for where to start
• Clear description on heading

Solutions:

Curriculum page:

Frame 12.png

Goals:

• Divide the ages range reasonable 
•  Clearly show the user's scrolling location
• Match the main color pad for the main website
• Able to show the catalogue of the questions themes.

Solutions:

We also created six different Illustrations for dividing different grades and age. After users selected the range, it will jump to the catalogue page that show all the question theme under different grades. 

bottom of page