Gamut Gallery Pagination Design and Development

About Gamut

Gamut is a suite for online learning tools (a.k.a LTI (Learning Tools Interoperability) native tools) such as Gallery, Workbook, and Goal Setters. Those tools are used in MOOC (Massive Open Online Courses) like Coursera, Canvas, and edX. For instance, the Gamut Gallery tool in a Coursera course lets users share their works and provide feedback for each other.

Problem & Challenge

There were a lot of responses in the Gamut Gallery tool, like more than 5,000 submissions in a Coursera course, which was a good indication that many people were using the tool, but we should have figured out how to organize them and limited the number of responses per page or load.

Gamut Gallery Solution

Design and develop pagination to organize the massive responses and limit the number of submissions to 30 per page.

For this project, I followed the Software Development Life Cycle (SDLC) like below.

1. Requirement Gathering and Analysis

In this process, I had a meeting with the Gamut team to discuss the current user problem due to the massive responses (more than 5,000 submissions) on the Gamut Gallery tool. Because the Gallery didn’t have a tool to organize and handle a large number of responses, the speed of the page load was slow, and it was difficult for users to organize and find a response on the Gallery.

Since the number of responses kept increasing, and this was a critical user experience, we agreed to solve this in the current iteration at that time. After the meeting, I first researched to find the best way to organize many submissions. For example, I searched for the pros and cons of using infinite scrolling with a load more button and using pagination. The pros of using infinite scrolling are that users can typically check more items, which leads to more engagement, lower interaction cost due to no click required, and mobile-friendly. The cons of using infinite scrolling could be that it requires more loading time, and it is difficult to go back to a specific section to check a certain item (location), especially when scrolling down a lot. This could be solved if having a “Load More” button with a scroll bar. However, even if implementing the “Load More” button, the scroll bar needs to be updated multiple times whenever a user clicks the “Load More” button. That may make the user difficult to navigate back to a certain item (location.) On the other hand, the pros of using pagination are that it helps a user search for something specific within the list of results, decide how many pages to check, have a better sense of control because it shows the endpoint, and easy navigation (easy to go back and check a certain item.) The cons of using pagination are that it requires more actions (clicks) and may not be mobile-friendly. To reduce the number of actions, displaying enough content per page could be a solution.

Below are the resources that I checked.

• Users' Pagination Preferences and "View All" by Nielsen Norman Group
• Infinite Scrolling v.s. Pagination by UX Planet
• Load More Scrolling v.s. Pagination by Orbit Media
• Infinite Scroll vs Load More Buttons: Which is Better? by Publift
• How Many Items to Load? by Baymard Institute

I shared the research with the Gamut team and agreed to explore two designs: one with scrolling with the "Load More" button and the other with pagination. Also, we discussed how many items to show per load or page. We decided to show 30 items per load or page because it followed other Gamut tool pagination and enough numbers for users to check the recent responses.

2. Design

Based on the research and the meeting with the Gamut team, I created two designs.

I presented them with the Gamut team. We agreed to proceed with the pagination design (Design 2) because it provided easy navigation to check a specific item. Most of the Gamut Gallery users used laptops or desktop computers, so less worry about mobile-friendly scrolling as well.

3. Implementation (Development)

Based on the design, I started to work on the implementation. Once I configured the local set up and created a new branch named gallery-pagination on Bitbucket that was branched out from the develop branch, I checked the current Gamut Gallery code structure. For example, Gamut Gallery used Vue.js (JavaScript), HTML, and SCSS (CSS) for the frontend and used Django for the backend. Also, I had a meeting with my supervisor, a User Experience (UX) designer and frontend developer, to learn more about the detailed code structure. For instance, Gamut Gallery had multiple SCSS directories such as 01-utilities that defined most commonly used CSS variables like colors and font size, 02-vendors which defined browser-specific CSS, 04-layout which defined page regions such as header, footer, and navigation, and 05-components which defined small UI pieces like cards and checkbox. The styles.scss imported all SCSS in the end. I also checked the current Vue component for the Gallery page and learned how each code worked together.

After I understood the current code structure, I worked on the small and easy implementation like UI and then moved to complex logic. While working on the implementation, I especially focused on the consistent UI and UX that followed the current code structure and tried to write an effective JavaScript that shortened the code in the Vue component. Besides, I focused on improving web accessibility. For example, I used opacity:0 instead of display:none or visibility: hidden for invisible content so that content could be read by a screen reader. (Reference: CSS in Action by WebAIM and Does opacity:0 have exactly the same effect as visibility:hidden by Stackoverflow).

As I worked on developing the gallery-pagination, I frequently pushed my codes to Bitbucket and got feedback from my supervisor. I updated and refined my code based on the feedback and passed it onto a senior software developer for review.

4. Testing & 5. Deployment

The senior software developer reviewed my code and deployed it. After the deployment, a quality assurance analyst checked the updated live site for QA.

6. Maintenance

Because of the improved UI/UX that solved and organized the massive responses, we have got great user feedback. So far, we didn’t get any error or update request from the users. In the future, we may update it if we find a better solution or get any user update request.

I successfully designed and developed the Gamut Gallery pagination that handled and organized a large number of responses on time.

Note: You can check a Gamut Gallery pagination at Gallery Tool: Turtle Drawing on the Python Basics course on Coursera

Since handling a large number of responses was a critical UX issue, I needed to research, design, and develop the pagination rapidly. Although I had to work on it very quickly, I made sure to follow each step with enough consideration so that in the future, the Gamut team wouldn’t have to redesign or update the code again. In addition, practicing Vue.js, SCSS, and HTML in a real project was a big takeaway, and I was able to work on the full software development life cycle.