Redesigning Campus Copies / Classical Notes

Yodit Chere
Principles & Practice of User Experience
4 min readJun 7, 2015

CC/CN is an ASUCD sponsored site that provides students the ability to buy the notes of previously offered classes and the opportunity to print papers in bulk at the CC/CN office. Deborah and I were tasked with redesigning this website.

The Problem

The site itself is simple: the copies page lets users get a quote for how much their prints would cost and the shop page searches through the catalogue of notes previous students submitted. The layout of the site is split to show that copies and notes are equally important services.

Technically, people can print their notes. But only at the CC/CN office and you can’t have the notes online anymore.

The biggest issue with the site is its mishandling of information for the user. Things like how bought notes can be printed out at the office and that the copies take only exact change aren’t mentioned anywhere on the site. And another concern we had was the feeling of inconsistency in navigation. So it became our goal to change CC/CN’s presentation of information, and make each page have a consistent theme.

The Struggle

Our initial ideas were directed by the suggestions given to us by Janice Pang, the previous website designer for CC/CN. Her insight in the design choices made affected our view of how to change the overall experience of the site.

So, we got to work. Deborah sketched out a site map in the blink of an eye. It became very clear that the home page didn’t serve a necessary purpose for the site. And when the employee we interviewed said that the notes were more important than the copies, we scrapped the homepage and replaced it with the about page.

For the wire frames, we split the work so Deborah made the first wire frame and I built off that and she built off mine.

The initial wire frames were used to determine the general layout of each page.

The next versions were used to decide the color scheme to have each page use a consistent theme.

The Solution

Now the about page serves as the landing page with all the information up front. Navigation was changed so the current page is shown with a white font color and any buttons on a page are different shades of the navigation bar tab’s color. And the shop page shows a note that says you can print your notes at the CC/CN office.

We added the ability to preview what the notes will look like before purchasing them. And when a student is logged in, they are able to see what notes they own and what they have previously uploaded.

--

--