Product website for iTaps

Designing a product website for iTaps, a HR Management Software

Product website for iTaps
Here are more details about the project that I did:

Project Type

A client project that I did in General Assembly


3 weeks total


Team Project;

UX Researcher

Assisted with UI

Tools Used


Who is it for

Company heads and HR staff

What does it do

The Product Website for iTaps provides all the information that the user needs in order to purchase the HR Management software.

The Process

Understanding the background:

To kickoff the project, we had a project meeting with our client who shared about the problem the business faced, their business needs and the targeted audience of the app. HR processes used to be a very manual process of excel sheets, lengthy scouring of the market for talent and very complicated processes of leave approvals. With technology becoming more advanced, bigger companies moved to HR management softwares to help streamline their process. This left smaller companies like SMEs and Startups in the dust, that couldn’t afford to invest in these softwares.

Enter iTaps. This is a HR Management system, perfected for SMEs and Startups. They streamline the HR process and not for exorbitant costs of other HR Management systems out there in the market. 

Conducting research:

Understanding more about the company left my teammate and I raring to go. To start off the research process, we looked at other websites for HR Management softwares made in Singapore that were out there in the market through a competitive analysis. Getting a feel of the market helped us to know the business’ competition better. Along with that, we conducted a comparative analysis on other B2B companies’ product websites. We could see the common features of their websites and had a better idea of what our website should have. 

We also conducted interviews with 6 people that were either HR staff and business owners. Here, we managed to find what they wanted in websites that sold software and we got to learn a bit more about how HR Management softwares (Or the lack thereof) affected their work life. 

Some of our research goals:

  1. What do users look for when they visit a product website?
  2. What makes a user want to buy/try a product based on the information that they get from the product website?

What we did with the responses

Interview Affinity Map
Affinity Map

From the interviews, we synthesized what we learnt from our participants through Affinity Mapping via Miro. From this, we found out 3 main wants from our users:

  1. “I want to see the features of the product”
  2. “I want to see the reviews of the product”
  3. “I want to try the product"

Meet Desmond! 

He’s the result of all the people that we had interviewed and gathered insights from. We would be using him to keep our sights and goals aligned throughout this project of designing the website.

To design a better product for Desmond, we came up with a Problem Statement and Hypothesis:

Problem Statement

“Desmond needs more details on the functions of the software so that he can make an easier decision.”


“We believe that by giving Desmond more details on the functions of the HR Management system via the website, he will be able to make his decision easily.”

First iteration:

With more understanding on the goal, my teammate and I set out to do a quick sitemap of the prototype. 

Initial Sitemap
Our initial sitemap

We also created a task flow to allow for a streamlined process for our users to go through and we tested these in our usability test:

Initial task flow
Our Initial task flow

We built it in Figma, and it was an easy choice because of the ability to build fast and prototype quickly. 

The first iteration
Our 1st iteration

For the first test, we did the tasks in the task flow and conducted it with 3 participants. After each task, we asked our participants to give us a Single Ease Question (SEQ) score, with 1 being the hardest and 7 being the easiest. With the feedback we were given, we started making improvements on the website.

Second iteration:

Our first order of business was to change the initial site map that we had based on the feedback of our participants

Refined sitemap
Our refined site map

Since we had changed our site map, we had a refined task flow as well.

Refined Task Flow
Our refined task flow

While I was covering the first usability testing with the participants, my teammate was also putting together the style guide for the high fidelity prototype. 

Style guide
The style guide for iTaps

This time, we started transferring our designs on Figma to Axure. We liked the amount of prototyping and interaction abilities that Axure had.

The 2nd iteration
Our 2nd iteration

We conducted our second usability tests with new participants this time, courtesy to our clients. Once again, we had 3 participants and we followed the same tasks that were done previously. Once again, we asked our participants to give a SEQ score.

Final iteration

The final iteration was still done on Axure. We improved on what our participants found to be friction in our second iteration of the prototype. Feel free to try it out by clicking here to open the prototype in a new tab


Reasons why users should use iTaps

By listing what iTaps had to offer, users were more inclined to use iTaps.

The Preferred HR Management Solution

By listing the excellent customer reviews of iTaps, users were more inclined to use iTaps.

The ability to try before committing

The presence of free trials were very important to users and served as lead captures for iTaps.

Watching the product in action

We wow our users even more by creating videos to showcase iTaps in action

Next steps:

1. Better content/copywriting for users to better relate to the terms we use in our prototype

2. Videos to show how the product works 

3. Onboarding videos/pictures to show users what to do when signing up for a trial

4. Responsive layout


Communication is key. It was a great experience working with our clients because we communicated our progress on the project and received their feedback. We were able to finish this project in good time because of how communicative we were with our clients during this whole process.

Take a look at my other projects here!

Grocery Buddy!

Designing an app to help people keep track of their groceries

View Project
Redesign for e27’s mobile site

A redesign of the popular tech news website e27, making it easier for people to read the latest tech news on the go

View Project