LinovHR Payroll System
Client
None
Date
6 - 9 Oktober 2022 (3 days)
Services
UI/UX, Prototyping, Responsive
Tools
Figma
Team
Solo project
My role
Technical Test UI/UX - PT. Lawencon Internasional UI/UX Internship
STORY
LinovHR is HRD Software or LinovHR HR Application. Which offers the convenience of managing employee payroll and other HR data through the application of HRIS, to support your business.

The complexity of employee payroll and HRD data management is a problem that must be overcome. Therefore, LinovHR Indonesia HR Software is here as a solution for easy HR management in your company. Our HRD application consists of LinovHR Cloud, LinovHR Premise, payroll outsourcing services and employee attendance applications that are directly integrated with our HRD software.
TASK
So, here is the tasks :
  • Re-design website linovhr.com (Home, Payroll Outsourcing, & Blog)
  • Make a Wireframe, and Your UI (Desktop Display & Responsive View (Only For Home Display))(minimum 3 frames per user).
This is the current look of the linovhr.com website homepage :
From a number of websites that I use as references, there are 5 main elements in the Hero section, including:
  1. Title
  2. Subtitles
  3. Hero Images
  4. Social Proof
  5. Call to Action
EXPLANATION
Hero Section
📌
Stripe.com is one of the website references that I use. This website has 5 main elements in their Hero section. This also related to the term Above the Fold.
What is Above The Fold?
This is the result of the redesign of the LinovHR website. On the Navigation Bar I put several links and also a Sign in button like on the current website. However, in this redesign, I put point number 4, namely Social Proof, at the bottom of the hero section.
This is because I am using a clear Hero image with a size large enough so that users get an idea of what the LinovHR system will be used by them later.
Benefit Section
Next is the Benefit Section. In this section, the benefit points of the LinovHR products are placed. Then under the section I put point number 4, Social Proof.
I made the benefit points into Cards rather than just text. This card is equipped with a shadow so it can give an impression of elevation which is seen by the user as a component that has existence and is not mixed in the background.
Contact Section
In the contact section, I made it different from the one on the original website. Because in my opinion, too many input fields in the contact section make the website look cluttered and full.

So in this section I made it simpler by giving a CTA, namely the Contact Us button. Assuming the company has a contact portal such as the Google form or Xendit model (has a page with a special input section).
Footer
Note: For Footer Links in this redesign I am using a copy writing template, just for example, so footer links can vary depending on company needs. Because I do not know what to put in the footer link.