Turning a complex recruitment web app into a focused mobile workflow.
Mobile UX/UI
UX/UI
The web app’s complexity could not come with it.
The brief was to turn Harbour’s existing recruitment web app into a mobile experience that clients could use seamlessly. The web app was clunky and overloaded: shrinking it would carry the same complexity onto a smaller screen. My task was to decide what deserved attention first, and what could wait until a client needed it.
The design challenge
Reduce the decisions needed to get started, while retaining the detail needed to make a good recruitment decision.
How could clients find the next task, understand the candidate and act without navigating the whole product?
01 / Prioritise the task. Outstanding actions have their own list, keeping work that needs attention separate from the broader dashboard.
02 / Keep context close. Each task includes the candidate and role, helping clients understand what they are acting on before opening a profile.
03 / Make action explicit. A consistent Complete action gives every row a clear next step, alongside status and appointment details.
Recreated wireframes compare the information structures. They show the reasoning behind the delivered design.
Feature-led overview
Reports & settings
Candidates & profiles
Interviews & activity
Dashboard & metrics
Chosen: tasks first
Outstanding actions
Review candidate
Then reveal the detail
Candidate profile
Action candidate
Product requirements
A feature-led overview preserves breadth, but makes clients choose a destination before they can begin. A task-led entry point gives them somewhere useful to start. Candidate detail remains available when it becomes relevant.
Requirements from the brief: find outstanding work, identify the candidate and role, inspect the relevant detail, then take a clear next action.
One connected recruitment journey.
This flow explains how the mobile experience connects orientation, prioritisation, candidate review and action. Each step answers one clear question.
Orient
01
What needs my attention?
Prioritise
02
Which task should I open?
Understand
03
Who is this candidate?
Act
04
What should I do next?
Retrospective UX flow reconstructed from the finished screens. It explains the intended journey rather than documenting an original workshop.
Clients need enough candidate information to act confidently, without losing their place in the workflow. I used a summary as the entry point, kept the full profile available, and gave Action Candidate a distinct primary position. Previous and Next let clients continue reviewing without returning to the list each time.
Define the mobile job
Start with what clients need to do
The core journey was to understand the workload, find an outstanding task and review the candidate behind it. That became the organising principle for mobile. The wider product still mattered, but it did not all need to appear at the start of that journey.
Separate the overview from the queue
Counts and upcoming interviews answer “what is happening?” Outstanding actions answer “what needs doing?” Giving them distinct roles prevents a dashboard from becoming a list of everything the product can do.
Make “streamlined” specific
The design needed to make four things clear: which work is outstanding, who it relates to, what context matters and what happens next. These requirements are reconstructed from the brief and delivered screens, so the case study can show how the solution answers the original problem.
Keep capability; change the sequence
Less information at the start should not mean less information overall. The task row gives enough context to choose; the candidate view provides the detail needed to act. Simplification comes from revealing information at the right moment.
From structure to screen
Choose the first decision
A menu of features asks clients to work out where the task belongs. A queue of outstanding actions starts with work they already recognise. I used the latter as the main route into the mobile workflow.
Give every screen a purpose
The overview establishes context. The queue prioritises work. The candidate screen supports a decision. Separating those jobs kept the flow connected without asking one screen to carry every detail.
Use the wireframe to expose the trade-off
The recreated low-fidelity comparison removes visual polish so the information hierarchy is easier to judge. The important change is where the journey starts: with a recognisable task rather than a collection of destinations.
Keep the language familiar
Candidates, vacancies and messages still need to feel like Harbour. Familiar labels preserve that continuity. The mobile design changes their emphasis and sequence, rather than introducing a different model for the same work.
Resolve the moments that matter
Make the queue predictable
Candidate identity, role, status and action follow a repeatable row pattern. Clients can scan for the relevant task without learning a different layout for each item.
Review without starting again
The candidate summary provides a quick entry point, with the full profile available when needed. Previous and Next support consecutive reviews. The primary action stays distinct from navigation, so moving between records does not compete with progressing a candidate.
What I would validate
Ask a client to find outstanding work, identify the candidate, inspect the relevant detail and explain the next action without prompting. Watch for hesitation and backtracking. Then check long names, missing information and empty states. This is a proposed evaluation plan, not a report of completed testing.
The outcome
The client was extremely happy with the finished experience and its adoption. The delivered design answers the brief through a clearer sequence: understand the workload, choose a task, review the candidate and act.
What changed for the client
What this project reinforced
Start with the task, not the navigation. A useful mobile entry point helps someone begin work before they need to understand the whole product.
Simplify the sequence, not the capability. Keep the full candidate record available, but reveal it when it supports a decision.
Separate orientation from action. Workload counts provide context; the task queue makes the next step explicit.
Design for the next review, too. Previous and Next preserve momentum when clients work through several candidates.
Client response and adoption
The client was extremely happy with the finished product and its adoption. That positive response supported the aim of making Harbour feel more streamlined and approachable on mobile.
Outcome based on client feedback following delivery.