Independent concept · Interaction prototype

SEEK RedesignKeep the context.
Compare the possibilities.

An exploration of job results that lets people inspect a role and compare selected options within the same search experience.

Explore the interaction demo
My role
Interaction design, Figma exploration & AI-assisted front-end
Platform
Responsive job-search prototype
Built with
Figma, HTML, CSS & JavaScript
Status
Independent study · Not affiliated with SEEK

01 / The opportunity

Less switching. More context to work with.

The version I studied separated search results and job details. I explored an alternative: keep the key facts in view, reveal more detail on request, then bring selected roles together for comparison.

Working results view · Captured 21 September 2026; example listings are demonstration content.
01

Scan

Recognise title, employer and location quickly.

02

Inspect

Read one role without losing the search context.

03

Compare

Line up the facts that help distinguish options.

02 / Design decisions

Three decisions within the working layout.

The results screen keeps familiar search controls above compact job summaries. Each card offers separate routes to inspect its details or select it for comparison. The diagram highlights those decisions within the same observed screen.

Design decision review · Based on the working results screen; a retrospective explanation.
  1. Keep the search context. What, Where, filters and sorting remain visible above the cards.
  2. Group the core facts. Title, employer, location and classification share one compact summary.
  3. Separate the actions. View details opens one role; Compare selects roles for a shared fact view.

03 / Low to high fidelity

The same screens. Structure and finish.

Each wireframe follows the proportions, labels and controls of the real capture beside it. The first pair shows the results layout. The second shows the comparison dialog over that search context.

Results: scan the core facts

Low fidelity · Reconstruction of this screen’s layout and controls.
High fidelity · Untouched capture of the same screen.

Comparison: align selected roles

Low fidelity · Reconstruction of this screen’s layout and controls.
High fidelity · Untouched capture of the same screen.

Retrospective reconstruction · Created from these interface captures after the prototype was built.

04 / The results view

Keep the familiar parts familiar.

What / Where search and filter controls retain their recognisable roles. Job cards show the title, employer, location and classification before asking people to open the full description.

High-fidelity presentation · Actual prototype screens in the approved studio artwork.

The interaction decision: give View details and Compare separate controls because reading one role and comparing several are different actions.

05 / The interaction flow

Scan. Inspect. Compare.

The expanded card brings one job forward while the results remain behind it. Comparison opens a separate view of selected roles, with matching fact labels and a clear close control.

Scan · Compact cards keep the core job facts together.
Inspect · One role expands while the surrounding results remain in context.
Compare · Selected roles appear together with aligned fact labels.

Scan · Compact cards keep the core job facts together.

Interactive screen walkthrough · Captured states from the working concept. Select a step or press Play.

Explore the working concept.

Open details and compare the example roles.

Open the independent concept in a separate tab ↗

06 / Comparing roles

Give the differences a shared structure.

Location, work type, classification, salary information and posting age use a consistent row order. Each selected role can be removed, and the close control returns to the search surface.

Actual comparison state · Demonstration listings; missing salary information stays explicit.

The trade-off: expanding a card and dimming its neighbours changes scanability. Comparison adds another mode to learn. Both choices need task-based testing.

07 / The mobile view

A single column, with the same priorities.

The smaller layout stacks the search inputs and job information vertically. The job summary keeps its own details and comparison controls, while the interface uses the available width for reading.

Actual mobile capture · Search and a selected job summary.

Touch needs its own review.

A responsive layout is the starting point. A focused mobile pass should check the filter strip, expanded content, comparison view and keyboard order.

08 / Prototype outcome

A testable interaction, with open questions.

The working prototype demonstrates three connected states and a responsive direction. It lets reviewers inspect the interaction decisions rather than infer them from a static presentation.

3

Core states

Results, expanded details and comparison.

2

Distinct actions

Inspect a role or select it for comparison.

1

Shared context

The search remains the starting point.

These describe prototype behaviour. Faster decisions, lower cognitive load and improved task success have not been established.

What evidence supports this study?

The prototype and captured interface states are available to inspect. Original survey responses and task records are not available here, so this study does not report participant counts, percentages, quotes or a SUS score. The concept is independent and is not affiliated with SEEK.

09 / Next phase

Test the choice, then refine the interface.

The next phase would compare the original and proposed approaches with the same job-selection task. The goal is to learn where people hesitate and which information they use to choose.

Proposed validation plan · Newly illustrated; research and outcomes are not yet completed.
  1. 01

    Compare like-for-like tasks

    Use the same job criteria in each flow so the task remains comparable.

  2. 02

    Observe the decision

    Record completion, errors and hesitation; ask people to explain which facts shaped their choice.

  3. 03

    Refine access and density

    Review keyboard focus, mobile comparison and the visibility of surrounding results before a larger trial.

A stronger interface is a hypothesis.
The next step is evidence.

← Back to selected workNext projectAI Portfolio System ↗