Michigan Online Collection Filter Development

About Michigan Online

Michigan Online is a web application that provides online learning experiences by the University of Michigan in one place. For example, there are many online courses by the University of Michigan in different MOOC (Massive Open Online Course) environment like Coursera and edX. Michigan Online organizes this information and gives a simple way to display it based on the user’s needs. Michigan Online has over 2,500 visitors a day and over 100,000 active users.

Problem & Challenge

On the current Collections page in Michigan Online, a user can filter the collections by “Themes” and “Types.” However, based on recent user research and feedback, the Michigan Online team found that users wanded additional filters like “Length” and “Rating.” In addition, the team found the need to put how many collections there were based on each filter topic and make the filter collapsible.

Michigan Online Solution

Update the collection filter to have additional “Length” and “Rating” filters, show how many collections there are based on each filter topic, and make the filter collapsible.

Michigan Online follows the Software Development Life Cycle (SDLC) like below.

While working on the Atlas Instructor Profile page design, I was also assigned to work on the Michigan Online collection filter project. When I joined the collection filter project, the first process, “Requirements and Analysis,” and the second process, “Design,” was completed by the team already. For example, my supervisor, a User Experience (UX) designer and frontend developer, conducted user research for the current collection filter. He analyzed the result of the user research and discussed what should have improved for the Collections page with the Michigan Online team. After that, he designed a prototype and shared it with me when I joined the project. I asked about the business and UI/UX requirements from my supervisor and started to work on the collection filter development.

My task was to implement (develop) the design using Vue.js (JavaScript), HTML, and Less (CSS) and make it ready to be reviewed by a senior developer and QA team for testing. While working on the collection filter development, I followed six steps: 1. Understand the Michigan Online Code Structure, 2. Understand the Current Collection Filter Code, 3. Plan for How to Develop the New Collection Filter (Pseudocode), 4. Develop from Small Pieces and Test Frequently 5. Have a Code Review with the Supervisor, and 6. Refine the Code.

1. Understand the Michigan Online Code Structure

After I configured the local set up and created a new branch named collection-filter on Bitbucket that was branched out from the develop branch, I checked the current Michigan Online code structure. For example, Michigan Online used Vue.js (JavaScript), HTML, and Less (CSS) for the frontend and used Django for the backend. Also, I had a meeting with my supervisor to learn more about the detailed code structure and ask some questions. For instance, I learned how Less in Michigan Online worked, like having different directories to contain different Less configurations based on components and pages and importing all Less in the learnerportal.less.

2. Understand the Current Collection Filter Code

After I learned about the Michigan Online code structure, I checked the current collection filter code. For example, ExploreCollectionCardGrid.vue was the main Vue component for the collection filter, and it imported the NewCard component, which displayed the actual collections’ cards. It also got the collections data called items through props that were configured in the backend in components.rollup.js. Also, I checked how each data, props, computed, and methods worked in the ExploreCollectionCardGrid.vue.

3. Plan for How to Develop the New Collection Filter (Pseudocode)

As a next step after understanding the current code, I wrote down an overall plan like below.

• Work on the “Rating” filter first (Since the “Rating” filter would act similar to other filters, work it first.)
• Check on mobile, tablet, and laptop/desktop.
• Work on the “Length” filter.
• Check on mobile, tablet, and laptop/desktop.
• Add numbers next to each filter topic.
• Make the filter collapsible.
• Check on mobile, tablet, and laptop/desktop.
• Code review and refinement.

Also, I wrote down a detailed plan (Pseudocode) for each. For example, for the 1. Work on the “Rating” filter, I wrote…

• Work on UI (Add rating fieldset)
• Add selectedRating data.
• Add a rating filter logic in the filteredItems() computed property.
• Add a clearing rating filter logic in the clearAllFilters() method.
• Add “stars only” text next to the rating number.
  • Create a new method updateRatingText(rating).
  • For null, add the text “Unrated” instead.

Although I followed the initial plan and the pseudocode, I updated them a couple of times when I found more effective ways to write a code or got a new requirement.

4. Develop from Small Pieces and Test Frequently

Based on the plan and pseudocode, I started to work on the development. I tried to develop from small pieces that were easy to implement, like UI, and then work on the complex logic. I frequently tested the code and checked if the updates worked on different devices such as mobile, tablet, and laptop/desktop. Also, I frequently pushed my update to the collection-filter branch.

5. Have a Code Review with the Supervisor

After the development, I had a code review with my supervisor. Since the main functionality was working well with the matched UI, my supervisor was impressed and gave me a great compliment. He also gave me some recommendations to create a new component to reduce a similar code, and we discussed how to improve accessibility.

6. Refine the Code

Based on the feedback, I created two child components for the filters based on the similarity. For example, I created a ColllectionFilter.vue component for a general filter such as "Themes,” “Types,” and “Ratings.” Since the “Lengths” filter was special in terms of UI and logic behind it, I created CollectionLengthFilter.vue for it. After creating two child components, I used emit to communicate between parent and child components and imported the child components in the parent component (ExploreCollectionCardGrid.vue). I also modified some of the computed properties and methods in the parent component to handle emitted properties. As to the accessibility, I added aria-live=”polite” for a screen reader. For example, when there is a filter change, let the screen reader know what happened, like “3 items selected.” Because of the polite setting, the screen reader will wait until a user pauses before notifying the filter update.

I successfully completed the collection filters on time and met all requirements. The code is on review with a senior software developer and will be tested by a quality assurance analyst. After the review and the test, the code will be deployed soon, and my supervisor and quality assurance analyst will check the updated live site.

The big takeaways from this project were that I could practice Vue.js and Less, write effective code by creating new child components, improve accessibility, and develop a responsive website. I also learned that frequent tests and reviews were the keys to developing the most effective and responsive website.