Finalize the design of the Checkpoint Progress Bar on the lesson player page

[ningz2]

Platform Oppia Web

Describe the request The current progress bar can be more fun and encouraging, and should ideally accommodate between 2 and 8 checkpoints on both desktop and mobile view.

The aim of this issue is to finalize the design of the checkpoint progress bar on the lesson page. This includes, but is not limited to, addressing the following two issues:

• [ ] The progress bar should accommodate between 2 and 8 checkpoints on all devices / screen sizes. (If this is not possible, please consult with the PM team as this will have an impact on lesson development.)

  

• [ ] Improve the UI and add animation to the current Checkpoint Progress bar to simulate a gaming experience and let user feel rewarded when making learning progress. The UI and animations could change corresponding to the users' progress when playing a lesson.

Additional context:

• Link to the current design of the Lesson Player pages ;
• Prototype of the current Checkpoints UI on Lesson Player page.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved
• [ ] UX Writing approved
• [ ] Product approved

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

• UXD: @rflore / @S4v8n (for Web projects)
• UXW: @ccc253 / @tamiorendain
• 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