Noma UX/UI Design Case Study | Workforce App by UX Agent

Rethinking Noma

Growing Noma

Before the build, we created research‑backed wireframes. There was no live site yet. The idea was strong. The wireframes set a clear MVP and cut steps so real users could succeed once we moved into design and development.

Noma set out to build a “Uber for workforce” platform – a cutting-edge digital solution to seamlessly connect job seekers with employers in real time. This ambitious project required designing a complex web application from scratch, with no exact precedent in the market. Our goal was to create an intuitive, user-centered experience that empowers both HR managers and gig workers, eliminating the friction and delays common in traditional staffing.

Visit Website

The Challenge

Noma had to help two groups — managers who post jobs and workers who need them. Managers wanted data they could use right away. Workers wanted fast access on their phones. The website had to be clean, quick, and simple to use for both sides.

Learn More

Designed one simple path so both groups could reach their goals fast
Removed clutter and showed only one clear action per page
Used plain words and short messages to explain what each page does
Built for phones first with big buttons and fast loading
Made sure first-time users can start without training
Added trust details like secure forms and privacy messages
Made it accessible with clear contrast, focus outlines, and keyboard support

The Approach

We started by researching the market, talking to potential users, and creating two main personas. Then we mapped simple user journeys, built wireframes, and turned them into full designs. The site was built on WordPress with a custom front-end, tracked in GA4, and improved each week based on what users actually did.

Learn More

Looked at other job sites to see what worked and what didn’t
Made simple paths: 3 steps to post a job, 2 taps to accept one on mobile
Tested the first version with users, watched where they got stuck, and fixed unclear text
Started every page with a short headline and one clear button
Kept main actions visible without scrolling
Cut forms down to only the fields people really needed
Made the site faster by shrinking images and loading scripts later
Tracked key events like sign-ups, job posts, and job acceptances
Moved buttons, rewrote labels, and added filters based on feedback

Who We Targeted

We validated choices with quick tests and live behavior. Then we shipped the changes that moved the number.

Persona 1

Operations Olivia

Retail manager

Olivia manages a busy retail store and often faces last-minute staffing gaps. She needs to fill shifts in under an hour and relies on clear, simple tools that show available workers instantly. Her main focus is reliability, labor cost, and keeping her store running smoothly.

Persona 2

Gig Worker Gary

Negotiable

Gary is a gig worker who checks his phone throughout the day looking for nearby jobs. He wants fast sign-ups, clear pay rates, and the option to filter by distance and start time. He values convenience, quick feedback, and fair communication from employers.

Methods

Ran short usability tests with clickable prototypes
Checked color contrast, font size, and tap targets for accessibility
Used Google Analytics to track each step in the sign-up and job posting process
Used Hotjar to see where people clicked and where they stopped scrolling

Changes

Added two clear buttons on the homepage
Added a sticky confirm button on mobile so it’s always visible
Shortened the sign-up form and added a short privacy message for trust
Updated job cards to show pay and distance first

Interactive Data Views

The development process progressed methodically from concept to finished platform:

Creation

Wireframes: Establishing the Foundation

We translated research into information architecture and task flows. The goal was simple. Make it obvious what to do next on every page.

Key elements set in wireframes:

Clear hierarchy with one primary CTA per screen
Simplified navigation to reduce cognitive load, plain labels and fewer choices
Short paths for critical tasks, post a shift or find a job in 1 to 2 steps
Above‑the‑fold actions so people do not hunt for the next step
Consistent patterns and page layouts to build predictability
Accessibility planned early, readable sizes, contrast, logical focus order
Mobile‑first tap targets and sticky key actions for small screens
Helpful empty states and microcopy to guide first‑time users

Design & Development: From Concept to Reality

We turned wireframes into a cohesive, fast website. Detailed mockups set a professional visual language centered on Noma blue for actions, clean cards, and easy‑to‑read type. We built on WordPress with Elementor and custom HTML, CSS, JS, refined interaction states, and tuned performance for mobile.

Key design considerations:

Strategic color to guide attention, Noma blue for interactive elements
Typography for readability across devices and sizes
Cards and grouping for clear visual organization
Targeted content sections to match audience intent
Consistent UI states, hover, focus, error, success, to build trust
Sticky actions and clear CTAs, especially on mobile
Responsive behavior verified on phones, tablets, and desktop
Performance, compressed assets, lazy loading, fast LCP

We also introduced Your Pathway to Success, a friendly three‑step onboarding that shows new users how to get value fast.

Concept to Creation

Advanced Web Design Techniques

The redesigned Noma site quickly gained traction, climbing from zero to more than 1,000 monthly visitors and generating over 100 leads in its first quarter. Managers can now post jobs in three quick steps, and workers can sign up and accept shifts just as easily on mobile. Regular analysis in GA4 and Hotjar guides ongoing tweaks that steadily improve usability and conversion, ensuring the site keeps performing better over time.

Transform Your Digital Impact

Ready to transform your organization’s digital presence into a powerful tool for change? Our people-driven UX approach delivers results that make a difference.