Behold, a story in picture form. At the end of this adventure, I hope to have conveyed some sense or feeling about our “process” at KA. But, you can be the judge of that.
We begin on the class profile page, which looks something like this.
How might we take this progress report and make it More Awesome? Say, make it easier for a coach to glean useful and actionable information? Can we show less in order to show more?
Sketch 1. One row, one exercise, different segments’ sizes are proportional to students’ progress. Scan up/down, instead of both up/down + left/right.
Sketch 2. What might happen.
Sketch 3. Get feedback! This is where Jason provides the brilliant idea of some expansion action that drills down and provides detailed student data. A long list of students under struggling or proficient still provides visceral uh-oh or oh-yay feelings. The possibilities are endless! Might you decide here to pair a struggling student with a proficient student?
.
Screenshot 300. Wherein you learn that I have much to learn about CSS.
Closer…
Learning handlebars.
Abiding by our site’s color scheme.
Like a perfectly timed cooking show, look at what we deployed earlier today! This is a real-life class, on the easy exercises, with lots of blue and orange to the right.
The same class on the harder exercises, notice the weight to the left in the bleak gray land of Unstarted.
What happens when you click on a row. The horizontally stacked segments metamorphose into a bar graph of sorts, with all of your students’ names listed alongside.
You can probably see the changes here and there between the screenshots, but I’ve listed some of them below. We have Jason, Marcos, and Matt and their feedback to thank for that!
- left to right ordering of status is swapped
- exercise name moved to the left to reduce vertical space
- shows number of students per segment, unless the segment is too skinny
- shows legend up top to remind you what the different colors mean
- cursor changes to convey “hey-you-click-me!”
- major improvements to the experience of clicking and expanding a row. easeInOutCubic is your friend, as is fading-in in sequence and slower, while fading-out in parallel and faster.
- truncate long student names with text-overflow: ellipsis
Without a doubt, the behind-the-scenes-code-action is also less appalling because of the Bens (Kamens, Komalo, Alpert) and the singular Desmond.
And there we have it, the lightweight collaborative + iterative spiral from idea to sketch to okay to better. I’m excited to chat with some coaches/teachers on Friday, and that’s how we can get from better to best.
Yay!
