SENIOR UI/UX ENGINEERMARKETPLACE · 1M+ USERS2020 — 2022

QKLY

A mobile-first redesign of an all-in-one job board, freelancer marketplace and staffing portal used by more than a million job seekers.

ROLE

Senior UI/UX Engineer

SCOPE

Research, UI design, component libraries, build

STACK

Angular, React, SCSS, D3.js, REST

RESULT

+30% engagement · +25% satisfaction

01 — THE BRIEF

A desktop-era platform being used on phones.

QKLY combined three products in one: a job board, a freelancer marketplace and a staffing portal. The interface had been designed for desktop, but the majority of job seekers were arriving on mobile — on connections and screen sizes the original layouts never anticipated.

The brief was a mobile-first redesign that did not fragment into three separate products.

One account model, three marketplaces, and a million people arriving mostly on a phone.

02 — RESEARCH

Interviews, personas, journeys — then usability testing against the redesign.

I ran user interviews and built personas and journey maps for the three distinct actors: the job seeker, the freelancer and the employer posting a role. Usability testing on the redesigned flows is what produced the measurable shift rather than the visual refresh on its own.

Engagement rose 30% and reported satisfaction 25% after the redesign shipped.

METHOD 01

User interviews

Separate rounds for job seekers, freelancers and employers — three actors whose goals conflict on the same screens.

METHOD 02

Personas and journey maps

Built per actor, then used to decide which of the three marketplaces each screen should default to.

METHOD 03

Moderated usability testing

Run against the redesigned flows before final UI — the source of the measured lift, not the visual refresh.

METHOD 04

Analytics review

Funnel drop-off by device confirmed what the interviews suggested: the desktop-era layouts were failing on phones.

03 — SYSTEM

Angular and React component libraries, one styling contract.

I built reusable component libraries in both Angular and React with SCSS as the shared styling layer — breakpoints, type scale and colour as variables rather than per-page decisions, so the three marketplaces stayed visually one product.

REST integration and state handling sat alongside the design work; I was writing the front-end I was designing.

COLOUR

One accent across three marketplaces

A single action colour and a neutral ramp, so job board, freelancer and staffing views read as one product rather than three acquisitions.

TYPOGRAPHY

A scale that survives long job titles

Type sizes and line-heights chosen against real listing data, not lorem — two-line titles are the norm, not the edge case.

LAYOUT

Mobile-first card, desktop-second

The listing card was designed at 375px and expanded, which is why the desktop grid has no orphaned metadata.

04 — DATA

Analytics dashboards in React and D3.js.

Employers and staffing partners needed to see application volume, funnel drop-off and time-to-hire. I designed and built those views in React with D3.js, using the same token set as the rest of the platform so charts read as part of the product rather than an embedded tool.

Outcome

A mobile-first platform serving 1M+ job seekers, with +30% engagement and +25% satisfaction after redesign, plus shared Angular and React component libraries and analytics dashboards.

My role

Senior UI/UX Engineer — research and UI design through to front-end delivery, and mentoring junior designers and UI engineers on the team.

Reflection

The measurable lift came from usability testing, not the visual redesign. It is the clearest example I have of why I insist on testing before final UI: the version that tested best was not the version that looked best in a review.

HIUP App →