UX · VISUAL DESIGN · FRONT-END DEVELOPMENT

Otis College needed to improve its means of generating income in ways other than the traditional college experience. My mission was to improve the perception of the Otis Extension online presence. From looking at the aging Extension catalog page, it seemed prudent to do an extensive website redesign.

After the new site design launched average time spent increased 27%, bounce rate decreased 7% and pageviews increased 157%.

I was eager to jump in and get to work improving the site, but first I isolated the area most in need of improvement. If I fixed that, it would have an exponentially greater impact than if I were to focus on many, less needed areas (this is what's sometimes referred to as the Pareto Principle).

Based on my observation (and some informal user research), I reached the conclusion that the navigation was the biggest underlying problem with the site. It was hard to understand the archaic system and how to reach the goal that the user had in mind; finding courses that appealed to them, and applying to them.

To break the previous functionality down further, the main page of the catalog contained a few lists with different categories of classes. To  complicate matters, when clicking on a category, the user gets taken to another page containing more lists related to the discipline chosen. The flow was based on the rigid parameters of academic organization rather than what users were looking for.

I decided to sketch out a rudimentary flow diagram outlining a less obtuse user experience. My goal was to reduce the amount of pages users would have to navigate in order to achieve their goal of signing up for a course online.

The Catalog Page

With this strategy approved, I moved on to sketching possible solutions. User research revealed that navigation was the most commonly mentioned pain point, so I attempted to make the catalog page function so that users could quickly browse through courses, disciplines, and schedules.

Ideally, I wanted it to be a single page. This would have resulted in the cleanest user experience, but while I was able to push for radical changes to the overall site experience, the department stakeholders needed to keep distinct catalogs for their different demographics (such as Adult Education, K-12 & Pre-College, and Summer Courses).

I was pretty satisfied with the finished product; I felt that it was dramatically simpler and more elegant than the previous iteration of the site catalog.

The Course Page

The layout for the old course page had many problems. The most salient information was very difficult to read and the amount of information thrown at the user was daunting. I immediately set to work on improving the typographic hierarchy

The new design employs a two-column structure (on desktop) to cleanly separate descriptive copy & related information from pure course data. This would help ensure that users could quickly peruse the page without having to wade through poorly formatted tables buried underneath mountains of body copy.

I was able to find time to add a few new features that I hoped would also improve user experience; the first open section in a course would be expanded, while other sections would be collapsed by default (but the add to cart is always visible, as it’s the most important call-to-action on the page). If a section becomes filled, it will automatically collapse and the “add course to cart” button will be replaced by a prompt for the user to sign up for a waiting list.

The Checkout Page

Much like the rest of the old site, the checkout page was overwhelming and unfriendly. There was no clear indication to users how many pages they should expect before completing their checkout, and the site design was using old branding, further decreasing user confidence. Since our goal is to keep users from abandoning their carts, we needed to increase user’s trust in our checkout.

While the new design isn’t really revolutionary, it is better at informing users of where they are in the checkout process. The branding and visual identity mirrors that of the catalog site much better than before.