Project 3: Columbia Journalism School Website

TASK

AndrewR UX
5 min readMay 24, 2016

Redesign the Columbia Journalism School Website.

Time frame: 2 weeks

RESEARCH METHODS

Content Inventory

User Interviews

Personas, Identifying Main Persona

Task Analysis

Heuristic Analysis (Based on Nielsen Norman Usability Heuristics)

User Testing (both current site and redesign tests)

Card Sorting (open and closed)

Competitor Analysis

Content Inventory

I made a content inventory to gain an overall understanding of the website, and to look for R.O.T. (redundant, outdated, trivial).

Content Inventory

User Interviews

I interviewed 2 former Columbia Journalism school students, a Columbia J-school administrator, and an NYU J-school student. I wanted to understand the needs of journalism students, and how/how often different users (prospective students, current students, alums, faculty, alumni) engage with the website.

Primary Persona

Ideally, my redesigned site would work for everybody, but I decided to focus on the Prospective Student. Prospective students need the most information in the shortest amount of time, and have the least familiarity with the website.

Task Analysis/Primary Need

The primary need for a prospective student is to: Research which program to apply to, and then apply.

Task Analysis: Research available programs > Choose a program > Check application requirements/deadlines > See financial aid/tuition > Apply

Heuristic Analysis

Next I conducted a heuristic analysis of the current site, based on Nielsen Norman Usability Heuristics. The heuristic analysis was quite lengthy, so I’ll just provide a few of the slides here:

ABOVE: The dropdown menu is disconnected from the main menu item. It’s difficult to see that this is the drop down for “CAREER SERVICES”.
ABOVE: Difficult to notice Apply Feature on the side.
ABOVE: Site is flexible, but accomplished through overabundance of buttons and pages. Not clean.
ABOVE: The website has is very inconsistent. These two degree pages have very different layouts.

User Testing:

I had users test the current site, by asking them to accomplish basic tasks that a prospective student would have to do. The following quote best sums up the testing:

“What I would expect from a site like this… would be a consistent hierarchy and structure. If I were going to go down a path to learn about one degree program, that I would be able to do the exact same thing for a different degree program. But this site was structured so inconsistently that there was no way I could go from one program structure to the other. It was totally illogical.

After all this research, I came to some conclusions about the current site:

Research Conclusion

-Overall the site is usable, but extremely cluttered and inconsistent.

-Apply Sidebar feature was not noticed.

-There are too many unnecessary pages.

-Users can find the information they need, but the experience is not enjoyable.

THE REDESIGN

REDUCE menu options.

REORGANIZE features into more efficient groupings.

Use a less cluttered LAYOUT.

Redesign Methods

Card Sorting

Competitor Analysis

Site Map

Wireframing/Prototyping/Iterating

Card Sorting

Used Xsort program (I recommend) to narrow down Navigation Categories. I reduced the amount of main navigation options from 18 down to 11, and removed Calls To Action (Sign Up, Apply, Donate) from the main page. Users were not interested in these Calls to Action (for example, it didn’t make sense to Apply directly from the main page before you had researched the programs and financial aid.).

Screenshot of Card Sorting results for one of the participants

Site Map

Using the Card Sort results, I created detailed site map of how the new site should be organized. I think the new layout creates improved organization and usability, without losing any information or features.

Site Map of the Redesigned Site, based on card sorting and user interviews.

Competitor Analysis

Noticed better use of Sidebar navigation on other college websites, and borrowed those features in my re-design.

I felt that the New School’s use of sidebar navigation was better, and incorporated these ideas into my redesign.
Current Columbia Site using multiple Horizontal Nav Bars, which is visually cluttered and confusing.

Designs & Iterations

Iterations
Iterations
Iterations

New Site

It would have been a full time job to build out the entire site, so instead I built out the flow for a prospective student who needs to research a program, and then apply.

I feel my current navigation and layout is cleaner than the original website, although I will need to incorporate more images and pictures in order to make it more stimulating to the eye.

Video of user using prototype:

You can see the prototype here, built with Axure: kzcid6.axshare.com/#p=home (Password: Salsa1234)

And as an extra project, I used HTML, CSS, and Jquery to build a coded version prototype, here:

I’d like to note that I did plan out the basic Information Architecture for the full site, which you can observe in the Site Map I made, but these pages are not built out in the prototype.

Site Map of the Redesigned Site.

--

--