An application that leverages collective accountability to enhance motivation and stifle procrastination.
Overview.
WeStudy is a web-based application that was created as the final deliverable for a 10-week interaction design class.
We were interested in investigating college students' mindfulness while studying, especially since the virtual learning environment makes it rather difficult to stay focused.
My Role.
I took the role of project manager, driving to completion all development and assignment-related tasks in a timely and efficient manner. I helped with the front-end development, assisting with creating the main architecture for the application. I also planned, created, and edited all video assets for the project.
Skills.
Front-End Development (HTML, CSS, JS, JSON, Bootstrap)
Storyboarding, Prototyping, Wireframing
Usability Testing
Background.
Productive socialization. Kind of an oxymoron right?
As college students, most of us have experienced this moral tension between needing to finish school work, but also wanting to socialize with our friends. My teammates and I pondered this contradiction and asked ourselves:
Why does there need to be this constant push and pull between choosing to be productive and socializing with friends?
We challenged ourselves with figuring out the most efficient way to provide students with a social platform that would inspire rather than inhibit motivation. By examining the power of collective accountability, we sought to solve this everlasting challenge of productive socialization through the creation of a cohesive, motivating social platform.
Problem.
Virtual learning and social isolation takes a toll on college students which therefore makes staying on task burdensome. How can we empower college students to remain motivated and focused when virtual learning makes productivity and mindfulness difficult to retain?
User Observations.
To better understand the landscape of productivity, I observed college students studying specifically in a social scenario. I decided to focus on this niche area since many college students tend to study in groups and I wanted to see the impact that studying with others has on mindfulness and productivity. During studying, inattention may occur due to the continued concentration on one topic, which may increase the probability of distraction as students become bored by the task at hand.
During the observation, I took note of specific breakdowns and successes that occurred as a way to better understand the existing tensions. This helped guide the creation of specific user needs that eventually helped guide our storyboard creation. We focused on addressing these three user needs:
College students need a way to be held accountable for completing their tasks
College students need an encouraging way to get back into work after taking a break
College students need a way to take a mindful break without losing complete focus
From the storyboards, we created two prototypes that encapsulated the user needs we had previously established.
Prototype 1
Prototype 2
Usability Testing.
Usability testing was conducted using the Nielsen Norman Heuristics and proved to be a fruitful experience since we learned where our application missed the mark and needed revising to create a robust and nuanced user experience.
We learned that we needed to make sure to implement confirmation messages and error messaging to ensure that users understood the actions they were making.
We also learned that we needed to title our pages more clearly for increased user accessibility.
We also learned that we needed to have better navigation across all our pages so that the user experience is enhanced.
Using the insights from the user testing, we were able to understand which elements from each prototype were critical in creating a robust user experience and combined them into a final prototype that would be utilized as the guide for creating the skeleton of our application.
Front-End Development.
Utilizing HTML, CSS, JavaScript, JSON, and Bootstrap we began focusing on the development of our web-based application.
To start off the process, we created static HTML pages that showcased how the application layout would look like. This really helped us with understanding the spatial layout as well as with planning the high-level interactions users would have with the application.
After creating the skeleton, we focused on the interaction flow by adding in a Wizard of Oz log-in, adding a page for users to enter breaks, adding a navigation bar, and adding JSON data files in the repository to populate the pages in order to create an interactive experience.
After adding preliminary functionality, we added a Facebook log-in option, added a Settings page, and created a more cohesive style amongst the pages. We implemented methods to read the JSON data files, utilized handlebars templates, and utilized jQuery selectors so that the application’s screens can be updated asynchronously.
The final development step included adding cohesive styling through CSS. In the end, we created an application that served to help college students study productively. By using collective accountability, we hope that WeStudy motivates students to finish their tasks, all while interacting with their friends.
Achieving Functionality.
Above is the Handlebars file for the “Breaks” page that shows the implementation of Handlebars expressions to add functionality to the page. The Handlebars expression used on lines 29-33 allows for JSON data to be easily passed through in order to populate the “Scheduled Today” section, as shown on the right. The code on lines 37-53 creates the form that enables users to input their break name, start time, and end time.
Above is the JavaScript code used to add the responsiveness to the “Add Breaks'“ function on the page. We first registered a new route for adding a break into our app.js file. We then created a controller by utilizing the code on line 8. We added the new breaks data into a data object utilizing the same format for the data as we did in our breaks.json file. We then utilized the JavaScript push() function (line 16) to add the new break to the array. This can be seen on the right as the break “Go for a run” is appended at the end of the breaks list under the “Scheduled Today” section.
What I Learned.
It was a challenging process, and proved to be quite a large learning experience. We started off with an ambitious plan and had to end up cutting out features due to time constraints. We inherently learned that it was important to step-back and refine the main intentions of the application.
We had to ask ourselves: “What do we want users to accomplish?”, “How do we want users to interact with the application?”, and “How do we want users to feel when using the application?”
This helped us zero-in on specific interactions that we thought were imperative to include in the application, further helping to provide us with direction as we wrapped up the project. We focused on implementing a robust task page where users can make tasks public or private depending on whether they want their friends to see what they are working on. We also thought it was important to include a study break page where students can schedule breaks since we wanted to promote healthy study habits as well. We also focused on including a way to check on friend’s task progress as well as implementing a way to easily view their profile.
If we were able to do the project over again, I would make sure to ask those critical questions at the beginning of the process to help plan out all the interactions before beginning the development process. That way, we could spend more time iterating and refining the features that would help us achieve our overarching goal.