Guaranteed - Create a stunning landing page for teachers

MathLeap

MathLeap allows teachers to generate assignments and lets students complete them in the browser. When students finish their assignments, MathLeap automatically grades them to provide instant feedback.

mathleap.org

Teachers coming to MathLeap are stressed out by their paperwork. We want to communicate that MathLeap will reduce stress and lighten their grading workload. To be specific we're looking for a playful but professional feel for the design. Sharp and lots of cartoon elements.

We'd like a continuous page of 4-5 panels. We're open to different visual methods of differentiating one panel from the next. One idea is different backgrounds for each panel. Another is to have animations that get triggered on scroll.

MathLeap.org currently has a navigation bar at the top. We want to keep space for a couple actions that can be performed from the navigation bar, but we're open to aesthetic changes here.

We also have a logo which is a turtle with some geometric shapes (circle, triangle, hexagon, and square) on its shell. We'd like to keep the turtle, but if it needs to be redrawn to match a certain visual style for the homepage, that is totally okay.

In addition, we have a video that explains MathLeap (currently on the mathleap.org homepage). We would love to make that available somewhere on the homepage if possible.

Currently all the content fits within 1050 pixels of width, and we'd like most of the content to fit into a container that size, but we're open to full width images and backgrounds (or anything else that makes sense for a wider canvas).

Here's a bit more detail about each of the panels:

First panel
=======

This is the first thing people will see when they come to MathLeap.org. It will feature a tag line ("Say goodbye to grading") and a short description ("Hassle-free practice and feedback opportunities for your students") This will include

- a heart-warming picture of a teacher with kids (or something similar) like the edmodo.com site OR
- a fun illustration with the MathLeap turtle like the docker.com site
- an illustration like the one on heroku.com
- another creative picture or illustration

Second Panel
=========

The second panel will showcase the benefits MathLeap provides for teachers. ClassDojo has a really good example of this when they describe using their app to encourage students (accompanied by illustrations of the app in use). Note that MathLeap is a website.

Benefits:

"Student practice" - MathLeap provides students with a fun new way to work through problems in the browser.

"Personalized feedback" - We help students understand and learn from their mistakes with instant, line-by-line feedback.

"Time well spent" - Just think of all the great things you could be doing instead of grading tonight.

Third Panel
========

The third panel will list the features and outline the basic MathLeap workflow:

1. Generate assignments
2. Students practice online
3. Instant, line-by-line feedback

The Docker.com workflow explanation is a really good example of this.

Fourth Panel
=========

We'd like a testimonial featuring a picture and a quote. The testimonial on wevorce.com is a really good example of what we're looking for. It focuses on one person and builds an identifiable, emotional story around them.

Fifth Panel
=======
This is the call to action. It doesn't necessarily need to be its own section. It could range from just a button to a full description of how to get started; we're leaving this up to the designer's discretion. The explainer video (attached and also at https://www.youtube.com/watch?v=MWyJK5gsa7A shows how teachers can get started.

### Learn more about the program

To explore all of the existing views on mathleap.org, you can

1. Create fake teacher and student accounts.
2. Log in as a teacher.
3. Create a class by clicking the + button.
4. Change your class name and color.
5. Remember your class code.
6. Open your class.
7. Open the assignment generator by clicking +.
8. Fill in your assignment by selecting topics and question types and balancing them.
9. Preview and assign your assignment.
10. Log in as a student.
11. Join the class by clicking the + button and entering the class code from step 5.
12. Open the class.
13. Start the assignment.
14. Look at the key shortcuts by clicking ?.

There are 3 steps that can be taken working through problems:

- Delete expressions by highlighting them (shift left and right) and then pressing backspace/delete.
- Replace expressions by highlighting them (shift left and right) and then entering a replacement expression.
- Perform an operation on both sides by entering the operator (+, -, *, /, ^) followed by the operand (ie +10, -3, *6, /5, ^2)

15. Once you've solved a few problems, submit the assignment by clicking submit.
16. View graded assignment.

### Fonts

The MathLeap text logo font is "Coop Light" (attached). The math font is "Lato Light" which can be found here http://www.fontsquirrel.com/fonts/LATO.