Progress Labs
Web Application Design
Progress Labs is a web based application that gamifies school work by implementing progress bars, leaderboards, and achievements to motivate students.
The main features include allowing professors to create projects and invite students to view a checklist of tasks required to complete the project, visually monitor their projects progress, compete with other students to finish first, and unlock personal achievements.
Date: October 2020 - April 2021
Tools Used: Adobe Illustrator, Adobe XD
Areas of Focus: UI Design, Visual Design, UX Researching
Project Overview
From high school to post-secondary, students are given a lot more freedom when it comes to their schedule and how they plan out their days. This freedom can make it hard for some students to manage their time properly, resulting with work being pushed back due to a lack of motivation or drive.
Students are then met with deadlines and the worry of getting poor grades. this negative motivation pushes them to do their work but can cause stress and pulling all-nighters in order to get their work done.
This project aims to instead provide students with more positive motivation through using elements of gamification to encourage them to complete their work.
Scope, Constraints, & Role
This project was worked on over the span of two semesters, with two previous versions of this project being created in the first semester and the more refined and complete version, Progress Labs, being worked on during the second semester. Each version of the project had multiple iterations and they are all connected as each iteration and version was improved on from the last based on the feedback from user tests as well as professors.
The final planned deliverable for this project was either a very basic coded prototype or a high-fidelity mockup prototype in Adobe XD. As the project moved forward, I decided on the mockup prototype as it would let me increase the depth of my project and include additional features and pages that would help improve the overall user experience and the flow of my project.
This project was individual meaning I conducted the research, competitive analysis, understanding of user demographic, wireframing, user testings, design, mockups, and prototyping. For additional assistance or feedback, I turned to professors or other students in the program to ask for their input.
Past Primary Research
During the first semester, I conducted primary research such as interviews and focus groups that gave me key insights that I also took into consideration for Progress Labs. I found that many post-secondary students often struggle to focus on projects when they are not being forced by deadlines. Research participants pointed out that it was starting a project that was the most difficult as other interests would distract them away from work. It was also noted that some participants liked to work while talking to friends or in groups as they become more motivated and end up working better.
Past Secondary Research
Previous secondary research from research papers, journals, TED talks, and articles were also referenced for this project. From this research, I found that there 3 things that affect a person's motivation:
- The need to satisfy social needs to feel important, be accepted or compete with others (likes or shares on social media).
- Rewards that the user receives right away upon completing a certain task like money, sense of accomplishment, information, etc.
- Being able to see their progress increase by visualizing goals and tasks being completed raises self-determination and offers a sense of accomplishment.
Prototype - First & Second Iterations
Using that past research to inform my project I also created my first iterations of this project in the first semester. It applied some of the things that I found in my research such as providing users with a visual to monitor progress and a scoreboard that ranked students in terms of project completion. These wireframes and mockups were tested and resulted in my project becoming an add-on for Microsoft Teams as it was something new that we were using at the time. From this iteration, I decided that for this project I would focus on the same topic, but change the product platform so that more students can use it. I also wanted to try and implement rewards/sense of accomplishment into the application as it was one of the three things I found from my research that was still missing.
Research - Additional Insights
Before starting this iteration of the project, I wanted to research more on the gamification aspect and how it affects learning. One article listed gamification elements and how they increase engagement and motivation in learning environments. An important piece of insight from this article was how leaderboards can actually be harmful when displaying all the students because it makes the students at the bottom feel ashamed and discouraged, meaning I would need to be careful when creating the leaderboard for my project.
Another article I found showed examples of gamification in a lot of the apps that we use daily without really noticing. It reinforced that specific gamification elements can increase engagement not only for education but also from a business standpoint. I picked a few apps from this articles list to take a more in-depth look and used them in a competitive analysis to study how they implemented gamification and how well it worked.
Research - Competitive Analysis
Although I had conducted a competitive analysis in the previous semester, it was based on a wider variety of apps like Asana which helps with project management, Thinkup which promotes positive mindsets, and Fabulous which helps with habit-forming. This competitive analysis focuses on comparing apps that use some form of gamification to get users to do something and how well they work.
Through this competitive analysis, I saw how they incorporated gamification into their apps and found that most only use a few of the elements as too many can overwhelm the users by having too much to worry about. LinkedIn uses a call to action beside its progress bar so that users can easily navigate and complete the task to raise their progress. Byju's personal statistics let users compare not only with other people but also with their own personal records. The subreddits that exist in Reddit are essentially large scoreboards that have the top-upvoted post at the top of the page. Lastly, Kahoot! provides engaging activities, but was overly gamified in terms of what I was looking for as the entire app is about turning something into a game and doesn't really motivate you to complete your work.
Research - User Demographic
From this research, I determined the primary and secondary users for my application. My primary users would be post-secondary students as they have more freedom in terms of their schedule and work compared to younger students or people in the workforce and would need more help trying to motivate themselves.
My secondary users would be professors as they would normally be the ones to add their projects onto the app and break the project into smaller goals to help students understand and work better.
Prototype - Initial Wireframe Designs
My first wireframes consisted of the basic pages that I needed for my app such as the homepage, login, and project dashboard. Then I created different iterations of the features that I wanted to include.
This let me conduct 3 usability tests and use A/B testing that asked users to first go through the basic pages and then each iteration of features. This gave insights on which iterations the testers liked, which areas required improvements, and how effective the application was in terms of achieving the project's goals.
Prototype - Sitemap Overview
The original sitemap of the planned pages for the app to help visualize the navigation and user flow as well as make sure that all of the planned features were included.
Design - Colours and Inspiration
My aim for the colours used in the app was to try and encourage users and reflect the gamification aspect by using colours that were considered playful and vibrant. The blue was used to give users a sense of productivity while orange highlights would pop out and make the app more energetic.
Using these images as inspiration I generated multiple combinations and tested them on my mockup until I found something that would fit my criteria.
Design - Initial Mockups
User testing for this iteration of mockups were completed by the same 3 users from the previous user testing. This test was done remotely and asked users perform specific tasks or find specific pages to test the usability of this mockup. Users were asked to perform 3 tasks:
1. Log in, join an existing project, and view the
project page
2. Sign up and create a new project
3. Log in, find a specific project and use the
dropdown navigation to view another project
Design - Implementing User Feedback
Iteration 2 fixed all the problem areas and incorporated other suggestions from the user testing with iteration 1. Some of the missing pages were created and added to the live prototype for it to flow smoothly. The changes made were mainly to the project creation page and some smaller updates were made to the project pages with nothing being changed for the home page or log in/sign up.
Final Design - Landing Page
The home page of my web-based application called "Progress Labs". This page gives users a call to action with both the 'Get Started' button on the banner and the highlighted sign-up on the top navigation bar to get users started. It also gives users an overview of the features that the application offers.
Final Design - Login
The onboarding pages for both new and returning users. Returning users are able to log in using their email and password, with a link for forgotten passwords. New users will be able to sign up using their first and last name, along with email address and password as well.
Both of these pages are linked to each other with a link at the bottom of the window to let users switch from one page to the other, providing simple navigation if they accidentally clicked the wrong button.
Final Design - Dashboard
The project dashboard lets users see all of their projects and select which one they would like to view, as well as add new projects to work on.
Users have the option to create their own project or join an existing project using a code. If they choose to create a new project they will be brought to another page that asks for additional details such as project name, a list of goals/tasks, a project due date, and provides a code that they can share to invite others to the project.
Final Design - Projects
The project page provides users with the main features of the app. The checklist gives users a list of tasks/goals that are required to complete the project, which can be checked off, increasing the progress bar.
The leaderboards show the top 3 students in terms of project completion with the user's standings highlighted in orange, showing them how much they need to enter the top 3.
The personal achievements feature provides customized accomplishments for the current project and reinforces users with positive feedback and encouragement.
The project due date is highlighted in blue at the top next to the project name and the arrow that opens a drop-down menu for users to easily navigate from one project to another.
Final Design - Prototype & Promo Video
Finally, a live Adobe Xd prototype was created as well as a short promotional video to show off the web application and what problem the product is trying to solve by highlighting its main features.