My Learning Coach is a academic tool meant to help students gauge their academic performance in relation to their motivation and state-of-mind. Students are presented with visual data in forms of charts, that display their personal motivation levels in regards to their classes, as well as their state-of-minds throughout the academic quarter which is populated through biweekly "check-ins".
We continued on past work done by other teams on the MLC Web-Application. We created a new Student and Instructor Landing Page, as well as updated and added new data visualizations for both students and instructors.
Ann Bui
Asher Wu
Corey Tawata
Jose Vigil
Huy Ngo
Patrick Hong
Tim Park
Dave Gonzales
When we received MLC from the Prenostik team, we began by generating user stories with our partners so that we could solicit requirements and potential features to add in the 18-week period, split into 9 two-week-long sprints. We would meet with our partners at least once a week for an hour, holding additional follow-up meetings as needed.
Our first and most major roadblock came up during setup due to the lack of previous teams' documentation on how to get what existed of MLC running on Amazon Workspaces. Through our trial-and-error process of setting up the runtime environment, we not only learned the importance of writing good documentation and how it ought to be written for future developers of MLC, but also learned how bad documentation can cost teams precious time and halt development altogether.
As our team members were setting up the runtime environment, we were also conducting user research through the form of user surveys for the existing software and through user acceptance testing. From the feedback we received, we further developed a list of features to implement, such as a calendar, updated data display graphs, a navigational sidebar, class-specific pages, and an instructor-side view. From that point forward, once all members had successfully gotten the environment running on AWS, our team split up work into design and code.
We iteratively designed MLC's features by showing our progress to our partners each half-sprint (every week). One major element of our design process was our design of the data display graphs. According to user feedback, users didn't feel that the previous graphs were very valuable, as users couldn't understand what they meant or how the information was useful to them, especially as landing page elements. So, we opted to vastly simplify the data display graphs for the landing page in a way that made them easier for users to look at, understand, and draw connections from. The other features of MLC were developed according to this way of thinking as well -- minimal, simplified, and low-clutter.
Towards the end of our project, once we deemed our designs viable, our team switched entirely into coding. Our final project was capable of using dummied data to display trends through graphics, give a user a run-through of the SOM check-in, display data from Canvas through the calendar, and navigate between class-specific pages, beginning from a central landing page which summarized a student's data across all of their classes. We also implemented the beginnings of an instructor-side view, with graphs to view a class's overall motivation scores with dummied data.
We utilized the Jira our Sponsors provided us in order to document our user stories and create possible.
The figma documents includes all of our designs and view for the whole application. Here we started our very first low-fi layouts to our more fleshed out finished product that we presented during our Capstone Expo.
The documentation describes the functionality of the canvas API and endpoints,validation and repsonses.
Two personas were created during our time with Prenostik that discussed goals and needs from the personas and relations to the web-app.
We utilized confluence, provided to us by our Sponsor, to keep up with meeting notes, and other documentation provided by us and past groups.
Within our Requirements & Design Document you will find a much more detail description of our various decisions on UX Requirements, and Software Design.
Low-Fi
When we started our MockUp Designs this Lo-Fi Design and Layout is what we came up with which eventually evolved over the quarter.
Mid-Fi
We then began creating a Mid-Fi design that inserts the various widgets and charts that needed to be implemented into the Landing Page.
Hi-Fi
The mid-fi then quickly evolved through User Feedback and various evaluations to what we have here in the hi-fi with various forms of navigation across courses, and improved data visualizations.
React.js
We primarily used React.js for our frontend deployment and code, and utilized a lot of the existing components.
Next.js
We used Next.js for our backend development.
Postgres SQL
Postgres SQL was our primary database system through the Dbeaver tool.
Typescript
Typescript was our main operating language that we used for the entirety of the code.
We utilized surveys in order to get an initial feedback on the product we were handed. Upon receiving responses we continued working and improving the product and asked for more feedback especially on data visualizations, which again resulted in more
Utilizing the Figma prototyping we were able to create a flow of how we wanted our final product to behave while users interacted with it. We were able to create a navigational flow and interaction flows with the data visualizations.
Every time we finished a feature within our code, we manually tested if the feature was behaving as it was supposed to, through out front-end. This also applied to any data that was being pull for the calendar widget through back-end processes.
This page was already an existing feature of the previous work done by past groups, however, we decided to update it so that it would match with the rest of our changes within the Web-Application.
This landing page is what our team mainly focused on throughout the capstone project. We updated and created visuals through user evaluation and feedback that would simply make it easier for users to understand the data presented to them as well as make the data valuable. The landing page includes the State-of-Mind Chart (right) and the Motivation Bubble Chart (left) meant to be populated by data collected through check-in questions. The landing page also includes the calendar widget, and navigational tabs to a students courses.
This page contains the same charts and widgets as the last page but this time it is centered around a specific class that a user navigates towards. This means that all data shown is not a general average of all data collected from all courses but instead data specific to whichever course a student wants to view.
This is just one of the tabs within the biweekly Check-In Questions. This specific view is a set of questions set on the expectancy category, but there is other questions focused on the costs and value datasets, as well as a students state-of-mind questions. Data collected here is meant to populate charts in a students landing page or class page.
The landing page for the instructors view is similar to the landing page of the student videw however with some key differences.We also comepletely revamped the look of the Instructor view with new widgets and visuals.This instrucotr view also has the state of mind chart and motiviation bubles of the student view aggregated with student data but also includes two more widgets in the student at risk and sentiment distribution meant to help the instructor determine which students are most at risk and the overall sentiment of their classes.