This website uses cookies for analytics and to improve provided services. By choosing I Accept, you consent to our use of them and other tracking technologies according to our Privacy Policy
good-practices-in-HR-apps-design

How to Design Your HR Tech App—Good UX and UI Practices

It is universally accepted that HR software design must, naturally, obey the general rules of good app design. Whether large or small, rudimentary or feature-rich, they ought to be clear and easy to use in order to serve their primary purpose—boosting productivity in the workplace.

Most HR applications have to handle multiple users with various access permissions, and deal with data that requires both processing and neat visualization capabilities. After all, companies using those apps usually do so to facilitate the performance of three main groups of tasks:

  • finding new hires
  • retaining and motivating employees
  • keeping track of information in employees' records

When it comes to the first two, it’s important for the software to be highly usable and appealing to the users. Let’s take a closer look at a handful of HR apps we use on a daily basis at Monterail and decided to examine more thoroughly. The key takeaways from this audit will help you get a grasp of good design practices you should follow when building your HR software. What's more, you'll see how design can enhance working more effectively as a team and build a better work culture. 

I have to warn you, though—as a member of the Design Team, I may be slightly biased towards my favorite apps ;)

1. Bonusly


Bonusly is a rewards program that can improve productivity in your company and help coworkers become more connected and engaged. Every employee is assigned a monthly budget, which they can use to show their coworkers appreciation for certain actions in the workplace, for their support, attitude, or stellar performance.

In other words, as an employee, you can reward anyone in your organization, even add an optional description to explain your reasons, if so inclined. The virtual rewards can then be exchanged for real money or gift cards. The balance resets every month.

It's a great tool for improving the visibility of everyone's contributions to the organization and providing the users with a sense of a shared goal to strive toward by supporting each other. Instant rewards like these (however small) motivate and satisfy employees more than delayed gratification in the form of quarterly bonuses, for example. Also, we tend to see big smiles on our co-workers’ faces each time any of them gets an email with a Bonusly reward notification :)

Additionally, each reward is transparent to the whole organization and appears in the main Bonusly feed.

The Bonusly interface at Monterail

The Bonusly interface, Source: Bonusly 

The app itself is well-designed and features a minimalist aesthetic, with a lot of white space, which is always good. You can also adjust the app’s color scheme to your liking—at Monterail, we use a red version rather than default green.

Even though it looks a little bit too basic, it’s far from being so—the Bonusly team managed to pack it with a lot of smart features. For example, you can minimize the main sidebar, for an even more compact look. Not even a single element of UI stayed untouched—there are hover effects on every one of them, which is amazing and handy, especially when it comes to accessibility.

Giving out points/rewards is also a breeze—all you need to do is type out a sum, tag a co-worker and add a short description of the reason for the reward with a hashtag. At Monterail, we use the hashtags to indicate the specific company value reflected in the rewarded activity. To spice things up, you can also add a gif or at least a funny picture to your bonus.

Bonusly mobile app

The Bonusly mobile app

Proper contrast and balance, with just enough white space, and properly set up paddings and margins all make this app a go-to for inspiration when it comes to designing a Web app. Kudos to Bonusly!

But, there’s more to Bonusly than just the main feed. The analytics section features rich visualizations, including charts and graphs, which allow managers to quickly check on their team members’ core values and attitudes.

Bonuses Given in Bonusly - chart

Most-frequently used hashtags for bonuses at Monterail in the last thirty days. We clearly appreciate teamwork!

The leaderboard is another nice addition. After all, there’s nothing as motivating as a little competition. Especially when the chart uses vivid colors to highlight the share of each hashtag in the total of all bonuses received.

Monterail’s Bonusly leaderboard

Monterail’s Bonusly leaderboard for the last 30 days

Key takeaways from Bonusly’s design framework:

  • minimal aesthetic/compact look
  • hover states for every UI element
  • available as a Web & mobile app (iOS and Android)
  • lightweight and fast

2. Harvest

Harvest is a cross-platform time-tracking tool, available as a standalone app for iOS, Android, macOS, and as a Web tool that can be accessed using every current browser on the market.

If you’re more of an extensions person then Harvest’s got you covered—there’s a Chrome extension, too. Personally, I use it as an app on my MacBook, which is the most convenient way for me. A well-designed, tiny, widget-like time-tracker, it doesn't require much attention and is fitted with a start-stop button and a possibility to manually add some hours at a later time in case you forget to punch the start button. It’s just great.

Harvest time-tracking web app

Harvest time-tracking app

And did you notice that there’s a time-related quote on every empty page of the timesheet reports!

The funny face of Harvest—a quote for each day

The funny face of Harvest—a quote for each day

The app’s design is quite modern and minimalist, which makes it all the more structured, with a visible hierarchy of UI elements and a bright orange accent color. These orange undertones also act as a hidden guide for the user, indicating where to click and pointing out to the most important elements of the app.

The subtle shadows of the pop-up "widget" infuse the app with a little bit of a "wow factor."

The app is fast, reliable, and it works, also on mobile.

The mobile version is almost identical to its desktop counterpart, developed for macOS. Basic functionalities, including calendar, time-tracking, etc. are always on top, while more advanced features are hidden under the hamburger icon menu. I’m not much of a power user of the mobile version, but it looks fine and works really well. Having said that, both versions of the app mentioned above (the browser-based and the desktop one) do the trick for me just fine.

Just to be clear, though—Harvest isn't just a time-tracker. As a team manager, you can also use it to log expenses and manage invoices on-the-go. You should give a try, even if you're just a one-man army doing freelance work.

Key takeaways:

  • available as a Web app, mobile app (Android and iOS), and Chrome extension
  • minimalist design
  • clear pop-ups
  • user-friendly

3. Calamari

Calamari is a piece of software designed to assist with personnel management and reduce the bureaucratic overhead related to tracking time off and employee attendance. It's not a Swiss army knife, though. Calamari offers you a really simple solution to the above-mentioned needs, and it delivers. 

Even though the mobile app has a mere 3.0 rating in the Google Play Store, it works just fine. Personally, I even think that the mobile app has been much more carefully thought out its Web dashboard-ish counterpart. Alas, I must warn you—the mobile version is available only in Polish.

The browser version could have a better summary (or overview) of your days off, your coworkers’ days off, etc. Don’t get me wrong—it’s there, but hidden quite deep.

One thing that may adversely impact your experience is the interface and its huge, bold, solid icons. They are extremely heavy, especially when compared to the rest of the UI, which is on the lighter side, weight- and colorwise. Although the icons look totally out of place on the website, in the mobile version they’re just about right.

I can see two different approaches that the designers seems to have embraced—a more operational one in the browser, and a more analytical one on mobile devices. Take a look at the screenshots below.

The Web version of Calamari

The Web version of CalamariThe Web version of Calamari—large icons on the homepage vs. proportional calendar view.

The mobile version of Calamari

The mobile version of Calamari

Key takeaways:

  • available as a Web app and a mobile app (Android and iOS)
  • minimalist design
  • simplicity is a strong key here
  • user-centered design
  • really light and pleasant to the eye

Any HR app design advice?

As you can probably tell, simplicity is key to every example I discussed above. It's a good rule to keep in mind when brainstorming or creating proofs-of-concept for any software, and especially software created with the purpose of helping an organization grow.

Keep the apps usable, minimizing the design as well as the number of features. You can, of course, add nice, fun touches to it, such as gifs or quotes, to make it more approachable and motivating the users to use it, but focus on the core business goal of the app first.

Mobile versions are also always good to have, as employees have become more mobile and often travel or use apps during meetings.

Last but not least, gather feedback. Check with the users, learn what they like or dislike about your product—after all, they’re the ones who use it on a daily basis. Maybe you’ll get lucky and some of them will be UX designers who’ll end up giving you really informative feedback.

Love beautiful products? We do, too.

Work with us and make sure that the vision you carry in your head will become reality. With proven design practices and experienced UX/UI team, we'll take your product to the next level.

 Talk to our team and build a product you and your users will want to use.

julian-tesche-interview-hs-1 Expert series: The Role of Data in Boosting Employee Engagement
HR software communication How to Sell Your HR App—Good Practices in HR Software Communication
signin Privacy-Focused Apple Sign-In—What Does It Mean for Your App?