Gradescope — Marketing Page
I was tasked with visual challenges during my internship at Gradescope. A fairly new startup, we recognized the need to visually communicate Gradescope’s product to educators. As such, we decided that our previous splash page was clunky, had too much unnecessary text, did not fit the brand, and we needed a new design to boost user conversion rate.
I started with sketching out ways to organize the splash page. The first few ideas I had were splitting the sections by teachers, students, and testimonials. On the left, I sketched a low fidelity wireframe of what the splash page would look like with the intro section on the top, teacher section underneath it, and the student section following it.
However, after examining our target audiences more carefully, it was clear that most of the time, teachers and educators would be landing on the splash page. Most students only use Gradescope to view their exam results through a provided link, so rarely would they land on the splash page. The mock below shows these changes.
Humans don’t like to read. I decided that I wanted to do away with any unnecessary text. Taking inspiration from Khan Academy and Tumblr, we would have two full-screen sections explaining how instructors would benefit from the product with just the right amount of text, as well as a clean and simple sign-up form at the bottom of the page.
Through multiple iterations, I decided that the testimonials did not seem to fit each section very well. So, each testimonial would have its own mini section. I also got rid of the header image that didn’t fit with our product at all and replaced it with a cute illustration.
And…the final iteration
To cover the case of users wanting to know more about what’s written on the landing page, I designed an about page, get started page, help, terms of service, and privacy pages. Each static page contains a header at the top, containing the title of the page as well as an illustration. Underneath the header is the navigation for all the static pages. The page content sits below the navigation.
In addition, I designed a set of icons for the get started page, each illustrating its associated tutorial title.
During implementation, I added a few bells and whistles such as landing animations and transitions. Before shipping the splash page, we styled the splash page to fit with our branding standards (color, typography, form style, etc). You can see the final product of the splash page here: gradescope.com and the about pages here:
About, Get started, Help, Terms of Service, Privacy