Improve and Add Animations to Gamify Checkpoint Progress Bar on Lesson Page

[ningz2]

Platform Oppia Web

Describe the request The current progress bar can be more fun and encouraging. Improve the UI and add animation to the current Checkpoint Progress bar at the bottom of the lesson page to simulate a gaming experience and let user feel rewarded when making learning progress.

Context for the request

• This is an improvement based on the current Checkpoint progress bar at the bottom of the lesson page.
• The UI and animations will be changing corresponding to the users' progress when playing a lesson
• Link to the current design of the Lesson Player pages ;
• Prototype of the current Checkpoints UI on Lesson Player page.

Link to PRD N/A

Information about deadlines/priorities This can be tackled at the usual priority.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved (Android mocks should include dark mode)
• [ ] UX Writing approved
• [ ] Design Systems Team approved
• [ ] Product approved

For a design project to be completed, it needs approval from UXD, UXW, DS and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the 4 bullet points below):

• UXD: @rflore / @S4v8n (for Web projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[suzieDev]

I designed five versions of the progress bar. Waiting for feedback on Weekly meetings. Here is the link of the file https://www.figma.com/file/NzlLlVaPYt9yB0pqqOQWaK/%2393?type=design&node-id=0%3A1&mode=design&t=vkdlE30likjHxUTJ-1 Any feedback would be appreciated.

[suzieDev]

Need to work with Julia to ensure the design is consistent.

[suzieDev]

Meeting with Julia on Friday

[suzieDev]

Meeting summary:

• Practice session is a quiz to check understanding of concepts learned in the lesson
• Practice session is separate from the lesson and has its own set of questions
• Each lesson can have 3-8 checkpoints
• Learners who have accounts can save their progress at each checkpoint automatically, but not for non registers
• Progress bar should be clear and visually appealing
• Consider adding animations or effects to make it more fun
• Number of checkpoints couldn't fit within the available space on mobile

[suzieDev]

This week working on version2 ideation, so far I've come up 2 ideas, here is the link: https://www.figma.com/file/NzlLlVaPYt9yB0pqqOQWaK/%2393?type=design&node-id=93%3A2798&mode=design&t=TsWsNTxdSlbOblQi-1

[suzieDev]

Feedback on version 2 from Sean, Ritti, and Julia. One advice is to stay on a less complex design, not distracting learners. Suggestion two is to consider the mobile version's design space. For the following week, plan to revise and explore progress bar designs.

[suzieDev]

Here are the changes:

Iteration on Idea 1 I made the check mark into animation when it first reached a point. Different colors of check marks indicate to learners which step they are at. Use an avatar instead of an otter animation above the progress bar. Iteration on Idea 2 I removed the curved line and the motivation item changed to a dotted line with a new animation otter to add a bit of fun. Idea 3 (new idea) Use different colors to indicate steps for the progress bar and an animation figure to add a bit of fun.

Problems encountered:

The original progress bar is a line, so the space on the bottom is tight for trying different designs, especially the height. For example, Ideas 2 and 3 touch the bottom line, so I had to resize them until it fixed the height on the bottom. But the potential problem is that it might be too small to see on the screen. I seek an answer if the height is fixed, which means no change is allowed by now, or if it's okay to adjust.

[kmuir1991]

Per discussion this morning, assigning @tydesignit as the UXW for this issue.

[tydesignit]

Per discussion this morning, assigning @tydesignit as the UXW for this issue.

Suggestions completed, viewed/commented on by @suzieDev, and now awaiting feedback.

[suzieDev]

awaiting

I got feedback for the window message from other designers, and can you please provide your help on how to better improve the window message? Thanks!

[stepmalt]

@ccc253 You have been assigned to this project. Reach out to Suzie with any questions about the project. Take a look at the copy and make edits as you see fit and address anything @suzieDev brings up. Here is Suzie's email: suzieeeli@gmail.com

[ccc253]

Updated microcopy, waiting on feedback from Suzie