← All work

Improving the visual hierarchy to help job seekers find their match

Nine out of ten visits to Otta landed on the job card. It’s where candidates decided, one job at a time, whether to skip, save or apply, and its design hadn’t changed since the company’s early days. In our weekly interviews, candidates kept struggling to find the basics: salary, location, seniority. I redesigned the card to put those first, and apply clicks rose by 15%.

Company
Otta
Year
2022
Role
Senior Product Designer - covering end-to-end UX, UI, research and copy
Team
Product Manager, 2x Full-Stack Engineers
  • +0%

    apply clicks

  • +0%

    save clicks

  • 0%+

    of Otta's traffic goes through the job card

Final design

The redesigned Otta job card

The problem

Our squad followed a continuous discovery approach to research, running 5-6 candidate interviews each week. This revealed that:

  • Candidates struggled to quickly locate essential job information like salary, location, tech stack, or seniority
  • Floating action buttons (FABs) were poorly designed: labels disappeared on scroll and they overlapped with content
  • Years of small UI tweaks had led to inconsistencies in typography, icon use, and alignment

Goals and constraints

We aligned the project around two key outcomes: increase apply clicks and increase save clicks.

Other potential metrics (e.g. time spent on a card, jobs viewed) were intentionally deprioritised because they didn’t necessarily correlate with positive candidate behaviour. Our constraints included:

  • Preserving the one-job-at-a-time philosophy
  • Designing for mobile-first (80%+ traffic)

Process

Generative research

We followed a continuous discovery process at Otta, meaning the Product Manager and I were responsible for speaking with 5-6 candidates each week to identify the pain points and opportunity areas faced by our users. We documented this research in Dovetail, and it was this research which highlighted the opportunity area to improve our job cards which determined the focus area for our squad.

Unmoderated card sort

After identifying the job card as a priority area, we started by understanding what information candidates actually cared about. I led an unmoderated card sort asking candidates to rank job card sections from most to least useful. We used the output to map content into "Must have", "Should have", and "Nice to have" tiers. This became the starting point for my design exploration.

Card sort results ranking job card sections by usefulness

Testing as we designed

In parallel, I reviewed adjacent platforms like Airbnb, Rightmove, and Cazoo to study how they structured decision-making content. While the visual style didn’t translate directly, their codification of key info via tags and icons sparked useful inspiration.

We rapidly prototyped several versions of the card and tested them through moderated sessions with engaged Otta users.

Why moderated? We wanted to tailor cards to each participant to avoid skewed feedback (e.g. if salary was too low, they might dismiss the whole card). Testing with real users from our platform allowed us to move quickly. Otta candidates were highly engaged, and recruiting participants was fast, low-cost, and low-friction.

Through multiple rounds, we refined the design based on:

  • What candidates noticed first
  • Whether they felt equipped to decide quickly (skip, save, or apply)
  • What visual hierarchy worked best

Here are some of the designs we explored and took into various rounds of testing:

Job card designs explored and taken into testing

Testing the navigation separately

We identified two key streams of work within the job card redesign:

  • Changes to the layout and content of the card itself
  • Changes to the navigation and interaction patterns

To move quickly without compromising on quality, we brought engineers into the process early. They suggested running a quick experiment on the navigation changes while we continued refining the card design.

The solution

The final card redesign:

  • Elevated key details like salary, location and seniority
  • Highlighted requirements that matched a candidate's preferences for quick glanceability
  • Removed FABs and replaced them with a bottom navigation bar
  • Introduced clearer icons and typographic hierarchy
  • Addressed visual quirks and aligned layout consistency
  • Focused mobile-first, with particular attention to touch targets and layout spacing
The redesigned Otta job card