“I really wanted to make it look and feel like the students were completing what they would be familiar with, which is a handout,” Steve explained. “That’s the explanation for what happens on the right hand side of the screen. The feedback I’m looking for is: how do you design an interface that is simple and easy to follow?”

With a solid framing of MixLink, and a clear understanding of the challenges he was faced with, we got to work.

The assignment progress view helps students stay motivated.

Geoff: Can I ask a question regarding the blue circle progress indicator up top? What are you trying to get at with the circle, is it the days remaining, or the due date?

Steve: My initial thought was the circle would count down from the time that it was assigned to the due date. I thought about students who might be doing this as a homework assignment. In that case, I thought it would be important that they have some marker of “How much time do I have left to complete this?” The question that I didn’t have answered when I designed this was whether or not students would be coming back to this page frequently, that might not be a normal use case. Maybe they just come here once and complete the assignment in a single sitting, I don’t know.

Geoff: It may be an interesting design exercise to go back and think about just that one element, which is currently presented as three elements: the circle, the due date label, and the time remaining label. Go through different types of use cases. Think about an assignment that is due within a short time frame, one in a longer time frame, and so on. Think about what might be the simplest way to communicate what this area is trying to accomplish for each of those cases. Is there just one way to communicate this in an effective manner rather than three separate ones? What might that solution look like in the same space?

Pierre: The other thing to keep in mind is that it looks like you’re mixing a metaphor for a calendar with one for a clock. You’re actually using a circle, so to me there’s a visual tension between the concept you’re trying to represent and the thing you want to convey.

Tanner: Can you walk us through how you landed on the pie chart for this problem?

Steve: Initially I wanted to do a countdown bar. There was an earlier version I had where as you progress through the lesson the bar shrinks until it’s complete. I found that to be confusing, because then there were two similar indicators for progress on an assignment [one being the amount of progress you’ve made on an assignment and another for how much time was remaining until it’s due]. That’s how I got to the circle.

Steve’s initial design for a completion indicator.

Pierre: It might be interesting to think about the notion of how a student responds to pressure with this approach. When you design this, if you keep the feeling of pressure in mind, a visual countdown of a timer might make you feel a certain way versus something more static. You’re talking about how there are a couple of different measurements for completion here, but have you considered removing unnecessary elements? I’m not ready to submit to the teacher until the assignment is completed, so do I need to see a “Submit to Teacher” button that’s faded out?

Steve: That’s a good point. I was thinking about what’s most important at each stage. When you first load the page, what’s important then is a call to action to start the assignment. Then when the assignment is in-progress you have these time-based things around that progress and the progress you’ve made on the assignment itself. And when you’re done, submission matters more than any of that other stuff. I think that’s a good point.

Ryan: Can I ask a question about the layout of the page itself? What’s the value in being able to scan the whole assignment before you’ve started it?

Steve: I was thinking maybe a teacher would have students pre-read the assignment, but if they haven’t started the assignment maybe seeing it isn’t necessary.

Tanner: To be clear, Ryan, are you asking if there even needs to be a Begin Assignment button?

Sara: Yeah, if there was no Begin Assignment button, and it just started the first time a student clicked on an answer. That would help clean up some of this view too because you could remove that button.

Steve: Well, I need to know before a student starts the assignment who they are. From a technical perspective, that Begin Assignment button can log them in if they haven’t logged-in yet. The reason I did it this way was because it removes a step between registering on the site, logging-in and of having teachers having to add students to an assignment.

Holly: I do like the idea of a “Get Started” button. As a teacher, that would probably be very useful. I can see who initiated and actually started versus the people that haven’t, or who maybe got stuck, then I can go and talk with them about their progress.

Sara: Something else is whether to keep the side navigation open all the time or collapse it when a student is engaged with the questions. This goes back to how much information someone needs at any given time. Can you talk a little bit more about why you decided to leave it visible?

Navigation for in-progress/submitted assignments.

Steve: In an earlier version I tried to put a list of links there, and that was really impractical because when items had a really long name there was no way to scroll through the whole list. I decided to leave it open because I wanted students to always see where they’re at for visual reference. I hadn’t really thought about hiding or collapsing it, but I was trying to model it around some testing I had seen online.

Holly: I like that it’s persistent. I like being able to see the question topics and the checkmarks. The due date stuff is where I’m trying to figure out if it’s the most important information.

Geoff: Somewhat related, and this is minor, but have you gotten any feedback on the green checkmarks. Does that feel confusing to students? Have you gotten any feedback on whether they think it’s validation of getting the section answered correctly or not?

Steve: I haven’t, but I can see how that might be confusing. The students can’t see what the right or wrong answers are until after the teacher has graded the assignment. They only see their progress for what they’ve completed versus what’s remaining.

Geoff: I really like how utilitarian this is, but I think it may be interesting to explore ways to make this slightly more fun so the kids really like it. Seeing a progress bar, or when checkmarks come in. I think those are nice cues as a sense of accomplishment. What other little moments of joy or accomplishment can you work into this to continue to motivate people? These are relatively short assignments, but you can imagine on some longer ones that those might become stale or dry. What other ways could you make this more engaging? Like using other interesting design elements when things are completed or using animation when you accomplish something. Those little bits of joy and delight. I think once you nail some more fundamental things that would be a really interesting place for you to look next.

Holly: I could see using positive reinforcement at the beginning or at the end of the lesson. Imagine ending the lesson and you get something awesome.

Steve: Like a gold star?

Ryan: That would be interesting. You could explore an account-level reward system or something too. How much have you completed or something like that that follows you around.

Tanner: We’re just about out of time. Any remaining thoughts or questions? Do you feel like you got some good answers Steve? Do you have some idea now what you need to do when you walk away from this?

Steve: Absolutely. There’s a ton of helpful feedback that you’ve given. Lots ideas about some simple changes and tweaks, but also some new things to consider for sure.