During the summer of 2012, I worked as a user interface designer for a UC Berkeley online education project with goals to create an open source online learning platform, where university classes could be put online and anyone in the world could take the classes. My team and I joined the edX development team in July 2012, after UC Berkeley decided to align with edX, due to our similar goals for open source and non-profit educational experiences. (edX is an online learning collaborative founded by MIT and Harvard.)
After joining edX, I began working on UI design for the existing edX courseware platform, and one of the first mini-projects I was assigned was to redesign the question grouping interface. This was only a very small part of the platform, but was important to several courses that would feature multiple answer questions. This project consisting mainly of a bit of sketching and high fidelity mockups, as well as testing out potential designs in HTML / CSS.
(Yes, this is a very small design decision, used mostly for illustrative purposes to explain my design decision-making process while working at edX, from sketch to mockup to code.)
Arjun Singh, Berkeley's lead developer working on the edX platform, sent me this screenshot of the multiple answer question layout. This is a question with multiple correct answers, but the instructors did not want students to know exactly which answers were correct, only if they had gotten the entire questions wrong or right. Thus, the "x" (or check for right answers) was left at the bottom of the answer choices, a location that was not particularly appealing and slightly unclear. I was tasked to edit the layout of these types of questions to improve the visual design and clarity.
Initial ideation and sketches
Proposed layout for multiple answer questions, minimizing trapped white space, maintaining visual aesthetics, while communicating effectively that a question's answers were overall right or wrong. Designed in Balsamiq. (The sticky note addresses potential development concerns, notably the responsiveness of the web application, as some of the extra white space in the previous layout was to preserve responsive layouts.)
High fidelity mockup of design (Photoshop, CSS / HTML) sent to development team.
Proposed design implemented in edX courseware for CS188, Artificial Intelligence at UC Berkeley.
