I'd like for there to be
(1) a login screen,
(2) an equation editor with a (3) tutorial layover, and
(4) a graph view.
I created a very bare-bones mockup of how I imagine the different screens might look here https://moqups.com/gaye/2pd74d6C. If you have other ideas for how everything should be laid out that's all the better! My drawings are only meant to help convey one way that I can imagine the app working.
The login screen will present the user with three options
- Login using Facebook
- Login with Simplest Form Account
- Create Simplest Form Account
Selecting Login with Simplest Form Account will prompt the user to enter an email and password. There will be an additional option to reset the user's password by entering an email.
Selecting Create Simplest Form Account will prompt the user to enter an email and password.
The equation editor can be in a number of different states (there are 5 major ones). Those states are
- initial / inactive
- inputting an equation
- using a tool
- showing a hint
- problem solved
I describe that in depth here https://gist.github.com/gaye/62194c…0cc9f3b08e (also attached as pdf). Don't let it constrain your creativity, but the way that I imagine this would look is like a simpler version of photoshop. As your subject, you have the equation / system of equations you're currently working through. Your "palette" consists of 8 actions that you can take to simplify the equation and advance in the problem. A successful design will specify how users apply each of the operations in the palette. There are also primary buttons for undo, hint, and graph. One idea for the hint ui is that it could highlight the tool that should be used and the part of the equation that the tool should be applied to.
The app needs a design for a custom math keyboard as well. The important symbols are 0-9, ., +, -, *, /, x^2, sqrt, =, >=, <=, (, and ). Users also need to be able to enter a-z for variables.
Users should be able to toggle back and forth between the equation editor and the graph view seamlessly.