Monette T. Punzalan

MathTacks

Created a mascot character and did the layout for an online flash card program called MathTacks. Students and teachers could log in and keep track of the students’ progress.
My Role
Web & Graphic Designer
Client
Conjuguemos, LLC
Date
Aug 2009
Tags
Brochure, Website

Concept

The target audience for the site was grade-school aged children, so it had to feel fun enough to make them forget they were doing math. I tried a few themes with bright colors and eventually settled on a cork-board and cutout theme. After designing the layout, I wrote the CSS for all of the website elements.

Website Mockup 1
Website Mockup 1: Here is one of my first designs of an exercise screen for the site. The graphics had to appeal to kids.
Website Mockup 2
Website Mockup 2: This version was the first one to emulate a classroom setting. But it was not as bright and fun as the other designs.
Website Mockup 3
Website Mockup 3: The next version got the color pallette right, but still needed some tweaking.

Mascot

The owner wanted to use an animal mascot so that it could be broadly appealing and gender-neutral. I came up with a monkey juggling numbers to add a sense of playfulness.

Sketch 1
Sketch 1: When I initially showed the client the sketches of the boy he told me the character should not be tied to any gender or ethnicity so that it would be universally appealing.
Sketch 2
Sketch 2: I thought a monkey would represent curiosity and playfulness well.

Brochure

For continuity, the brochure used the same theme and mascot. If I could do it again, I would tone down the theme since the brochures were aimed at school administrators.

The owner wanted the ability to edit the text on the outside of the brochure to direct the brochures to specific schools and teachers, so I made the brochure into an editable pdf form.

Brochure - outside
Brochure Outside: The brochure folds in half
Brochure - inside
Brochure Inside: Displayed charts for the teachers below-the-fold.

Website

I carried the tactile cutout theme to the website, but I should have considered common website conventions. The navigation is not suitable and would be confusing to users.

Website: Home Page
Website: Home Page
Website: About Page
Website: About Page