Reflect stage banner progress indicator

[stenington]

No description provided.

[rsgonzal]

think this is still important. there was a question in QA about if it's clear when a person is done with a lesson, i think this banner could help!

[stenington]

How about some sort of indicator on each page that shows whether they have or haven't done what we want them to do? I feel like some sort of progress indicator on each page might be more helpful to the user than hitting reflect and being told "wait no go back and do X", "ok wait now go back and do Y", etc.

[stenington]

I guess I can also imagine like a "what you did in this lesson" section of the reflect page that shows whether they've actually uploaded the stuff we want or not, which might give them a nudge to actually go do it. My gut tells me a banner that may or may not show up (and might have different messages depending on state) will be easier for a user to overlook. Something like a checklist more clearly communicates "these are things you should definitely do" to me, although I don't have a lot of experience watching families or anything.

[rsgonzal]

i like both of these ideas! We should explore these next meeting

[RRios00]

Here's the sketch

lol

• Creating a checklist on the right side - similar to Technovation

• Modal for Build section

• Modal for Reflect section

• Modal for Final section

[stenington]

Two things for me to look in to:

• how to track progress on each tab
• how next etc. buttons can pop up a modal as necessary

[rachwyatt]

@stenington were you already looking into this and have anything to pass on or should i start doing the initial digging in? i have some ideas on how to get started, but I also need to get some lessons locally. I can't remember how to do that.

[stenington]

You can start to look at it if you want. The lesson pages use Vue here and there which we haven't talked about, but I'm not sure if that would come in to play for this feature.

We don't have any lesson fixtures so you can just create fake lessons yourself for now. Or you can take some time to create the fixtures.

[hellafitz]

@stenington can you take a look at this and see if you'd have what you need to move forward?

[stenington]

@hellafitz The sketches referenced here have all gone missing, so no, I don't remember this one clearly enough to work on it.

[hellafitz]

@rsgonzal to check with Ruby about whether the images may be backed up somewhere

[rsgonzal]

Added mockups here: https://drive.google.com/file/d/19TJnRN3nkr9t_MY0kZBgZ6G_TuEidj3K/view?usp=sharing
Here's the overview but individual screens are in the drive.

[rsgonzal]

https://drive.google.com/drive/u/0/folders/1BIIgY0L_LiF9zCPFPEAEDd09tOgYenLh

[hellafitz]

Open questions:

• what marks a page complete (clicking Next vs just loading the page)?
• implement in Vue or in Django? (originally we were going to do it in Vue and Rachel got stuck there; plus do we really want more Vue?)
• this might be a significant investment - how valuable is it, really?