UCSC

PROBLEM

The current design poses as a barrier between undergraduate researchers and the crucial information they need to succeed

Research experience is an important aspect of the college journey. Whether a student is seeking research opportunities for a graduation requirement or simply out of curiosity, getting started is a challenging process in itself. A website aiming to break down these steps for students who are new to the research field should simplify the necessary information from beginning to end. By the end of the Undergraduate Research website experience, students should have a better idea on whether research is fit for them or perhaps even snatching an opportunity.

DIVING INTO USER FRUSTRATIONS

Surveying our users

Due to this project being conducted within the confines of our university course’s timeline, our survey pool was severely limited to our fellow classmates and friends and family. However, based on the restrictions we faced, we interviewed 8 undergraduate students who were interested in research opportunities but have never utilized the Undergraduate Research website before. Here’s what we found:

62.5%

Found the long bulks of paragraphs and lack of visual hierarchy to be quite overwhelming and discouraging

50%

Struggled to find the correct page to click on due to broad menu titles and excessive drop-down menus

87.5%

Got lost in the “rabbit hole” of cycling sub-links rather than reaching a finish line for the information they need

What users are saying

“I wish there was a tab with a searchable/filterable list of faculty/researchers and grant opportunities.”

“The main page format was one long paragraph, it didn’t help that the headers and sub-headers were also misleading.”

“Meeting with an advisor was actually way more useful and efficient than having to navigate through the website.”

“It would help a lot to have a mentor tab where faculty members can post their research opportunities and recruit prospective students, kind of like a job board.”

“I wish there was a tab with a searchable/filterable list of faculty/researchers and grant opportunities.”

“The main page format was one long paragraph, it didn’t help that the headers and sub-headers were also misleading.”

“Meeting with an advisor was actually way more useful and efficient than having to navigate through the website.”

“It would help a lot to have a mentor tab where faculty members can post their research opportunities and recruit prospective students, kind of like a job board.”

DEtermining top use cases

As a prospective undergraduate student researcher, I want to be able to...

Browse information about different programs to determine if research is right for me

Search for upcoming events for prospective undergraduate students like myself so I can find a community of like-minded individuals

Have access to a concrete set of research opportunities open to students with little to no research experiences

As an experienced undergraduate student researcher, I want to be able to...

Find available opportunities for experienced student researcher to further my research abilities

See details for social events with other researchers in order to network with more students and faculty

BUILDING ON FINDINGS

Narrowing down the target user base & reimagining the user flow

With a better understanding of current users' pain points and expectations, we were able to create user personas which encapsulates our user research findings. Additionally, since the current website design seems a bit cluttered, we created a user flow diagram with the goal of re-organizing and re-prioritizing the top use cases.

MAGNIFYING THE TARGET USER BASE

A MORE SIMPLIFIED YET INTENTIONAL FLOW

The User Flow Diagram

We categorized our redesigned website to cater the main two types of visitors: the experienced undergraduate researcher and the research newbie. Experienced researchers have the option of visiting sub-categories pertaining to upcoming opportunities and contact lists while new researchers are given a step-by-step guide to making the research process seem less daunting.

BRAINSTORMING & Iterations

How might we make a more streamlined research onboarding and opportunity-finding experience for undergraduates?

Building on our simplified user flow diagram, I went on to the drawing board to create a few low-fidelity wireframes before we conducted an 8-participant usability test on the paper prototype. As the current design stands, the goal of our brainstorming and iterative process aims to eliminate the hurdles posed by the navigation system of UCSC's website.

01 BRAINSTORMING

Low-fidelity Wireframe Sketches

These low-fidelity wireframes served as a visualization of our updated user flow and was later utilized as our paper prototype for usability testing.

02 iterating

Conducting a usability test

Our usability testing involved 8 undergraduate participants ranging from ages 18-22. Findings gathered from the usability test was organized into pros and cons. These were the core tasks our usability test sought to gain more insight on:

Find a research lab position for a new Environmental Science research assistant and locate the application deadline and requirements.

Find information introducing you to research and then transition to a page for students with some experience.

Find up-to-date information on upcoming research events (speakers, panels, social events) and RSVP to a professional panel.

PROS

Users found that the reduction in large chunks of text made the UI much cleaner and easily navigable.

Participants were able to complete Task 1 with less than five clicks within less than five minutes.

Elimination of excessive drop-down menus made it easy to prioritize the main tasks at hand and streamline the process of finding undergraduate research opportunities.

CONS

Participants found having the physical wireframe of the “Getting Started” page would have been more helpful for Task 2 and seeing the guiding, in-depth steps a beginner researcher could utilize in getting started with research.

Some of the buttons and elements were a bit confusing as to which one was clickable and which were static.

PROS

Users found that the reduction in large chunks of text made the UI much cleaner and easily navigable.

Participants were able to complete Task 1 with less than five clicks within less than five minutes.

Elimination of excessive drop-down menus made it easy to prioritize the main tasks at hand and streamline the process of finding undergraduate research opportunities.

CONS

Some of the buttons and elements were a bit confusing as to which one was clickable and which were static.

BRANDING

Maintaining UCSC's brand identity

For the redesign, we stuck with the same color scheme of the current website's design in order to maintain consistency with UCSC's brand identity. For typeface, however, three different fonts were curated to further emphasize the subtle, yet crucial differences in the visual hierarchy.

SOLUTION

A more simplified & effective research website for new and returning students alike

After testing our physical paper prototype and gathering feedback from our usability study, we were able to arrive at a design solution which reduces cognitive overload and improve on information accessibility and discoverability.

Landing Page

BEFORE

AFTER

Getting Started

BEFORE

AFTER

Opportunities Database

BEFORE

AFTER

Additional Changes

FACULTY DATABASE

EVENT CALENDAR

Solution

Live Prototype

CONCLUSION

Reflections & Improvements

This project was my first introduction to product design, especially on the aspects of user research, iterative design, and user-centered design. The limited time frame of this project brought many challenges while also providing me with some very valuable lessons.

reflection

The Partings of a Designer

Letting go of Perfectionism

Strict time constraint meant there was absolutely no room to be a perfectionist. After initially grappling with this realization, I had to quickly shift my priorities toward idea exploration as opposed to a long-term commitment to one design. I had to tell myself that, "it's okay that your paper wireframes and lo-fi sketches look like chicken scratch because most of them will end up in the bin anyways," because in the end, failures are the foundation of every success — especially in design.

Letting go of Pre-Existing Biases

Being a designer means having biases towards the visually appealing and hyper-focus on features that support it. However, having never participated in undergraduate research myself meant that I may be blind to the frustrations and expectations of those who have. To truly understand the various perspective of other users and implementing their insights towards a better design meant approaching the given problem as a novice and parting with prior assumptions.

Improvements

Three Ways to Improve

Due to the limited scope of this project, it was only feasible for us to undergo one iteration of our low-fidelity design. Having more time to do second, third, etc. iterations would significantly improve the effectiveness of our final design.

There were many additional features that we gathered from our user group that we were unable to implement due to time. A huge improvement would be to fully implement the prioritized features, additional features, as well as interactions.

Our project's sample size was limited to the number of students attending the course. Ideally, I would like to expand our user group to include more transfer students, well-seasoned student researchers, as well as faculty members.