Process Book

Designed By: Prasun Sharma Evaluated By: Brian Memmott

Table of Content
01 02 03 04 05 06 07 08 09
Presentation Project Overview Primary Design Process - Research - Brainstorming - Sketching Final Design Process - Research - Specification - Brainstorming - Sketches Prototype Design Testing Design Elements Detailed Design Final Product

Home Screen
This is the first screen or the home screen that users see when they click the application icon.
Round buttons because it provides more space around it, making it easy to hit. Rounded rectangular buttons contains list of trigonometric values, and they can be scrolled left to right. Smaller screen because it only records equations Space below the screen is for error messages, and answers. People dont like pop up error messages, or the error messages starting on a new page.

These buttons appear when the user drags the screen on the groups of buttons or simply clicks the arrow key at the corner.

In Process Screen
This is the screen users will see when they start typing or writing the equation.
The message bar below will notify the correct form of equations to be entered. Done button is higlighted to let the user know thats the next button to hit. Buttons are highlighted once pushed, to givr a feedback.

End Process
This is the screen users will see when they are done typing or writing the equation, and the equation is correct.
Message bar shows the value in green. Done button is still highlighted to let people know that the next button to push.

Graph Screen
This is the screen users will see when they hit done in the home screen.
This screen displays the graph for the equation entered, and the equation is displayed on the left side of the screen. This screen also brings out the various functional options, and settings option, at the bottom of the screen.

Swipe Equation
This screen is the continued screen from the last one, but with one difference.
Users can swipe the equation tab on the top right to select different equations saved. The little round white dot will let them know what side of equations are they looking at. They can minimize the tab by clicking the down arrow button.

Zoom In Screen
This is the screen when users zoom into the graph screen to look at it more closely.
This screen can be zoomed in or zoomed out, by dragging the two fingers in the screen to look at the graph more closely or too view the whole graph.

Zoom Out Screen

This is screen is same as the previous one with one difference its graph is zoomed out.
Like the previous screen they can drag the screen with their fingers. Once done they can hit the refresh button at the bottom to bring it back to original position or just drag to bring it to original position.

Notes Screen
This is the screen users will see when the notes button is hit on the option bar.
Here users can selected the pre saved notes. The edit button will let them delete the notes. The plus button will let them add new notes. Done button will take them back to graph.

Delete Notes
This is screen appears when users hit the edit button.
The delete icon appears on the left, and once pushed itll delete the note from the database.

Selected Button
This is the notes screen when the button is selected.
Standard iphone buttons and highlights are used to make it more familiar, and easier to use.

Notes Detail
This is the screen users will see when one of the notes listed is selected.
Equation, and its name is given on the top. Notes describing the formula is written below it. Once again standard iphone keyboard used for familiarity, and simplicity. Library icon on the right will let the user to add the equations in the notes to the library.

Library Screen
This is the library screen users will see when they hit the library button from the home screen or the notes screen.
It lists all the formulas. The standard iphone select icon lets people know that they can be selected. People can add formula to library by clicking the plus button at the bottom as well. Edit button will let them delete only the equations added by the users.

Selected Button
This is the library screen when the button is selected.
Standard iphone buttons and highlights are used to make it more familiar, and easier to use. When selected it will show the graph to the selected equation.

Settings Screen
This is the settings screen users will see when they hit the settings button on the bottom right of the graph screen.
Standard iphone buttons are used for familiarity, and simplicity. Library could be reset to the previous state. Sounds, and backgrounds could be changed.

Project Overview:
The main purpose of this assignment was to explore buttons, conventions, and feedback three important concepts in interaction design. Outcome: 1. To develop an understanding of buttons, conventions, and feedback. 2. To give value (real and/or percieved) to an online calculator based on usability, design, and composition. 3. To comprehensively document and summarize the research and creative process you followed. Process steps: Research, conduct and document a visual survey of four function calculators with photographs, screen grabs, scans, and/or sketching. Observe people using a four function calculator. Conduct informal interviews with several people to learn more about the role of calculators today. Collect examples of buttons. Create a wire frame for each unique layout discovered in your visual audit explore a wide range of design ideas. App and web style survey - collect examples of app and web based design that can be used to inform you design decisions. Analyse three in-depth. Computer Comps explore a wide range of design ideas for a calculator. Choose one direction and begin design refinements, and finish design refinements. Create prototypes, identify the target users, and start testing the prototype. Make observations of their experience with the product, and use their recommendation to further refine the product. Finalize the product, with everything working, and test the final product, with few other participants. Create a presentation, and a process book, that reflects of all the work done throughout the project, identifies the problem, and the user, and shows the result of solved problem.

Primary Research:

Primary Research:

Primary Research:

Primary Research:

Primary Brainstorming:

Primary Sketches:

Primary Sketches:

Selected Concepts:
Concept 1:
A Gesture calculator designed for children, so that they can learn math at home before they go to school. Audience: Children aged 6-12 who are just learning how to write numbers, and add, and subtract them, and their parents who can teach them math everyday to help them overcome the fear of math when they grow up. Existing Problem: No such calculator exists to help parents teach children how to do math. Pros: There are enough Asian parents like mine who would be willing to use this calculator if it bring any help to teach math. Cons: Not all parents might let the child play with iPhone. Children might get distracted from the drawing screen, and might just keep playing with it. Pros: There are a lot of people in imgur who will be willing to try this calculator at least once, just because of the loyalty to the site. Cons: There nothing special about this calculator other than the theme of the calculator. People wont be use it for a long term.

Concept 3:
A graphing calculator designed for students who have to take few calculus classes, but dont want to buy a graphing calculator. Audience: A non math major college student who has to take calculus classes, and doesnt want to spend a lot of money on a graphing calculator which theyll need, but has very few uses. Existing Problem: Existing calculator at the app store, are very complicated, and expensive. Pros: Itll have just the basic functions needed for the Calculus I, and II classes. I know people who would actually buy a calculator likethis. Cons: Cell phones are not allowed in tests. A cell phone screen will be too small for a calculator with so much functionality.

Concept 2:
A calculator design for an online community called Imgur. Audience: A regular Imgurian, any age. Existing Problem: No such calculator exists with imgur theme, that imgur community could relateto.

Concept Explored :

Gesture Calculator: This is the concept for the calculator for children.

Imgur Calculator: This is the concept calculator for imgurians with the theme color of imgur.

Imgur Gesture Calculator: Voice control calculator for imgurians. Summary: After the first exploration of the concepts, I realized that there isnt anything interesting about the first two concept. All of those gesture related calculator has already been created by past students, and are being explored by current students. I got more interested in the graphing calculator, because it was more challenging. It would be very difficult to fit everything in a small

Graphing calculator: This is the basic concept for the graphing calculator.

screen. Also there arent many graphing calculator in the market right now. I thought of solving the data storing problem as well with this calculator, and consulted few friends who had taken calculus classes to help me figure it out. The complete process in creating the calculator design is explained next.

Design Process: Research

Specification:
Executive Summary:
To help students save money on Graphing Calculators, with more useful, and easier app.

Criteria:
Priority 1: 1. User will be able to take full advantage of this product, and will not need to buy a Graphing Calculator. 2. User will be able to locate all the primary buttons on the home screen at the first glance. 3. User will be able to get to the graph screen on the very first try. Priority 2: 1. User will be able to add, and delete notes. 2. Access to library content, and their management will be easy. Priority 3: 1. Itll be easy to change settings.

Justification:
This calculator has been designed for a specific audience i.e students who have to take few Calculus classes, but are not Mathematics major. The main purpose of this calculator is to save user money on Graphing Calculators, because those students have no use for them after theyre done with the two calculus classes. Graphing Calculators cost over $80 each, and with this app they wont have to spend so much money for just two classes. This is designed with the minimum features required for Calculus I and II, thatll address the problem of the students. The main purpose of this calculator is to solve equations into Graphs. Also to make lives easier I added a library which contains some of the most used equations. This will save students time on typing equations everytime. Also they can add, and delete equations from the library anytime. I also added a notes feature which will help students to take notes related to the equations, so that they can refer back to it later. They can add, and delete notes anytime.

Specification Contd.:
Persona:
Name: Bobba Fett Age: 22 Residence: Denver,CO Education: B.Sc. Bio Technology Standing: Junior Occupation: Lab Tutor Income: $10,000 Marital Status: Single Bobba Fett is a student at University of Denver. Hes Bio Technology major, and hes studying in his junior year. Eric is a hardworking active young man who likes to get his work done on time, and like to play draw something with his friends on his iphone. Bobba requires to take Calculus I and II, and a Mechanics class as core classes for his major. He doesnt need a graphing claculator for his Calculus I class, but itd be helpful, but he needs the basic features of it for Calculus II, and the Mechanics class. Apart from those two classes he has no use for a graphing calculator. Bobba usually borrows a calculator from the Math lab, but it has to be returned the next day or renewed to use another day. This has been very frustrating for him. He doesnt want to spend $80 on a calculator that hell be using for just few feature, and has no use after those classes. Also, the calculator hes using has a very complicated memory function, and it only saves one equation at a time. Refering back to the equation has been more troublesome, because he cant figure out what was the equation for.

Scenario:
Bobba has had a long, hectic day. He spent 4 hrs in the Math lab doing his Calculus homework. Hes tired, and hungry. He get to the kitchen, and microwaves some of the leftover pizzas. He gets back to his room, and opens his bagpack to check on his calculus homework. To his surprise he only found the first two pages, and the rest were missing. This could only be justified with one answer, He dumped the homework papers along with the scratch works. Hes in a panic mode now, he doesnt even have a calculator to do the homework. The lab is closed, and he has until tomorrow morning at 9 to finish his work. He doesnt want to take a chance on waiting until the lab open in the morning. His only hope is to find something online. He finds out about the graphing calculator app on google, and downloads it, and starts working on his problems.

Design Process: Brainstroming

Design Process: Brainstroming

Design Process: Sketching

Design Process: Sketching Contd.

Design Process: Sketching

Prototype:

Home Screen of the calculator

Graph screen of the calculator

This is how the first screen will look like, when the users open the app. Error messages, and values will be displayed in the small section below the input field, to avoid any pop up error messages. The value isnt very important for the user so I tried to keep its size small. Two different types of buttons are used to help users identify their differences. The numeric buttons are made circular to create more space around them, so that itll be easy to hit. The Done button changes color once the user enters the equation to let them know thats the next button to push.

This is the most important screen in the calculator. Users will get here once they enter the equation, and hit the done button on the top right corner. This will let users to look at the graph, zoom in, and zoom out. Also users can toggle around the saved equations. All the settings for the calculator are provided in this screen, and are located at the bottom of the screen.

Design Elements:
Icons:
This is the library icon thatll let users access the equations when clicked from the home screen, and the same icon will let users add the equations from the notes to the library. The round button thatll be used for the numbers, and algebric expressions. Will change color to light grey when pushed. These are the apples standard on-off buttonIve used these for the settings options.

This is the expression icon, this button can be found at the bottom of graph screen, and it takes user back to the home screen for another equation. This is the standard refresh button used to bring the graph screen back to center, once its zoomed in or out.

This rectangular button is used for trigonometric expressions, and all of them can be accessed by scrolling. Will change color to light grey when pushed. This is the standard iphone delete icon that appears when users selete delete option from the edit menu.

This is the settings, button which will take users to the settings option where they can change settings per their preference.

This is apples standard select button, that I used here in library, and notes feature to let people know theyre to be selected.

This is the notes icon which will take users to the notes screen where they can add, and edit notes, along with their equations.

Detailed Design:
This is the screen when the user start typing the equations, they red description at the error section will let the user know the correct form of equation to be entered. Also once they start typing the done button on the top right corner will change color to let the users know that its the next button to push to get to the graph. All the buttons change color once theyre pushed.

This is the screen when the users are done typing, and the correct form of equation is entered. The value will be displayed in green in a small screen below the the input field. The error, and value display had been placed in a small area, and color coded because users do not like to interact with a pop up message, because its just one extra button to push, and it gets frustrating after a while.

Detailed Design:
This is the screen when the user hits the done button after entering the equations. This is the graph for the entered equation. The equation for which the graph is shown is displayed on the top right corner. Users can toggle around it to go to another graph for another pre saved equation. All the necessary settings, required to get to the notes, and back to the equations are given in this screen.

This is the library page which can be accessed from both the home screen, and the notes screen. This is the list of pre saved equations that user will be using frequently. This is made available so that they dont have to enter the equations over, and over again. Also the users can add, delete, and update data from the library anytime. The buttons will be highlighted when selected.

Detailed Design:
This is the notes page which lists all the notes created by the users. The plus sign at the bottom will let them add a new note, and the date will appear automatically. They can edit, delete, and update notes anytime they like. The buttons will be highlightef when selected.

This is the view of an opened notes screen, here you can see the equation on the top, the name of the equation belowit, the library icon on the right side which will let users to add the equation to the library, and the bottom section is for the description for the notes, a standard iphone keyboard will pop up when the text area is touched.

Testing:
Introduction:
This calculator was created for the non math major students who have to take few calculus classes, and do not have much use for an expensive graphing calculator. Hence, the ideal participant for the prototype testing is someone non math major whos taking calculus currently or has taken previously. There are three participant in this test, and they were presented with a print version of the product, and asked to identify the features. Participant 1: 22 years old. Single. Works at Linux Lab. Has be been using iPhone for few years now. Was in Calculus class last semester. Computer Science major. Used Graphing calculator for the class. Participant 2: 24 years old. Married. Has been using iPhone for few years now. Took Calculus I, few semesters back. CIT Major. Used Graphing calculator. Participant 3: 22 years old. Single. Has been using smart phones including iPhone for few years. Took Calculus classes. Biology major. Used Graphing Calculator.C

Observation:
1. All the participants were able to identify the buttons on homescreen. 2. Participants didnt recognize the librarybutton. 3. Participants had trouble finding equalsbutton. 4. Participant figures out notes button. 5. All participants agreed that the plus sign used to get back to home screen needed to be changed to something else. 6. Participants were able recognize notesicons. 7. None of the participant asked about the edit functionality. 8. Participants were confused with the notes addition to the library. 9. Participants had mixed views if they are willing to use the calculator in future. They said itd be easier to decide if it was a working prototype. 10. All the participant liked the design, and the concept.

Reccomendation:
1. All the participants wanted the plus sign to be changed to get back to home. 2. Participants wished the buttons werebigger. 3. Participants wanted the library function to be more simple. 4. All the participants wanted 3D graph. 5. All participants wanted a feature to capture the image of graph to use it later in homeworks.

Final Product:

Conclusion:
The final product looks professional, and Im happy with it. However theres yet a lot of testing to do. The participant who tested this calculator were excited, and gave me a positive feedback. They explained how theyd use it if it were working, and free. After the testing I used the user recommendations to increase the size of the round buttons. I got rid of all the functions signs, and put them with the trigonometric functions. This created more space, and I used it to increase the size of the round buttons. There isnt a landscape

view, becasue none of my test participant had used horizontal graphing calculator, and neither have I. This is the main constraint of this design. Hence, I learned that there are many different ways to solve a problem. The memory functionality was made better by so many in the class, but each one did in their own ways. I used the notes, and library functions to solve the same problem. This is not a replacement for an actual graphing calculator, and this is not for math majors. The specific audience is non math major beginner level calculus class students.