Project Assignment (1500 words)

Microsoft Math Solver System Redesign

1. Introduction

Microsoft Math Solver is a system that has been selected for the project. The system was

launched in 2019 and used artificial intelligence to provide solutions for a wide range of

mathematical problems by using typing, hardwiring, or scanning as input. This system is still

under active development and most of its interactions are not well-polished, especially for its key

handwriting functionality. The function’s landscape mode is poorly designed and drawing tools

are not intuitive to the users.

This report will focus on solving the previous listed issue and improving the usability of

the handwriting functionality by giving out a redesign of interface. It will provide a

re-engineering process that describes how the re-designed user interfaces will support the

selected tasks. It will also provide a conceptual design that indicates the task, objects, and

attributes found in the new systems. A prototype of the re-design interface will help determine

whether the actual systems will work and solve the identified problems. The general summary

and justification of the redesign interface will also be provided within the report.

2. Work re-engineering

2.1 Use Scenario

Mark takes Calculus 1 this semester, and is not good at finding the derivatives of given

functions, so he turns to the Microsoft Math Solver for help.

He opens the application, taps the “Draw” tab on the top. He selects the “pen” tool listed at

the bottom of the screen and writes the function he wants to solve on the canvas at the middle of

the screen. The “pen” tool is the basic tool of the handwriting functionality, its visual

representation is a head of a pencil, just like many drawing applications in the market. While he

is writing, his handwriting is transformed into the text format at the result area in real time. This

functionality needs time to perform, so when the application is recognizing the drawing, a

progress bar appears under the result area, and disappears upon completion.

Mark finds the “4” he writes is mis-translated as “delta” because the vertical line he draws

is too short, so he selects the “eraser” tool at the bottom next to the “pen” tool and slides against

that vertical line. The visual representation of this tool is the eraser end of a pencil. The whole

vertical line is removed when Mark's finger touches the line, which is different from the current

design that only removes the part the tool contacts like a real eraser.

He redraws it, but finds the issue is still there. He selects the “Lasso” tool next to the

“eraser” tool, circles the entire character he draws, and the whole character is deleted, which is

unable to archive in the previous design. The visual representation of this tool is a rope loop.

Mark now finds the canvas is too small for the long function he wants to write, so he

rotates the device to landscape mode, the canvas rotates automatically and places the previous

writing on the left which leaves the right half for new content, while in the original design, the

canvas can’t rotate or translate itself to fit the different device orientation.

Mark is not satisfied with his writing, so he uses the “revert” and “advance” button on the

bottom to jump to a desired state. After all this, he decides to clear all inputs, so he taps the

“clear” button, which’s icon is a rubbish bin. A dialogue box pops up for confirmation, Mark

taps “yes” and all input is cleared, while in the original design the clear will be done without any

confirmation.

When solving equations, it follows a step by step manner from the input to the output in the

Output pane.

Input

Solution step

On the step by step solution, one will observe the results steps between the output and input

expressions regardless of which method they use as an input option. The user's work has been

simplified by adding more features that reduce human interaction by allowing them to only click

what they need on the interface . The user has been provided with selecting whether to use the

manual way or the click and enters properties. Thus, there will be minimal errors during the

whole interaction process with the interface.

2.2 Essential Use Scenario

User’s purpose System’s responsibility

Write a function Convert the handwriting to text

Delete a curve Remove the whole curve once any part of it is touched

Delete a character Remove the content circled by the user

The allocation of tasks is done based on the functionalities of buttons. In our design, each button

or tools serves for a single, consistent functionality, once a button is tapped, its behaviour will

always be the same regardless of the stats of the system. So when the user wants to write or

draw, he selects “pen” and the system will always show the line the users draw and converts it

into text; when the user wants to delete a curve, he selects the “eraser”, and the system will

always remove the whole curve which gets contact with the user’s finger; when the user wants to

delete a certain area, he selects “lasso”, and the system will remove any thing in the circle; when

the user want to clear all input, the system will always ask for a confirmation, etc.

3. Conceptual design

3.1 Concrete use case

Clear all drawing Confirm the clear

Draw in different device orientations

Adjust the canvas position, UI elements, preserve the previous drawings

Navigate to a certain state of drawing

Show the desired state of canvas

User’s action System’s response

The user selects the pen tool​, draw ​curves

on the ​canvas

Convert the drawed handwriting ​to ​LaTex

text

The user selects the eraser tool, ​touches a curve ​want to delete

Remove the whole curve ​once any part of

​ 3.2 Object–attribute–action table

The conceptual design will act as part of the design process, identifying the critical problem in

the older systems through abstraction, establishing functions structures, and combining the

elements into working structures. It will also help clarify tasks sufficiently to allow the

development of a situation in the design form for the redesign system. The design phases will

it is touched from the canvas

The user selects the lasso tool, ​circle an

area of the ​canvas ​and release the finger

Remove the ​curves ​in the area circled by the user from the ​canvas

The user taps the ​clear button

Confirm the clear, once confirmed,

remove all ​curves ​on the ​canvas

Rotate the device to different device

orientations

Adjust the ​canvas position,​ UI elements​, preserve the previous

drawn ​curves

Tap the ​reverse ​or forward button

Show the desired ​state of ​curves ​on ​canvas

Task object Attributes Actions

Microsoft Math Solver Platform Background color Difficulty level

View Save Delete Edit Reserve

follow the task's clarification, which shows the steps involved, collated in a manager to satisfy

the principle of the general problem-solving guideline process.

From the previous system, it was observed that the user group used the Microsoft math solver

application; many users had many problems in writing their mathematical problems in the

portrait mode . Some users tried to use the landscape mode, but that did not help. Moreover,

users were required to use the draw tab to write their problems in the application. When they

decide to use hands to enter their problems in the application, they could not use the drawing

tools simultaneously . The canvas in the application was also not scrollable. Users struggled to

enter their mathematics problems to the application mainly when their equations were long and

the screen space was limited. The application never allowed users to decide whether they wanted

to draw or move the canvas. Due to this and many other problems, the new system design had to

incorporate several added features on the interfaces.

(use case diagram)

The design of the application will be formed by several modules obtained from the task objects

and attributes. There will be the input module. This is where the users will introduce operations

and data in the systems. The mathematical notations will be displayed in this section, either from

a scan, drawing, or calculating input. There will be a commutation protocol or channels between

the users' models to other objects based on an intermediate buffer that stores the output of the

previous module and the control signals. To process the input, different errors will be taken into

account . This will be the out module, which will contain the worksheet and the graphing sheet

essential for displaying graphs and calculations results. The two are responsible for

communicating the output from graphs and equations whether the enter key gets pressed.

The user will be able to press the expression tolls after an input they will provide or display the

result; they will be able to move to the graph sections backwards and erase any data using the

tools provided.

The primary task objects that the users will interact with to carry out their tasks will include the

calculator pad with several pads buttons grouped according to their specific actions. There will

also be the worksheet tab that will be displaying the user's results and will act as the output pane.

There will also be the graphing object that will be used to create mathematical graphs. There

will be math tools objects like equation sliver, formulas, triangle solver, and the unit conversions

tools. Depute that, there will be the ink pen that will facilitate the drawing of equations where

necessary.

3.3 Content diagram

From the diagram, the user will be able to perform several executions. They will solve equations

and create graphs where there will be an input pane that the users enter functions and date sets.

They will also be able to plot 2d graphs using the plotline attribute. They will pass expressions,

retrieve results and backspace, rotate the graphs, and many other features within the systems.

The use case description

The user enters an operand, and it's stored on the stack or worksheet where it gets operated on.

The user is the actor; the math solver application gets turned on while waiting for input for the

preconditions. The description is where the system starts in an idle state, waiting for users' input.

A number is entered using the keyboard number, the system calculator, or the ink pen on-screen

buttons. The system displays every information on its worksheet, and afterwards, they press the

enter button.

4. The prototype of the re-designed interface

Figure 1: The initial “Draw” tab

Figure1 is the main screen of the draw tab, users can handwrite their problem statement by

drawing on the canvas area of their tablet or smartphone when the “pen” tool is selected. When

the “pen” tool is selected, the pen will be significantly larger than the other tool.

Users can also select the “eraser” tool to erase their input. The “eraser” will remove the whole

curve the users’ finger touched. When the eraser tool is selected, the eraser will be significantly

larger than the other tool.

Users can tap the reverse and forward button to navigate through any change done on the

canvas. The change will be automatically made without any confirmation or limitation, when

there is no changes can be reverse for forward, the according button will turn grey.

Figure 2: The selected area when using the “lasso” tool

Users can also select the “lasso” tool to erase their input in a certain area. The selected area

will be indicated by a closed dashed curve as shown in Figure 2, which gives the users a clear

preview of what will be removed. Once the user’s finger releases from the screen, the contents in

the selected area will be removed. When the lasso tool is selected, it will be significantly larger

than the other tool.

Figure 3: The confirmation popup after tapping the clear button

Users can tap the button with a rubbish bin to trigger the clear functionality. A confirmation

popup will be shown in the middle of the screen on top of all UI elements like Figure 3. The

“Yes” button will be in red to indicate to the users this action will cause some relatively serious

consequences. After the “yes” option is tapped, all curves drawn on the canvas will be removed.

This prevents the user from clearing all inputs unintentionally.

Figure 4: The draw tab in landscape mode

When the users rotate their device to a different device orientation, in this case, the landscape

mode, the UI elements will be rearranged as Figure 4. The tool bar at the bottom in portrait mode

will be rotated 90 degrees counterclockwise and be placed on the right hand side of the screen,

the result bar will still be on the top of the screen. The canvas will be rotated clockwise, the

previous canvas area will appear at the left half of the screen, while the right half will be

extended for a bigger size of the canvas to hold a longer equation. All the other functionalities of

the software will remain the same.

5. Justification of the re-designed interface

​5.1 How our design uses the information in the content diagram

The new system was re-designed in such a manner that it has the best interactive user interface

possible. It tried to look at all kinds of users from novice and intermittent. It also tried to appeal

to the expert users by providing a display and selection mechanism that is rapid and

appropriately implemented. The users are also provided complete with explorations where they

can look around for appropriate command; thus, they do not have to remember the equations or

how it flows as they will select from the system.

5.2 Identify a metaphor used in our redesign

In the redesign, there are several metaphors applied. One can see them on the home tab,

where there are several displays of images that show the action to be taken. This helps in making

the interface more interactive and much simpler to use. For instance, the pen image shows that if

a person wants to draw, they can click the Inkpen . The pen metaphysically resembles the

drawing of equations using the application. Another visible metaphor is the “X=?” button just

next to the ink button. The button has been used metaphorically to represent the find x equation

that is common in mathematical problems. This makes the application simple to use and

understand for any user as it contains common mathematical operations and metaphors.

When re-designing the application, all four design principles were put into considerations.

Foremost, the system tries as much as possible to adopt simplicity. Through simplicity, the

system attempted to maintain clarity by understanding and designing for the user’s primary goal,

which is to solve math problems . Thus, the first step was to incorporate a calculator pad, which

would help users typing and entering data. Moreover, all the statists, trigonometric, etc.

equations were also considered so that users would find everything they need within the system.

Furthermore, it also had the language option where the user could choose a language of their

choice to calculate. It also leveraged the use of automation by designing for the least amount of

cognitive effort.

​5.3 Our design in terms of the four design principles

When it comes to its structure, the redesign was such that it achieved a balance in interior

design. Careful consideration was given to the placement of objects within spaces. This helped in

providing a sense of equilibrium and stability . The shape, size, and texture of all the objects

were put in a balance to be less rigid. During the re-design, one acknowledged consistency as a

critical principle in user interface design . A user-friendly and usable design always offers a

consistent experience. We avoided situations where the user has to find a new way each time

they try to resolve a similar kind of problem since it will confuse and frustrate them at the same

time. In the application, we applied consistency to reduce the learning time of the issues. The

users could be able to find all the features within the interface. The re-design had all the needed

equations on the calculator tab, following each other entirely and consistently. Just beside the

calculator, there was the worksheet that displays the results of any calculation. The application

is also tolerant when it comes to errors. It minimizes hazards and the adverse consequences of

united actions . Like the earlier problem where the system could delete a whole sentence, the

problem was eliminated by having a clear button. The elements were arranged to minimize

errors and hazards like drawing, which in the redesign was highly discouraged unless there was

no option slightly. It also prevents unconscious actions in tasks.

​5.4 Our choice of interaction devices for your redesign

The re-designing used various combinations of interaction styles, but a lot of attention

was paid to the application's overall consistency. The use of worksheets and graphing sheets

applied from filing helped simplify data entry . This also helped guide the user through the

predefined rules and learning since the field was predefined and needed only to recognize. The

use of menu selection also structured the application in the right decision-making way. It also

allowed comfortable support for error handling since the user's input does not have to be passed.

However, one of the devices that were considered the least feasible was the drawing option.

Although it was also incorporated in the new design, it's not the primary option of choice. The

system also discourages the use of drawing but prefers the scanning and use of calculators’ tabs.

​5.5 Three of the components used in our interface

In the redesign of the interface, color, text and layout are highly considered. The text is a

very important part and plays a central role in the application because it is powerful and flexible

in communication. The texts can be easily manipulated and visible enough to save time while

looking for something and ensuring that everything is visible. This emphasized the idea that

users see what they expect to see. But it should be noted that the text should not be too long and

cause user fatigue. Frequent use of large sections of text will increase user fatigue. Colour also

played a key role . The colour was also used to effectively draw attention in finding essential

buttons and areas within the screen. It was also used to show status like the change of a button

when clicked. It was also used to display information clearly and make displays more attractive.

We should match people's habitual meaning of a certain color. For example, green generally

means continuation, and red means stop. The layout was structured and more efficiently. For

example, the functions most frequently used by users should be re-established and the

corresponding functions should be combined. In this way, the user can more conveniently find

the functions he needs and the related expansions.

​5.6 The design area

One of the main design areas was on user experience. The system was re-designed to attract

and appeal to a personal attitude and emotions about using the system. It explains how the

person feels when interfacing with the using the applied widgets helps simplify and improve

users' experience within the system . Another area is on the interactive design, where the

application was designed most interactively as possible. The text, buttons, labels were designed

to give and help the users find the right amount of information.

6. Conclusion

In conclusion, this report has achieved several objectives and solved many problems

found in the fast system. It has identified the way the user is going to interact with the system in

part 2; it has clarified the basic elements should be shown on the screen and how they act in part

3. It gives out our version of the redesign of the software in part 4 and justified and validated

these changes in part 5. It has given a new structure and layout of the Microsoft math solver and

how it will eliminate the problems. For future actions, we should invite users of the software to

interact with our prototype and collect feedback on our design. Throughout the report, a new

feature has been added that assists users in simplifying their work. Moreover, one has learned

many things when it comes to user interface and interaction process. The re-design can be tested

to see whether extra features can be added to make the work of the users much more

uncomplicated.