Work

Fun

Back

Overview

Problem

Research

Process

Setback

Design System

Final Designs

Reflection

Mānoa Career Center

Modernizing Job Platform

for the University of Hawai'i's

Students

Project Overview

Student Employment and Career Exploration (SECE) is the University of Hawai'i's job platform connecting students across all ten UH campuses with on- and off-campus employers. During the summer, I redesigned the student-facing experience as part of the broader Career Hub redesign. The redesign is currently in development.

Project Type

Internship

Contributions

UX Research

UI & Visual Design

Design System

Interaction Design

Timeline

5 months

Tools

Figma

Illustrator

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.

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:

Reduce information overload
Make the job search experience easier to scan by simplifying dense listings and highlighting key details earlier.

Make eligibility clear upfront
Help students quickly understand whether they qualify before opening a listing or starting an application.

Improve job discovery and filtering
Give students better ways to narrow jobs by department, pay, job type, and other student-specific needs.

COMPETITIVE ANALYSIS

Studying Job Search Design Patterns

To better understand common interaction and layout patterns in job search experiences, I reviewed established platforms such as Indeed, ZipRecruiter, and Handshake.


I focused on how these platforms make large sets of listings easier to scan and evaluate, paying attention to patterns such as 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

Planning My Approach

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

FIRST ITERATION LEARNINGS

My Design Needed More Consistency

The first high-fidelity version helped organize the job search experience, but it still lacked a consistent UI system.

I rebuilt the redesign with standardized components for job cards, filters, tags, buttons, form fields, and tables. This created a stronger foundation for the student flow and made the experience feel more cohesive across SECE.


I also tested an early filter modal that showed every filter at once. While it gave students more control, the layout felt cluttered and forced users 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 the redesign with 7 students to see whether it helped them find relevant jobs, narrow their options, understand eligibility, and feel more confident deciding whether to apply.


I organized participant responses in a spreadsheet to compare patterns across tasks.

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.

DESIGN CHANGES

Final Refinements

Usability testing showed that the core job search flow was working, so my final iteration focused on small clarity improvements rather than major structural changes.

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 to clarify why certain jobs appeared.

1

2

Clarified Federal Work-Study & Pay

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

Final Designs

Final Designs (Before & After)

Search Page

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 lacked visual hierarchy, making active and closed placements hard to distinguish.

A clean table with tabs separates placements by status.

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.

Reflection

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

  • 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...

Work

Fun

Work

Fun

© 2026 Aveline Wang

Made with love and black coffee 🖤