Website

Salary Hero Website

At Salary Hero, we build for everyday Thai workers who just want simple, stress-free access to their money. Inconsistent UI wasn't just messy, it was a trust problem. This is how we fixed it.

Overview

My Role

Led competitor research identify patterns and gaps in how EWA products communicate value.
Ran a stakeholder workshop to align the team on goals, target audience, and what a successful redesign would look like.
Defined the UX structure and content hierarchy, mapping the full visitor journey from landing to conversion with SEO baked in from the start.
Designed the full site in Figma, covering layout, visual hierarchy, interaction design, and prototyping for stakeholder review.
Led developer handoff, providing detailed specs and staying involved through implementation to make sure the final build matched the design intent.

Led competitor research identify patterns and gaps in how EWA products communicate value.
Ran a stakeholder workshop to align the team on goals, target audience, and what a successful redesign would look like.
Defined the UX structure and content hierarchy, mapping the full visitor journey from landing to conversion with SEO baked in from the start.
Designed the full site in Figma, covering layout, visual hierarchy, interaction design, and prototyping for stakeholder review.
Led developer handoff, providing detailed specs and staying involved through implementation to make sure the final build matched the design intent.

Timeline

August - December 2025

Team

Asama P.
Rawisara L.

Asama P.
Rawisara L.

UX/UI Lead
UI Associate (Me)

Tools

Figma, Wordpress

Before & After

Before

There was too little information for a visitor to make a decision, no interaction to hold their attention, and a UI that felt unfinished. Clients landed on it and left with nothing. For a product asking businesses to trust it with their payroll, that was a real problem.

There was too little information for a visitor to make a decision, no interaction to hold their attention, and a UI that felt unfinished. Clients landed on it and left with nothing. For a product asking businesses to trust it with their payroll, that was a real problem.

After

The redesign gave the site something to say. More content, real interaction, and a UI that actually felt like a modern fintech product. We added animations to bring the page to life, restructured everything for SEO, and set up Google Analytics tracking so the team could finally see how visitors were behaving and where they were dropping off.

The redesign gave the site something to say. More content, real interaction, and a UI that actually felt like a modern fintech product. We added animations to bring the page to life, restructured everything for SEO, and set up Google Analytics tracking so the team could finally see how visitors were behaving and where they were dropping off.

Impact

When design is consistent, everyone benefits. Developers ship faster with reusable components, product and QA move with better alignment, and the business benefits from a consistent product. Most importantly, end users get an experience that feels coherent and predictable, making Salary Hero easier to navigate and trust.

When design is consistent, everyone benefits. Developers ship faster with reusable components, product and QA move with better alignment, and the business benefits from a consistent product. Most importantly, end users get an experience that feels coherent and predictable, making Salary Hero easier to navigate and trust.

Business

Developers 😎

💼

More inbound leads from organic and paid traffic
Stronger brand perception for enterprise sales
Reduced cost per acquisition over time
A site that scales as the product grows

Sales Team

Product 👩‍💼

👩‍💼

A site they can confidently send to prospects
Clearer product story reduces time spent explaining
Trust signals and stats that do the work upfront

Visitors & Clients

QA Teams 🕵️‍♂️

👤

Understand the product quickly and clearly
Trust signals that make the decision easier
A site that feels as reliable as the product itself

Understand the product quickly and clearly
Trust signals that make the decision easier
A site that feels as reliable as the product itself

Design Process

Why we built

Salary Hero had grown — new products, new markets, a bigger team. But the website still looked like a very early startup. It wasn't a design problem. It was a business problem.

What triggered it

Not converting

Consistency  and Governance 🕴️

🧐

Visitors were landing on the site but not taking action. The sales team had no reliable page to send prospects to.

The product had
outgrown the site

Faster
Onboarding 🧑‍💻️

Faster Onboarding 🧑‍💻️

📈

Salary Hero was expanding into new markets and preparing for a product launch. The website needed to reflect that growth, not contradict it.

Feedback from
the sales team

Improved Collaboration 👬👬

🧑‍💼

The team heard directly from clients that the site didn't build confidence. When you're asking businesses to trust you with their payroll, first impressions matter.

Goals going in

Increase leads and demo requests

Easier Maintenance  
& Updates 🚧

📈

Give every visitor a clear path to take action, whether they're a business owner or an HR manager.

Improve SEO ranking

Efficiency in Design
& Development 📱

🥇

Build a proper content structure so the site could actually be found by people searching for earned wage access solutions.

Look credible to enterprise clients

Easier Maintenance  
& Updates 🚧

👍

Enterprise buyers do their homework. The site needed to signal trust before a single conversation happened.

Explain the product clearly

Efficiency in Design
& Development 📱

✅

Most visitors didn't fully understand what Salary Hero did within the first few seconds. That needed to change.

Planing

The project ran from August to November. We spent the first month on research and exploration. October moved into high-fidelity design, and November was all about handoff

Our first workshop

The project ran from August to November. We spent the first month on research and exploration — auditing the site, running a stakeholder workshop, studying competitors, and mapping out the sitemap and wireframes. October moved into high-fidelity design, dev interviews, and building the interactive prototype. November was all about handoff, QA across devices, and getting the site live.

The project ran from August to November. We spent the first month on research and exploration — auditing the site, running a stakeholder workshop, studying competitors, and mapping out the sitemap and wireframes. October moved into high-fidelity design, dev interviews, and building the interactive prototype. November was all about handoff, QA across devices, and getting the site live.

Exploration

We started by looking at the three biggest names in earned wage access — PayActiv, Rain, and ZayZoon. Each had a distinct visual identity and a clear way of talking to their audience. We screenshotted and compared them side by side with the Salary Hero site to understand the gap — what they were doing well, what we could learn, and what direction the Salary Hero brand should move toward.

We started by looking at the three biggest names in earned wage access — PayActiv, Rain, and ZayZoon. Each had a distinct visual identity and a clear way of talking to their audience. We screenshotted and compared them side by side with the Salary Hero site to understand the gap — what they were doing well, what we could learn, and what direction the Salary Hero brand should move toward.

Payactiv

PayActiv leans corporate and trustworthy — fresh blue palette, real photography of everyday workers, and a clean layout that feels safe and established. It's clearly targeting enterprise HR teams and large employers, with sections like "how it works," EWA explainers, and a dedicated awards and report page that signal credibility. What stood out as inspiration was how they handled social proof — a prominent stat block showing 1,500+ companies and real employee testimonials gave the product instant legitimacy. That pattern of leading with numbers and real faces was something we wanted to bring into Salary Hero.

PayActiv leans corporate and trustworthy — fresh blue palette, real photography of everyday workers, and a clean layout that feels safe and established. It's clearly targeting enterprise HR teams and large employers, with sections like "how it works," EWA explainers, and a dedicated awards and report page that signal credibility. What stood out as inspiration was how they handled social proof — a prominent stat block showing 1,500+ companies and real employee testimonials gave the product instant legitimacy. That pattern of leading with numbers and real faces was something we wanted to bring into Salary Hero.

Rain

Rain was the most refined of the three. Dark blue and white with strong typography, generous whitespace, and a mix of real photography and illustration that felt modern without being flashy. The target audience is clearly B2B — HR managers and business decision-makers — and the site speaks to them directly with sections like "what is EWA and how does it work," a buyer's kit, and transparent feature breakdowns. What made Rain stand out was how straightforward and honest it felt. No overselling, no clutter. Every section had a clear purpose and the copy was confident without trying too hard.

Rain was the most refined of the three. Dark blue and white with strong typography, generous whitespace, and a mix of real photography and illustration that felt modern without being flashy. The target audience is clearly B2B — HR managers and business decision-makers — and the site speaks to them directly with sections like "what is EWA and how does it work," a buyer's kit, and transparent feature breakdowns. What made Rain stand out was how straightforward and honest it felt. No overselling, no clutter. Every section had a clear purpose and the copy was confident without trying too hard.

ZayZoon

ZayZoon took a different direction entirely — mint green, white, and a heavy use of illustration gave it a friendlier, more approachable feel compared to the other two. It targets SMBs and positions itself as a financial empowerment platform, not just an EWA tool. The most interesting section was the savings calculator — an interactive tool that let visitors punch in their numbers and see the actual impact. That kind of engagement is something the other sites were missing, and it made the product feel tangible rather than abstract.

ZayZoon took a different direction entirely — mint green, white, and a heavy use of illustration gave it a friendlier, more approachable feel compared to the other two. It targets SMBs and positions itself as a financial empowerment platform, not just an EWA tool. The most interesting section was the savings calculator — an interactive tool that let visitors punch in their numbers and see the actual impact. That kind of engagement is something the other sites were missing, and it made the product feel tangible rather than abstract.

After reviewing all three, we ran a workshop with the business and sales teams to vote on the direction that felt right for Salary Hero. The result was clear — Rain. Its clean, straightforward, and transparent style matched where the brand needed to go. Not too playful, not too corporate. Just honest, modern, and easy to trust. That became our north star for the redesign.

After reviewing all three, we ran a workshop with the business and sales teams to vote on the direction that felt right for Salary Hero. The result was clear — Rain. Its clean, straightforward, and transparent style matched where the brand needed to go. Not too playful, not too corporate. Just honest, modern, and easy to trust. That became our north star for the redesign.

Solution

Comparing

Once we have the Rain website as a main reference. I started to compare side by side with the Salary hero and rain see what should we add more.

Simple, Clean, Modern yet tustworthy

After we discuss what Salary Hero branding for the website should be, we settle with Rain inspried Simple, Clean, Modern yet tustworthy

After exploring different approaches, atomic design stood out as the right methodology for Salary Hero. It gave us a clear, logical structure to build from, starting with the smallest building blocks and scaling up layer by layer into full page templates. Rather than designing screens in isolation, we could now build a system where every decision connects back to a shared foundation.

We structured the system into four layers.

Site map

Our new site map after the discussion and content approval from Customer Success team, Sales team, and Bussiness. That we will be adding more information about what's Salary Hero and what we do and make the audience wants to get to know us more.

Our new site map after the discussion and content approval from Customer Success team, Sales team, and Bussiness. That we will be adding more information about what's Salary Hero and what we do and make the audience wants to get to know us more.

Wireframe

We came up with the wireframe to make sure that the design will be in this way so that we can start ideation

Afrer that we tried many differnt version and ask around our fellow designer and our college to see any idea they have and what they prefered

Hand off

After we did the different version and many feedback from the workshop we got the hand off file and finding the developer for this project

Results

We started by looking at the three biggest names in earned wage access — PayActiv, Rain, and ZayZoon. Each had a distinct visual identity and a clear way of talking to their audience. We screenshotted and compared them side by side with the Salary Hero site to understand the gap — what they were doing well, what we could learn, and what direction the Salary Hero brand should move toward.

Reflections

this is also one of the very first project that i led to do the workshop talking to the bussiness and sales. i got full ownwership to decide the planning timeline and take real action until contact out sourced developers and connecting our in-house developers with them foe the technical stuf like clundfare and security there're so much i learn from this project

this is also one of the very first project that i led to do the workshop talking to the bussiness and sales. i got full ownwership to decide the planning timeline and take real action until contact out sourced developers and connecting our in-house developers with them foe the technical stuf like clundfare and security there're so much i learn from this project

Learning

Looking back now there are things I wish we had done differently. These are the lessons that stuck with me the most.

Aligning our changes

align our changes to the business team before making changes so that's there're no back and forth and fixing agian and agian

focus on main purpose of the website

i certainly focus more on website uxui than the main purpose if the website which is getting lead thorugh form , if the form doesn't work then is no point

Involve developers early

due to some technical and security of the domain. making the website late lanching

What's next

After luach we did some qa and keepin d feedback too

adjust some section to be scollalble

one thing that i learn is making the intreraction to be more scrollable making user experience walk though smoother

Keep maintaining and updating the system as the product grows

A design system is never really finished. As Salary Hero adds new features and evolves, the system needs to grow with it. This means regular updates, clear announcements, and making sure the team always has something reliable to build from.

A design system is never really finished. As Salary Hero adds new features and evolves, the system needs to grow with it. This means regular updates, clear announcements, and making sure the team always has something reliable to build from.

Website

Salary Hero Website