We were approached by a group of teachers to create an educational website about math. The website was to have articles, math exercises, stories, and all-around interesting math-related stuff.
As more teachers joined the project, and some of them were particularly knowledgeable and interested in chess, we were asked to expand the website with a chess section. The challenge was how to combine these two different fields, math and chess, in a harmonic final result that makes sense.
One pain point, communicated to us, was that it is often difficult for teachers in Greece to find exercises for their students online. Even when they find exercises they can use, it can be difficult to compile them together and print them for a test. We needed to find a way to make exercises easily accessible by teachers, and generally non-tech people.
The target audience is mainly math teachers and students, as well as chess and math aficionados. The goal is to present math and chess in a fun way, not as an obligation for school. Therefore, the vibe needed to be positive and friendly.
Our Approach
Design
In order to bring together chess and math, we created two separate (but related) visual languages. The style of the website, including the heading, background, and footer, changes depending on the type of content the user is interacting with. The two styles meet and blend together seamlessly in the homepage.
We chose bright colors, rounded corners and expressive imagery to make the website feel friendly and sophisticated at the same time. This is further reinforced by the use of light and informal typography, playful icons and colorful words. The bright yellow color stands out in both the chess and math sections, and draws attention to the CTAs.
In the homepage, the banner uses a spirelike visual as background, to both be thematically relevant with mathematic imagery, and more importantly, draw attention towards the email-subscription CTA. Its design guides the eye naturally to the CTA. The banner serves the additional purpose of blending together the two different styles, of math and chess. Its color has been modified to go well with both styles.
Easy-to-Use Exercises
In order to effortlessly bring math exercises to teachers, we created an exercise page. The exercises are pulled from a database, and then show up in the pages.
The user can simply copy exercises with the click of a button, and then paste and print them from Word (or the tool of their choice). We gave the clients a (short) instructional PDF on WordPress, so they can easily add exercises to the database. Exercises are organized by math level and subject, with a filter and tag system.
Responsive Design
The website works seamlessly on desktop, mobile and tablet.
