Back

MĀNOA CAREER CENTER

Helping UH Students Find Jobs That Fit

Project Overview

Redesigning the student side of SECE, the University of Hawaiʻi’s job platform, so students can quickly tell which campus jobs fit their schedule, eligibility, and goals.

Project Type

Internship

Contributions

UX Research

UI & Visual Design

Design System

Interaction Design

Timeline

5 months

Tools

Figma

Illustrator

Team

Kyle Hannigan, Developer

Jenny Chow, Project Manahger

Skip to solution

View employer flow

DISCOVERY

Students Needed Jobs That Fit Their Schedule, Eligibility, and Goals.

To understand how students actually use SECE, I conducted moderated interviews with 9 UH students — including freshmen, seniors, working students, international students, student staffs and recent graduates — to learn how they search for campus jobs and what gets in their way.


I found that students were not just looking for any job. They were looking for jobs that fit their class schedules, financial needs, transportation constraints, experience level, and long-term goals.


To synthesize the interviews, I organized participant quotes through affinity mapping. Each participant was assigned a different sticky note color, which helped me see which patterns appeared across multiple students.

Using AI

I first synthesized the interview data manually, then used AI to compare themes and check for gaps. The overlap between both syntheses helped validate my findings, while my manual process gave me a deeper understanding of the student pain points.

Key Findings

Information Overload

Information Overload

Students found the job list crowded and hard to scan. Dense descriptions made it difficult to quickly identify relevant jobs.

Students found the job list crowded and hard to scan. Dense descriptions made it difficult to quickly identify relevant jobs.

Illustrations on empty state

Looks like an old data base.

I got too tired to check and gave up.

Illustrations on empty state

Looks like an old data base.

I got too tired to check and gave up.

Illustrations on empty state

Looks like an old data base.

I got too tired to check and gave up.

Difficulty Narrowing Down Jobs

Difficulty Narrowing Down Jobs

Students wanted clearer eligibility cues for class standing, job type, and requirements. Without this information upfront, they had to open listings or guess whether they qualified.

Students wanted clearer eligibility cues for class standing, job type, and requirements. Without this information upfront, they had to open listings or guess whether they qualified.

I wish I could narrow jobs by department and class standing.

I read through all this job description just to find out at the end that I am not qualified.

Inconsistent Job Details

Inconsistent Job Details

While many listings were understandable, many students stated that some lacked clear upfront details about responsibilities, requirements, or expectations.

While many listings were understandable, many students stated that some lacked clear upfront details about responsibilities, requirements, or expectations.

Sometimes you need to contact the

department for more info.

Would be nice to see comments & reviews

from other students to see what the job is really like.

Sometimes you need to contact the

department for more info.

Would be nice to see comments & reviews

from other students to see what the job is really like.

HOW MIGHT WE…

Help students quickly identify campus jobs that fit their schedule, goals, and eligibility?

I identified three design goals to guide the redesign:

COMPETITIVE ANALYSIS

How established job platforms make large lists scannable.

To understand common interaction and layout patterns in job search, I reviewed Indeed, ZipRecruiter, and Handshake. I focused on how each makes large sets of listings easier to scan and evaluate: split-view layouts, top-level filters, condensed job cards, highlighted tags, and structured job-detail panels.

Pill shaped filters are common as they’re easy to scan and adjust.

Cards are mainly designed the same with crucial information (Position, Pay, Location) listed and tags.

Cards make jobs scannable

Search & Location are grouped

View jobs even without logging in

Bookmark icon for saving jobs

Split modal let’s you compare jobs

Tabs

Closed jobs are color coded

Tags help to identify matching skillset.

Days since posting are displayed

Easily remove jobs

PROCESS

Going straight to high fidelity, then iterating fast.

Given the internship timeline, I moved directly into high-fidelity design and used rapid iteration to explore solutions quickly.

FIRST ITERATION LEARNINGS

The structure worked. The system did not.

The first high-fidelity version organized the job search experience, but it lacked a consistent UI system. I rebuilt it with standardized components for job cards, filters, tags, buttons, form fields, and tables. This gave the student flow a stronger foundation and made the experience more cohesive across SECE.


I also tested an early filter modal that showed every filter at once. It gave students more control, but the layout felt cluttered and forced them to scroll through options they did not always need.

With the lack of an established design system, my first iteration for the job search lacked consistency and failed to meet WGAA requirements.


I also tried implementing a modal that opens with all the filters when you click on the filter button. However, after showing it to some students, a lot suggested it felt a cluttered especially when you need to scroll down to reach other filters like eligibility or department.

First Iteration

Second Iterations

View Component Library

USABILITY TEST

Did the Redesign Solve the Problem?

After refining the prototype, I tested it with 7 students to see whether it helped them find relevant jobs, narrow their options, understand eligibility, and feel confident deciding whether to apply. I recorded responses in a spreadsheet to compare patterns across tasks.


No issue prevented participants from completing a task, but a few areas caused hesitation. Two participants wanted to know how recommendations were selected, two were unfamiliar with the “FWS” label, and one wanted clearer distinctions between salaried and hourly positions. One participant also worried that incomplete job data could cause filters to exclude relevant opportunities. This feedback informed the final refinements.

With the lack of an established design system, my first iteration for the job search lacked consistency and failed to meet WGAA requirements.


I also tried implementing a modal that opens with all the filters when you click on the filter button. However, after showing it to some students, a lot suggested it felt a cluttered especially when you need to scroll down to reach other filters like eligibility or department.

All 7 participants felt jobs were more targeted or useful, had enough information to decide whether to apply, and found eligibility information clear.

FINAL REFINEMENTS

Small clarity fixes, not structural changes.

Testing showed the core search flow was working, so the final iteration focused on clarity.

With the lack of an established design system, my first iteration for the job search lacked consistency and failed to meet WGAA requirements.


I also tried implementing a modal that opens with all the filters when you click on the filter button. However, after showing it to some students, a lot suggested it felt a cluttered especially when you need to scroll down to reach other filters like eligibility or department.

Made Recommended Jobs More Transparent

Students found recommended jobs useful, but some wanted to know how they were chosen.

I added a short explanation beside the Recommended Jobs heading.

1

2

Clarified Federal Work-Study & Pay

Some students were unsure what “FWS” meant, and the original pay filter only showed hourly ranges. I spelled out Federal Work-Study and added salary options so students searching across on- and off-campus jobs could filter by different compensation types.

Reordered filters around student decision-making

I moved the most broadly useful criteria first. Experience Level leads, because students of every class standing arrive with different work histories. Category and Pay come next so students can narrow by interest and practical need. More specific eligibility filters like Class Standing come later.

3

Final Designs

Final Designs (Before & After)

Search Page

Show before

Show before

Cards surface pay, program, job type, eligibility, and experience upfront. Filter chips help students narrow results by key criteria before opening a listing.

Saved Jobs

Saved jobs had limited organization and could not be manually removed.

Saved and Applied tabs clarify job status, while unsave and undo actions give students more control.

Placements

Placements

Placements lacked visual hierarchy, making active and closed placements hard to distinguish.

A clean table with tabs separates placements by status.

Documents

Documents

Documents and forms were mixed together in dense, unstyled tables with no status indicators.

Documents and official files are separated into sections, with tabs and status tags to improve clarity.

Outcome

Outcome

The student-facing redesign is currently in development as part of the broader Career Hub redesign. I handed off the final screens, reusable component library, and design annotations to support implementation. Although the launch date has not been confirmed, the redesign received positive feedback.

Reflection

Reflection

If I had more time & what I would do differently:

  • Align with the developer earlier: Knowing which UI framework the developer was most comfortable with from the start would have saved significant time.

  • Start with a UI library: Building from an established component library from day one — with proper documentation and ideally published in Storybook — would have produced a more consistent result and a smoother handoff.

  • Documenting everything from the start would’ve made writing this case study easier

  • Explore major as a filter: I would explore using major as a filter or recommendation signal to help students discover relevant roles.

  • Validate with a more diverse student group

  • I would test the redesign with a broader range of students to ensure it works across different needs.

Work

Fun