phaseII

Phase II: Refining interaction and designing wireframes

Introduction

This version added drag and drop organization, smooth multi class selection of over ten different mathematical topics, and real time LaTeX preview with split pane capabilities. We made an effort to emphasize a smooth user experience, including automated PDF creation, customizable column structure, and powerful local auto saving capabilities. This step makes the process of creating complex and formula intensive reference sheets a smooth, visually reactive, and highly personalized experience on the part of students.

Cheat Sheet Generator

Methods

To advance the development of the Cheat Sheet Generator, we focused on the iterative improvement and completion of our initial wireframes to create a more comprehensive prototype. The primary research method utilized was a Peer Cognitive Walkthrough, which served as the foundation for identifying key points of friction and overall structural weakness. Our Peer Cognitive Walkthrough consisted of three users who played the role of a specific user in a scenario, working through our website. From our classmates' findings, we were able to improve our wireframes, building upon the feedback and the changes given from those who tested it during the walkthroughs.

Findings

Based on our Peer Cognitive Walkthrough, our team identified key points to improve the overall strength of our wireframe. During the walkthrough, our users reported that our team's wireframe was vague and lacked clear pathways to other pages of our product, making it difficult to understand how to navigate between pages because the gray bars we provided did not show the navigation well enough. User one details in their review, "I am on the cheat sheet generator page, I still want to make a cheat sheet, so I press generate sheet. Not sure where I am at this point, the wireframe suggests this puts me at the login." User two also explains, "The user may not know how to get to the edit screen from the previous screen. So getting to this page was unclear, and the tools on it are unclear. If the user's goal after generation was editing, they may be a bit confused on how to access and use this page."

Additionally, all users reported that the UI within each page of our product did not clearly show what each icon and button was doing. The users also noted that our main UI for creating and/or editing cheat sheets and attaching images was unclear to them, suggesting that our tools were not indicating their uses and usage well. User one states, "I select edit, and I am brought to a screen that shows a preview and some equation buttons. I am definitely on an edit page, but not sure what to do. Somewhat Confident in making progress, I do not know how to actually edit the document I am viewing, though. Somewhat making progress, but do not know how to add imaged." User two mentions, "They might be confused about what the home button does, as they might assume they are already on it. Does the user know how to edit the page? They may be confused at this point. The tools are not explicit enough in their own purpose." Finally, user three explains, "As the interface sits now, I am not entirely sure how each of the clickable buttons would affect the sheet, so it is not entirely clear how to proceed from here." This showed that our product made it difficult for users to understand how to use the core features of our product.

Conclusions

Our findings gave us the guidance we needed to improve our product to meet the satisfaction of our users. Since users one and two struggled with page navigation, we rectified this issue by creating proper arrows to show the flow of our website. Following the finding of improper functionality in our demonstration, our team restructured the wireframe to be more concise, allowing users to easily see the relationships between pages. Additionally we solved the vague UI by giving it a clearer interface. We implemented proper dropdown menus near buttons that did not originally show their purpose, as well as providing icons in the wireframe to give users proper feedback when a button is pressed. Based on the users' descriptions of the flawed cheat sheet editor, we adjusted the UI of the cheat sheet editor to resemble a common word editor, which allows users to follow instinct when wanting to complete their tasks. Image attachment was also introduced within the editor to fit the needs of specific goals. In conclusion, these changes aligned more closely with user expectations and improved overall usability.

Caveats

While the research conducted during this phase provided a clear path forward, several limitations should be considered when evaluating the findings. A primary constraint is the reliance on a peer cognitive walkthrough, which may have introduced an "expert bias"; fellow Computer Science students often possess a higher technical baseline and may overlook UI complexities that a general student would find challenging. Additionally, our testing was limited to a specific demographic within the CSU Chico student body, meaning the findings may not fully represent the mental models of users from non-technical disciplines who might interact with the software differently.