Inside a Design Critique with Facebook
At Facebook, our mission to make the world more open and connected means being open ourselves, sharing not only the work we do but also how we do it. As a result, we began an experiment to share a critical part of our product process: the design critique.
By showing how members of our design organization often conduct critiques, we wanted to highlight what can make critique work well, and what can often get in the way.
We invited designers around the world to participant in this experiment by sharing their work with us using the hashtag #FacebookDesignCrit. Our first collaborative critique was a success (you can read a follow-up article from the participant on what he learned from doing the critique with us).
For our second critique, we met with Bay Area developer and designer Steve Saul, going over his designs for a collaborative online education tool called MixLink.
Six members of the Facebook design org — Ryan McLaughlin, Holly Hagen, Pierre Marly, Geoff Teehan, Tanner Christensen, and Sara Getz — sat down with Steve to discuss his work.
We started by reviewing Steve’s product MixLink, walking through the story of how it came to be.
What immediately stood out was Steve’s preparation. He came to the meeting with a clear vision of what he wanted feedback on, which helped the group focus on a specific area of the product to improve. He explained that his primary goal was to help students using MixLink better understand their progress as they worked through assignments, and he wanted our feedback on whether or not his current designs were achieving that goal.
“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.
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.
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?
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.
Key Takeaways
Overall, this was a successful critique. We had a great conversation with Steve that generated some opportunities to add clarity of progress in the product, both in terms of low-hanging-fruit as well as bigger ideas.
In terms of immediate outcomes, Steve quickly responded to our challenge to introduce more delight into the lesson completion by adding an animated blue checkmark.
Plus, our design team learned some things ourselves about designing for education. Based on this experience, here are some suggestions we took away from the critique:
1. Be really open to feedback
Giving constructive feedback is hard — and accepting it can be even harder. It’s easy to get defensive about the work we do as designers, but Steve impressed us with his receptiveness to questions and new ideas.
It was a good reminder for all of us that when we’re in the hot seat, what’s most important is to stay open and communicative. Trust that your fellow designers want the same thing you want: To build good experiences for the people using your products.
2. Know what you want to get out of critique
Steve came to critique with a very specific goal: Was his design effectively communicating progress and keeping students’ attention? As we asked questions and explored the experience, Steve was able to clarify decisions for us and help keep the conversation evolving.
Coming to critique with a specific objective in-mind can help the group stay focused.
3. Context in critique is key
Finally, while Steve came with a specific goal, we had a lot of questions around the overall experience which might have helped alleviate some of the issues Steve’s area of focus was producing.
Ultimately, by looking to the parts of the experience adjacent to what he was asking about, we were able to uncover some new opportunities to improve the focus area.
Sometimes the most impactful design suggestions come earlier in the experience. With previous knowledge, you can see those opportunities more clearly.
Special thanks to Sara Getz for creating the first draft of this post.
