design of event pagedesign of department page template
design of department history pagedesign of academic planning page
design of news article templatedesign of students page, featuring four big buttons labelled: academic planning, finances, student life, and career servicesdesign of news article template
design of academic planning pagedesign of majors and minors pagedesign of student life page with sections for city living, get involved, and stay well
design of department news pagedesign of english department page
CUNY

Hunter
College

In 2017, I led the redesign of the Students section of the Hunter College website. I was responsible for all of the UX design, most of the user research, and training the client in content design.

The Challenge

As a college of the City University of New York (CUNY), the systems and information that Hunter students need are split between CUNY and Hunter websites. This disjointed experience is confusing, frustrating, and often leads to missed opportunities.

four dense columns of links
The old Students page.

To make matters worse, Hunter’s website was built 10 years ago on an unfriendly CMS. Instead of using it, many of Hunter’s departments created their own websites, but they’ve struggled to keep information consistent and accurate over time.

To rein in their departments, Hunter asked VGD to help consolidate the information that undergraduate students need for academic and financial planning. That included building responsive templates with a new CMS, which would be leveraged to update their entire website later on.

As the UX/Product Architect, I directed our process from research through design. I was also responsible for collaborating with stakeholders, communicating all findings and solutions, while addressing their questions.

I conducted most of the user and stakeholder research and developed the information architecture, wireframes, and early prototypes for the site. Later on, I directed developers to build additional prototypes and designers to create high fidelity designs.

Research & Validation

After being briefed on the project, Hunter staff walked me through the sites and systems students have to use. They also shared their Google Analytics account and a report on Hunter students conducted by an independent researcher before I was brought on.

Hunter had a general idea of what they wanted; a section of the website consolidating the information students need to succeed. It would appear as “Students” in a menu for accessing information by audience. That menu would be secondary to the main navigation, which organized information by topic.

I used Adobe Muse to create a rough prototype of their concept and went to campus to test with students. I also conducted usability tests of the current site and interviewed students on their most recent experiences.

low fidelity design featuring section of links to register for classeslow fidelity design featuring section of links to register for classes
My first prototype of the Students page, based on Hunter’s proposal.

I learned that students struggled to navigate and find answers on Hunter’s site. They primarily relied on Google search, but also asked for direction from friends and family who were upperclassmen.

The most critical discovery was that students expected to find all content through the main navigation, which organized information by topic. They did not try to use the menu that consolidated information for “Students.”

A “Students” section did not fit their mental model of the site

While it may be a useful tool once students learn about it, it was clear that a “Students” section did not fit their mental model of the site. There would always be confusion about which information can be found through the main navigation or in the “Students” section.

I proposed redoing the entire website’s architecture and organizing all information by topics, instead of having a secondary audience-based section. The project’s stakeholders agreed that that would be ideal. Unfortunately, since they had received a grant to create a tool just for students, they would be audited before we could overhaul the entire website.

They decided to proceed with the original plan, with the understanding that some students may overlook the new section. Content within the topic based structure of the site would have to be redundant or direct students to the “Students” section.

Information Architecture

I first tried to develop the IA for this section of the site by reviewing Hunter’s existing sites, Google Analytics, and Google Trends. But much of their content was unclear, missing, inconsistent, or inaccurate.

Instead, I devised a plan to develop the IA by identifying, prioritizing, and organizing the needs of students.

Adults sitting around several tables and writing. One person is looking up as if he's thinking.two groups of sticky notes labelled: emergencies and loans. One note, "How do I apply for a loan?," has 7 small stickers on it.
wall of sticky notes, grouped and labelled. Several groups are circled together with labels like: calendar, social life, opportunities, and academics.Man standing in front of a whiteboard, facing a seated group and gesturing with a paper in hand. The whiteboard displays a numbered list: 1. Practice, 2. Note Actions or Questions, 3. Group Related Notes, 4. Vote, 5. Label Groups.8 young adults facing a wall covered in sticky notes and moving them.
8 adults looking at a wall covered in sticky notes, with some pointing at them.10 adults looking at a wall covered in sticky notes, with some pointing at them.9 adults facing a wall covered in sticky notes and moving them.
10 adults looking at a wall covered in sticky notes.Adults sitting around several tables and writing on sticky notes.Wall of sticky notes grouped and labeled, with some notes having small stickers on them.

I ran five workshops with students and staff using individual idea generation, affinity mapping, and dot voting. I logged the results as mind maps in MindNode and combined them into one organized map of student needs.

five branching trees of text with color coded lines
The results of each workshop, before I combined them.

To verify the results, I conducted open card sorting exercises with students. I then refined the mind map into a site map and returned to Hunter to test an updated prototype.

Usability Testing

I drew wireframes for our UI designers and worked closely with them to design several templates for the site. At the same time, I asked a developer to build a new prototype.

I conducted several rounds of testing on-campus and the results were overwhelmingly positive. The site map and UI evolved with each round of testing and feedback from Hunter.

Woman using a laptop with a man sitting beside her, looking at the screen.Woman using a laptop with a man sitting beside her, looking at the screen, with another woman standing behind them.Woman wearing a backpack using a laptop with a man sitting beside her, looking at the screen.Man gesturing towards a laptop, with another man sitting beside him and papers on the desk.

Content Design

I worked closely with Hunter’s staff to update their content for the new IA. In the process, I taught them how to design content for the web. I edited several sections of the site as examples and gave them feedback on their drafts.

Considering the state of their existing site, this was quite an undertaking. Hunter was still editing their content when I left VGD.

Content Navigation

I reorganized their content into four distinct categories.

final design of students page

Redesigned Nav Bar

Hunter’s global nav was redesigned in anticipation of a full site overhaul.

Dynamic Navigation

Shows siblings and children of the current page or topic and collapses parents.

final design of majors and minors page

Topic List Components

Complex topics can be broken into digestible pages or linear steps.