Gradescope Redesign: Creating a habit-based user interface
The design story behind my first stab at a workflow-based interface
For the past few months, I had a blast working with the team at Gradescope to work on a complete redesign of their web application. Gradescope is a web application started from UC Berkeley that allows instructors to upload scans of their paper exams and grade them online. Instructors from schools like UC Berkeley spend 24 hours on this app to grade students’ assignments or midterms. Therefore, it’s crucial that the instructors become used to the user interface to be a part of their workflow.
By definition, the -scope suffix means to be an instrument that helps users accomplish a certain task every day. Take a look at a telescope or a microscope, for example — their users’ workflows revolve around them, and these interfaces build users’ habit around them. With Gradescope, the team and my goal is to create an instrument that that helps users grade assignments much faster and easier than before. As such, I started with building an interface that users can build habit around it, and have no problem using it for hours every day.
Design Direction
One of the key rules to building a great user interface is consistency. It’s because a user interface with consistent, recurring patterns allows users to build a habit around a user interface. This is why certain interface patterns like the top navigation bar are so ubiquitous for Web, hamburger menu for Android, and bottom tab bar for iOS. These patterns are especially important for productivity apps that revolve around users’ workflow, such as Microsoft Office, which features a Ribbon menu for its action items.
For Gradescope, I separated the app into three parts: Navigation, Content, and Actions. Whenever a user wants to move to a different section of the application, the user will look at the left sidebar. If the user wants to take a certain action — for example, after selecting a submission, the user will look at the bottom action bar. The rest of the app is dedicated to the content, which is the most important element of the application.
The design isn’t quite the conventional F-style layout common in applications. You’ve probably seen many designs like this all over Dribbble:
Gradescope, on the other hand, uses a bottom bar instead of a top bar. I chose this approach because the bottom action bar is not an interface that’s available at all times and because it’s lower on the information hierarchy compared to the content. It makes sense to use a top bar for navigational elements because these are higher on the information hierarchy: you reach the content after you click on the navigational elements. Gradescope, on the other hand, uses the horizontal bottom bar as a place to show contextual information related to the content and actions that users can take for a selected item. Users might have some trouble in the beginning finding where the action items are, but once they get used to it, they know where to find the action items from any page.
The user needs to access the bottom bar only after selecting some element in the content area, so it’s lower in the information hierarchy. It’s still an extension of the F-style layout paradigm: users scan from top-left to bottom-right so place the most important element on the top-left and the least important on the bottom-right.
One key design in the new Gradescope is the “Next Step” button on the bottom right corner. Gradescope has a 6-step workflow: Create Assignment > Create Outline > Create Submissions > Verify Submissions > Grade Assignment > Review Grades. To help the user understand this workflow, and more importantly, feel like they are “moving forward” in this workflow after each completion of a task, the interface needs to give the user a sense of direction. As such, in any page, users can click on the Next Step button on the bottom right to move to the next step. For example, after an instructor finishes grading one submission, the next task is to grade the next ungraded submission. That’s why there’s always a Next Ungraded button as the Next Step button on the bottom-right corner.
Its placement on the bottom-right corner makes sure that it’s an element users will access after reaching the page (navigation), scans the page (content), and takes the action (action bar).
Branding
There’s a notion that enterprise softwares are clunky and hard to use. It’s made even worse by trying to make the design appear professional, which in most cases just becomes dull and boring. With Gradescope redesign, my goal was to create a bright and fun interface because this is an app that instructors will use 24/7, and I wanted to make sure that working can be fun.
Instead of a muddy navy color Gradescope had in the past, I chose a bright wintermint as the primary color. As for the font, I chose Proxima Nova (as cliche as it is) because it strikes the balance between professional and playful just right. Lato and Museo Sans were other strong candidates, but they were too round for a workflow application. Proxima Nova’s edgy characters gives it a sleek look while not being too flashy.
At the same time, Gradescope is still a workflow-heavy application, so I got rid of as many embellishments as possible. The interface is predominantly white, with subtle grey strokes of 1px ~ 2px to establish hierarchy and segment items. This minimal interface design for Gradescope was inspired by Rdio, Dropbox, and Prismatic.
When you have a minimal interface design like the new design for Gradescope, it’s important to make it not look barren. There’s only a fine line between simple and barren. This is why having a bright primary color is important because otherwise the app will look way too flat and boring. Here’s Gradescope with the new design in its old color scheme versus the new color scheme:
Another change I made to make the design look less barren is to use round, pill-like buttons instead of rectangular buttons. When the redesign was first pushed with 2px rounded-rectangle buttons, the app looked quite boring and empty. With more pill-like shaped buttons, the app seem friendly and softer while maintaining a minimal look. This is why many minimal interfaces like Medium and Assembly use rounded buttons instead of typical 2px rounded rectangles. (Try going to Web Inspector and changing all of the buttons on Medium to 2px rounded rectangle — it feels a lot more barren.)
Key Interfaces
Create Outline
In the previous design, there are lots of mouse movements back and forth between drawing the question box on the right side and editing the content on the left.
The redesign combines the question box with the form itself, which divides users’ tasks into two areas. Everything related to editing the assignment happens on the left, where users can draw the question box and directly edit the information related to the question on the question box. The right side is the bird’s eye view of the assignment outline, where users can reorder the question or take actions related to the assignment as a whole.
Grade Submissions
Buttons were all over the place! Many of these features are necessary, but there’s no need to show them all at the same time & at the same level of hierarchy — as an attempt to make everything accessible anytime.
In the new design, buttons related to viewing the assignment PDF are moved on top of the PDF file, to maximize the use of space. I also reorganized the typography on the sidebar to establish a clearer hierarchy among questions. As the user grades each assignment, the user can see the progress bar filling up, creating a sense of accomplishment.
Create Submissions
It is difficult to understand the concept of “submissions.” Simply put, when the instructor uploads a single PDF file, that file might contain dozens of submissions clumped up together. In the Create Submission step, the instructor splits this PDF file into individual submissions, which will then be assigned to each student ID. The previous design did not help users understand this concept at all.
The closest analogy to Create Submission task is iMovies. You first import a raw video file, and then you can split this file into different chunks.
I used a similar interface for Create Submissions view, where you import a PDF file, and for each PDF file, you can click between the page to split the file into different submissions, similar to iMovies.
Walkthrough
For a workflow app like Gradescope, it can be daunting to get used to the application for the new user. The old Gradescope used to have series of YouTube videos to educate the user on how to use the software. Nobody wants to sit through hours of lectures to learn a new workflow. How can we make this process a bit easier, and more importantly, fun?
The new Gradescope uses different types of walkthrough views depending on the page. For simpler pages, there will be a simple popover describing each feature. For more complex pages like Create Outline, I used a full-screen overlay highlighting key features with an animated interface using a mp4 video. The key motivation behind this is “Why have the users imagine what’s going to happen when you can show it yourself?”
Another important piece to Gradescope’s walkthrough is Try yourself. When the first-time user is in a walkthrough for a demo class, the user can opt to “Try” the feature by completing a series of tasks. For example, the user might be asked to draw 3 question boxes and give them title & points. This “Learning by doing” methodology has been proven effective in interactive museums like the Exploratorium, and makes learning a new interface much easier and fun than sitting through long YouTube videos or reading through documentations.
In case the user has forgotten how to do something, there’s always a Helpful Panda icon on the bottom-left corner, which the user can click on to open up a help dialog specific to the page the user is viewing.
An interesting story here — Gradescope used to be called Pandagrader, and many of its user base still misses the name Pandagrader. Although the team chose to stick with the new name Gradescope, we still love pandas, and decided to use it for this new Help button on the bottom-left ;)
Retrospective
Please, Please, Please Test
The redesign didn’t really go as I expected. The team unfortunately rush-shipped the product with not enough testing and imperfect design, and this caused quite a bit of confusion among instructors who are relying on the product as a part of their daily workflow.
Ideally, we should’ve created a beta.gradescope.com, where we test the redesign with a small set of instructors and classes, so that the majority of users won’t be affected by the redesign. Because we are building a workflow application that revolves around people’s habits, it’s important to keep in mind their existing habits before rolling out the redesign. However, the team had to roll out the design to time it for a great user acquisition opportunity.
I understand that this was an optimal decision at the given time. As a startup, you have to work with constraints and in some situations, you can’t always deliver the best user experience you had planned. It’s still important to keep in mind that a redesign isn’t just for new users, but also for existing users. You can get 1000 new users, but what’s more important is satisfying 100 loyal users you have and that’s why you do a redesign in the beginning.
Being a good designer isn’t just about producing good designs
To be honest, I am to be blamed for this as well. A designer’s goal is to deliver the most optimal user experience to the user. This doesn’t just mean you need to produce good designs — it means you need to communicate with the team after you created the design and hold their hands throughout the implementation process.
A huge mistake I made was that I did not provide them with pixel-specific dimensions regarding typography and spacing. 18px Proxima Nova as a paragraph text might look good on Sketch, but it’s not actually the case on an actual website. This is because on Sketch, I usually work with 1440x900 artboards zoomed out, so I have an illusion that elements look fine although in reality they are humongous. As a result, everything on the production website looked HUGE, as if they were zoomed in by 50%. Here’s an example:
As a result, when I saw the implemented site on staging, it was nothing like what I had imagined it to be. As I transition more into the role of a designer away from a jack-of-all-trades startup guy, I know that I will spend less time coding and more time on just design mockups in Sketch / Photoshop. This means that I need to be much clearer with my communication, so that the team can produce pixel-perfect design in production code as well.
Special Thanks
I want to first thank my friend Sarah, the current CS teaching staff at Berkeley, for giving me courage & assurance that my design is helping her life, and possibly the lives of many other people. I am grateful because I am motivated the most by users’ delight — each little compliment and recognition that I am helping their lives is what makes me get out bed every day. As a user interface designer, I design with users in mind, and having a perfect persona for the app like Sarah has been incredibly helpful during my process. I know in part, the design was imperfect, but the feedbacks from Sarah and the CS teaching staff in Berkeley has been immensely helpful and Gradescope team and I will strive to make Gradescope a better experience for everyone.
I also want to thank the Gradescope team — it was a blast working with you guys. You guys reminded me the importance of working with constraints that I sort of forgot about as I transitioned from an entrepreneur to a designer. Ideally, I would like to focus solely on creating the most optimal user interface.
However, during my time working with Gradescope, I learned that optimal interface doesn’t mean the absolute best user interface; it’s the best user interface given the constraints you work with at the given situation.
You guys have a great product that’s helping the lives of many instructors and I hope you guys the very best as I hand off the design to you guys ☺
p.s.: Thanks Rick and Jonathan — you guys know why ;) I can’t wait to write my next blog post on my e-sports project I am working with these super talented bros!
